/////////// // ITCSS -- https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ // Settings // used with preprocessors and contain font, colors definitions, etc. @import 'settings/colors'; @import 'settings/variables'; // Tools // globally used mixins and functions. It’s important not to output // any CSS in the first 2 layers. @import 'tools/mixins'; @import 'tools/keyframes'; // Generic // reset and/or normalize styles, box-sizing definition, etc. This is // the first layer which generates actual CSS. @import 'generic/reset'; @import 'generic/container'; @import 'generic/grid'; @import 'generic/typography'; @import 'generic/skips'; // 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/body'; @import 'elements/header'; @import 'elements/headings'; @import 'elements/main'; @import 'elements/section'; @import 'elements/article'; @import 'elements/p'; @import 'elements/img'; @import 'elements/video'; @import 'elements/lists'; @import 'elements/links'; @import 'elements/form'; @import 'elements/inputs'; @import 'elements/footer'; // 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/header-menu'; @import 'components/home-loop'; @import 'components/global-head'; @import 'components/search-form'; @import 'components/social-menu'; @import 'components/footer-sponsors'; // Utilities // utilities and helper classes with ability to override anything which // goes before in the triangle, eg. hide helper class @import 'utilities/helpers';