File Locations

Assets

Assets, such as css and js files, are located in the assets/src directory.

Files in the scss, js, and images directories in assets/src are compiled by gulp and built in the assets/dist directory. These files are not tracked in git, though other folders and files in the assets/dist directory, such as fonts, are tracked. This eliminates merge conflicts with build files.

Netlify and CI products can be setup to run gulp build when deploying to a site from a repo utilizing the npm run build command in pacakge.json.

Objects and Components

Modules in the Objects folder are considered to be ‘global’ in scope and typically do not exist as a complete layout. Fundamentally, these are patterns that are meant to be used within multiple Components. Making a change to html or css in an Object module can have far reaching implications across multiple components.

Objects typically include:

  • Layout structures such as grids, content/sidebar layouts
  • Globally styled items, such as buttons or cards
  • Items that share a functional structure, such as accordions

Objects should have the bare minimum in terms of styling. With the exception of layout structures, Objects should most often have their styles, such as width or margin, defined by the Component they are used in.

Components are specifically styled bundles that are consided ‘specific’ in scope. They are complete layouts that may contain Objects (and alter them with css). Components are the building blocks of the site.