File structure Planning

[TheWebTech]

Let's envision the file structure for CrankShaft from the ground up, completely disregard any existing boilerplate files, those can be restructured. This is my initial thought for how the files could be structured.

• theme-settings.css - contains all variables and macros. imported into theme.css and other files

• Theme.css - master CSS file that uses includes to optionally include grid or defaults, and be the main place a dev works in when building out a site

• Theme-module-customizations.css - modules are made site agnostic by default, any site specific styling to those modules could go here. this would be the second primary place a dev will edit during build out of site.

• /CS/ - crankshaft specific files go here. These files would be ones devs wouldn't want to touch directly

  • /cs-grid.css - Grid CSS isn't directly modified by user, can be referenced by Modules & company theme
  • /cs-defaults.css - minimal base css for handling HubSpot injected html/classes.

• /Modules/ -folder for placing Custom Modules into

  • /Dependencies/ - folder for placing Custom Module Dependencies into

• /globals/

  • /global modules/ - if we create any
  • /global groups/ - contains Header and footer group, which is used in all of default templates.

• /templates/ - holds all template files - files added here are minimal starters, and can optionally be used by devs during build out to make things fast

  • /system/ - system templates(error, subscription, password)
  • /page/ - page templates (1 column, 2 column, contact us)
  • /blog/ - blog templates

Please give any feedback you may have, this is a community project not a dictatorship I don't want to dictate everything here, because I don't know everything, and others may have interesting ideas I would never consider.

[TheWebTech]

I might restructure this file structure list to make it easier to read.

[dennisedson]

if possible, would be nice to have separate file for macros and variables

[TheWebTech]

updated to include that file. temporarily named it theme-settings.css if anyone has a better name throw one out there.

[johnsfuller]

I like the globals, Modules, and Templates folders. What about wrapping the other files inside a parent folder called code, and adding a hubl, css, css partials, and js folder?

code/
-hubl/
---- theme-variables.css 
---- theme-macros.css 
- css/
---- Theme.css
---- partials/
-------- Theme-module-customizations.css
-------- partial.css
- js/
---- hubspot-mobile-nav.js
---- main.js
---- etc.js
- CS/
---- cs-grid.css (maybe rename, cause I thought this was css-grid file at first)
---- cs-defaults.css

[TheWebTech]

I think all of those items make sense. Not sure on the partials folder in the css folder.(more below)

The CS-Grid part it is a css based grid. It won't be exclusively display:grid; though.

So related to how you have the partials. I want it to be easy to create "plugins" for Crankshaft. (Think like how bootstrap has plugins, think popovers, modals, sliders.) Ideally with the plugins requiring the user to simply add the necessary files in a designated spot, then add an include or require_css/js in a standard place.

I think the partials folder could be a user made thing instead. theme-module-customizations.css would be in the main css folder.

Perhaps the standard for creating plugins would be to add a /plugins/ folder in /code/. Inside of it each plugin would have a folder, and any necessary css/js as well as maybe it'd be encouraged they add an example.html explaining how to use it.(this file wouldn't ever actually be seen by anyone other than devs).

Then inside theme.css there would be a designated place to add an include to the css file.

Idk what to do with the js file if there is one. I don't like the idea of doing an include for it. Maybe just advise linking it only to modules or templates that will use it.

I think that this the plugin idea might need a bit more thought. (another idea I had was having a require_css and require_js inside of a css file to load the assets into the pages, but I don't think that'd actually work that way.)