For its CSS, EvoToolkit leans heavily on Inverted Triangle CSS (ITCSS), an architecture where CSS is broken down into multiple layers which are organised by how specific and explicit their style declarations are.
These layers are as follows, from high explicity to low, hence the inverted triangle ▼:-
- Settings - Global variables, maps, and other data used by the framework.
- Tools - Helpful SASS functions and mixins which are suited for various tasks.
- Generic - The first layer that actually produces any CSS. It houses very high-level, far reaching styles which effect much of the DOM.
- Elements - Styling bare, unclassed elements. For example, what would a
<h1> look like without any classes attached?
- Objects - These are undecorated design patterns. You would typically use these as a part of existing components or when building your own.
- Components - Ready made, customisable UI components which you can drop into your project.
- Utilities - High-specificity, very explicit selectors. Typically small, single use helper classes.
ITCSS helps you to organize your project CSS so you can better handle specifics like global namespace, cascade and selector specificity; making your CSS more scalable and maintainable in the process.
See 'Manage large CSS projects with ITCSS' (Article / Video), aswell as the resources below, for a more thorough exploration into this methodology.
Most EvoToolkit CSS is disabled by default, encouraging an 'enable as required' approach. See Configuring EvoToolkit for more info.
Here's a few points of note:-
- Code is extrapolated into seperate files using the same ITCSS directory structure where possible for consistency (Tools, Objects, Components, etc). This also helps ensure a seperation of concerns.