-
Notifications
You must be signed in to change notification settings - Fork 3
Sass
├───base/ # These styles set the base of your applications
├───components/ # Think widgets
├───layout/ # Styles for the global structure of application
├───modules/ # Macro-level components, repeatable & re-usable
├───pages/ # Page specific styles
├───settings/ # Options for the Sass
├───utils/ # Utilities to make your development faster & more efficient
└───vendor/ # Vendor styles├───base/
│ ├───reset # Reset styles
│ ├───print # Base print styles, specific styles will be inline
│ ├───forms # Base styles for all form elements
│ ├───type # Base styles for headings, paragraphs, lists...etc
├───components/
├───layout/
│ ├───main # Styles that apply to the main container of application
│ ├───header # Styles that apply to the global header of application
│ ├───footer # Styles that apply to the global footer of application
│ ├───nav # Styles that apply to the global navigation of application
├───modules/
│ ├───cms/
│ │ └───wordpress # Default Wordpress helper classes
├───pages/
├───settings/
│ ├───options # Sizing variables, Media Query definitions, and other fancy stuff
│ ├───colors # Color values used throughout the application
├───utils/
│ ├───functions/
│ │ └───units # Function to use em() and rem()
│ ├───mixins/
│ │ └───media-queries # Media query mixin
│ │ └───js-breakpoints # Syncs up our CSS Media Queries to work with sassqwatch
│ │ └───rem # Mixin for rem sizing
│ │ └───type # Mixin to handle font & line-height
│ │ └───modernizr # Mixin for modernizr feature testing
│ │ └───keyframes # Cross-browser mixin to help out with animations
│ │ └───placeholder # Cross-browser mixin to help out with placeholders
│ │ └───responsive-grid # Starter grid system to get you started
│ │ └───z-index # A tasty solution for managing all things z-index related
│ ├───extends # Contains all your %extends and %placeholders.
│ ├───fonts # Contains all your @imports, @font-face, and third-party fonts
│ ├───keyframes # Contains all your defined keyframes
│ ├───sprites # Contains all your sprite variables and mixins
│ ├───symbols # Contains all your custom icon font variables and mixins
│ ├───utilities # Utilities to achieve faster & easier development
└───vendor/To us the base/ folder holds the boilerplate code for a project. It acts as a base layer or foundation of the project. More often than not, it will contain your reset, print styles, forms, and any global typography rules. In a sense, these are your standard styles for commonly used HTML elements.
The easiest way to think of components, would be as widgets. It'll contain specific modules like buttons, loaders, search forms. You'll usually have many of these as your site will be composed of many tiny modules.
Could also be referred to as partials. While components are more widget & micro based, modules are macro based. They encompass larger areas that area re-usable in your template parts. Some repeating visual patterns could be: hero/banner areas, paginations, or repeating content modules specific to a project or application.
When it comes to laying out your site, think of your global elements. Such as header, footer, navigation, & your main global content area. Even grids!
Page specific styles are best served under pages/ with a file name after the page.
The rule of thumb for utils/ is that is should not output CSS when compiled on its own. These are nothing but Sass tools & helpers used across the project or application. Variables, functions, mixins, placeholders ... etc.
There will be times that you'll need an external library. And more often than not, that library will come with their own CSS or Sass styles.
All of our global variables & options will be found here.
This is where we @import all of broken up files. In order to preserve readability, the file should respect the following guidelines:
- one file per @import
- one @import per line
- no new line between two imports from the same folder
- a new line after the last import from a folder
- file extensions and leading underscores omitted