// 0. Vendor - Imported from other source @import "vendor/normalize"; // 1. Settings – used with preprocessors and contain font, // colors definitions, etc. @import "settings/global"; @import "settings/colors"; @import "settings/typography"; // 2. Tools – globally used mixins and functions. // It’s important not to output any CSS in the first 2 layers. @import "tools/container"; // 3. Generic – reset and/or normalize styles, box-sizing definition, etc. // This is the first layer which generates actual CSS. @import "generic/box-sizing"; // 4. Elements – styling for bare HTML elements (like H1, A, etc.). // These come with default styling from the browser so we can redefine // them here. @import "elements/a"; @import "elements/blockquote"; @import "elements/figure"; @import "elements/headings"; @import "elements/html"; @import "elements/pre"; // 5. Objects – class-based selectors which define undecorated design patterns, // for example media object known from OOCSS @import "objects/container"; // 6. Components – specific UI components. // This is where majority of our work takes place and our UI components // are often composed of Objects and Components @import "components/site-header"; @import "components/posts"; @import "components/post"; @import "components/photos"; // 7. Utilities – utilities and helper classes with ability to override // anything which goes before in the triangle, eg. hide helper class