Skip to main content

SMACSS setup

12th October, 2022

Updated: 12th October, 2022

    01-settings

    02-tools

    03-generic

    04-elements

    05-objects

    06-components

    07-trumps

    // ITCSS Structure
    // ---------------
    //  ______
    //  \    /
    //   \  /
    //    \/
    //
    //
    
    // 1. Settings
    // ------------
    // Settings that need to be accessed everywhere, think of these as global variables
    //
    @import "01-settings/vars";
    
    // 2. Tools
    // ---------
    // Any functions or mixins
    //
    @import "02-tools/breakpoints";
    @import "02-tools/url-functions";
    @import "02-tools/typography";
    
    
    // 3. Generic
    // -----------
    // Global styles, e.g. normalize/reset/box-sizing
    // If you're including 3rd-party code, pull it in from the vendor folder
    // the first actual css in the file starts here
    //
    @import "~govuk-frontend/govuk/all";
    @import "03-generic/layout";
    
    // 4. Elements
    // ------------
    // Element selectors, use sparingly, changes to these will have wide ranging impact. e.g. h1, ul, li
    //
    
    @import "04-elements/i";
    @import "04-elements/root";
    
    
    // 5. Objects
    // -----------
    // Common generic re-usable objects using the BEMIT naming convention, e.g. .o-media, .o-inline-list
    // Prefix class names with 'o-'  
    //
    
    @import "05-objects/button";
    @import "05-objects/forms";
    @import "05-objects/list-page";
    
    
    
    
    
    // 6. Components
    // --------------
    // Specific component styles using the BEMIT naming convention
    // Prefix class names with 'c-'
    //
    
    @import "06-components/govuk-inset-text";
    @import "06-components/govuk-phase-banner";
    @import "06-components/govuk-tag";
    @import "06-components/govuk-confirmation";
    
    @import "06-components/gwc-accordion";
    @import "06-components/gwc-cookie-banner";
    @import "06-components/gwc-divider";
    @import "06-components/gwc-footer";
    @import "06-components/gwc-header";
    @import "06-components/gwc-image-desc";
    @import "06-components/gwc-list-icon";
    @import "06-components/gwc-logo";
    @import "06-components/gwc-navigation";
    @import "06-components/gwc-side-content";
    
    @import "06-components/homepage-image";
    
    // 7. Trumps
    // ----------
    // Overrides and utility functions required to override any inherited styles
    // Use sparingly
    //
    
    
    
    @import "07-trumps/visually-hidden";
    @import "07-trumps/start-hidden";
    @import "07-trumps/typography";
    
    
    
    // @import "unused"; 

    f0ce6deb-3f84-42ea-b7d9-24d075f910d3

    Created on: 12th October, 2022

    Last updated: 12th October, 2022

    Tagged With: