This framework is loosely based upon the HubSpot COS Boilerplate to ensure HubSpot compatibility and because it was a good starting point. Our goal however is to build a framework for building websites on HubSpot that enables faster development, higher quality and better performance. Just because it's in the boilerplate doesn't mean it needs to stay. We also don't need to keep the same file structure at all. This might look completely different than the old boilerplate when we're further along, and that's perfectly okay.
We are building the Crankshaft to the whole HubSpot Flywheel - hense the name.
If you're still confused as to what this is, our goal is to be similar to Foundation by Zurb, Bootstrap, or probably more similar is Shopify's Timber Framework. Our goal is to create a great framework for building HubSpot sites and custom modules.
We're in the early stages. Fair warning to anyone looking to use this framework - we will make strides to always make the master branch be stable, but understand we are very much in the early phase of planning and building, I would not consider this framework Production site ready just yet. Contribute how you can/want to. Feel free to create issues and we'll talk some things through. Feel free to add code.
If you'd like an invite to contribute to this Repo, fork it, make your changes, and submit a pull request. If you tend to make frequent updates we'll add you as a contributor which lets you make branches on the official repo.
I would encourage avoiding a build process as some users will want to use this directly in HubSpot, some may wish to work locally.
Upvote relevant ideas to be implemented by HS
- Responsive backward compatible grid. We will base this on Bootstrap 4's grid.
- Utility classes
- Variable Breakpoints
- helpers for making different types of UI elements like buttons.
- many features will be enabled and disabled using hubl vars.
That means:
- We can use variables
- We can use Macros like SASS extends
- We can conditionally load chunks of CSS
- We can separate code into more modular chunks - enabling say the grid to be separated from other parts of the framework, allowing developers to call the grid css file in their modules. If it makes sense to do so. HubSpot Combines and minifies files making this possible.
- We can create Utility classes that are specific to HubSpot.
- You know it's going to be there, so go ahead and use it.
Current Browser Support Goal: IE 11, Google Chrome, Firefox, Safari, Edge current versions. All other browsers are a plus.
(If you feel this should be changed complain about it in Issues and we'll strike up a friendly discussion)
- Boilerplate
- COS Responsive explanation
- Intro to HubL
- HS Developer Chrome Extension
- HubSpot Community
- "CrankShaft" Name by Mark Ryba
- Name voted on by AJ Laporte, Maia Singletary, Jim Mikecz, Jon McLaren.
- Grid methodology discussed by AJ Laporte, Mark Ryba, Jon McLaren, Jenna Schultz.
- Logo designs submitted by Andreas Wessoly and Jon Eichler.
- Logo voted on by Jon Eichler, Ryan Noon, Chad Pierce, John Fuller, Luke Summerfield, Dennis Edison, Umakant Sharma, Gonzalo Torreras, Erik Hooijer
- Community coordination/organization led by Jon McLaren
Want to get involved? post issues, submit pull requests, and join the discussion in the Slack Channel.