vaco-scss

    0.0.1 • Public • Published

    V. Alexander's SCSS Library

    This is merely a starting point for how I prefer to structure my CSS. I had followed several guides that have led me to create this Frankenstein. If you prefer LESS, you can view a version exactly like this!

    What you can do:

    • Restructure it in any form or fashion that you so please!
    • Offer your own tips/suggestions.

    Inspiration

    Several reasons that I created this project:

    • Folder structure is intuitive
    • Attempts to address (respect) CSS specificity
    • I was tired of doing it a million times with every new project!

    Sources:

    • ITCSS - A video that introduced me to ITCSS. Do NOT be discouraged by video length - worth the entire watch!
    • Reddit - random Reddit comment that pointed me to the light

    Version

    1.0.0

    File format

    .scss
    

    Folder structure

    .
    +-- base
    |   +-- _base.scss
    |   +-- general.scss        (Modifications to html, body, main, etc.)
    |   +-- layout.scss         (Classes such as containers or rows)
    |   +-- shared.scss         (Common classes similar to 'is-hidden' or 'text-center')
    |   +-- typography.scss     (Font elements such as anchor tags, header tags, etc.)
    +-- components              (These should be straight-forward :P)
    |   +-- _components.scss
    |   +-- buttons.scss        (Styles for buttons)
    |   +-- footer.scss         (Styles for the footer)
    |   +-- forms.scss          (Styles for forms)
    |   +-- header.scss         (Styles for the header)
    |   +-- sections.scss       (Styles for sections)
    |   +-- tables.scss         (Styles for tables)
    +-- variables
    |   +-- _variables.scss
    |   +-- animations.scss     (Include any animations)
    |   +-- colors.scss         (Include your color/themes and global color names)
    |   +-- general.scss        (Include and general variables like @media screen breakpoints)
    |   +-- mixins.scss         (Include all mix-ins)
    |   +-- typography.scss     (Include your font sources and global font names)
    +-- vendors
    |   +-- _vendors.scss
    |   +-- normalize.scss      (Typically included in other vendor files, but just in case :) )
    +-- main.scss               (Imports all files)
    +-- package.json            (Project information)
    +-- README.md               (This file)
    

    General rules/Suggestions

    These are some general rules that I follow - feel free to modify them in any shape, form, or fashion.

    • The folder name prepended with an underscore will be the file that imports all files in the same directory
      • Remember that if it isn't in this file, it won't be included.
    • Create new component files as your project expands. Even if it is just a few lines of CSS! This helps maintain the isolation/modularization that is being attempted.
    • Comment your code
    • Consistent class naming (BEM is an example)
    • Non-specific/maintainable variable names ($font-primary, $color-primary, etc.)
    • The ITCSS provides a good rule of thumb: nesting more than 3 levels is frowned upon
    • Include media queries in same file (I prefer them nested within the classes)
    • If you are creating variables that do not span across the entire project, include them in the component file only

    Color Naming

    I typically choose a color palette from coolors.co and use their color names to identify them. There is an example in the file:

    variables/colors.scss
    

    You will notice that I have imported a palette generated by coolors.co but then renamed them. These names are provided on coolors.co but can also be generated at another website, Name That Color, that I love to use when naming my colors.

    In order to avoid memorizing HEX color codes, try variable names!

    $color-cornflower-blue: #6195ED;
    

    However, for the purposes of best practice, if we have a color that is used consistently (read: main or primary), then it would be best to name the color:

    $color-primary: $color-cornflower-blue;
    // or
    $color-main: $color-cornflower-blue;
    

    That way, if the designer decides to change the main/primary color, it only has to be done in one spot!

    Tech

    Only thing that you will need is a preprocessor compiler for SASS!

    • Koala - A build-process free LESS/SASS compiler

    That sounds simple enough, however, I suggest you get yourself a build process using:

    • Gulp - the streaming build system
    • Grunt - the JavaScript task runner

    Installation

    There is no need to 'install' anything. Clone the repository, and copy the folder structure into your project. The only file that you will need to reference is in either your build process or compiler:

    main.scss

    This lives at the root of the project directory.

    Todos

    • Improve README
    • Create .sass version

    Other good sources/tools

    Here are some other good sources/tools on SASS, CSS and BEM (and more) that I have found useful!

    License

    MIT

    Install

    npm i vaco-scss

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • valexander