// 0. Vendor - Imported from other source @import "vendor/iconfont"; // 1. Settings – used with preprocessors and contain font, // colors definitions, etc. // 2. Tools – globally used mixins and functions. // It’s important not to output any CSS in the first 2 layers. // 3. Generic – reset and/or normalize styles, box-sizing definition, etc. // This is the first layer which generates actual CSS. @import "generic/box-sizing"; @import "generic/reset"; // 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/abbr"; @import "elements/block"; @import "elements/body"; @import "elements/headings"; @import "elements/html"; @import "elements/lists"; // 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/stripe"; @import "components/header"; @import "components/logo"; @import "components/content"; // 7. Utilities – utilities and helper classes with ability to override // anything which goes before in the triangle, eg. hide helper class @import "legacy";