virtual/stylelint

Stylelinting for style guidelines in .scss files

Stylelint

In VSCode, to fix all fixable errors, open the Command Palette and choose "Stylelint: Fix all auto-fixable problems"

• Install VSCode Stylelint plugin
• Clone repo to your computer (eg /Users/jeanine.schoessler/code/stylelint)
• cd to stylelint and npm install

Example VSCode config:

{
  ...
  "stylelint.snippet": [
    "css",
    "less",
    "postcss",
    "scss"
  ],
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss"
  ],
    "stylelint.configFile": "/Users/jeanine.schoessler/code/stylelint/.stylelintrc.json",
    "stylelint.config": null
    ...
}

---

Creative Hive standards (2022 April):

Use indentation of four (4) spaces, and add new lines between selectors and css blocks; 0 should always be a unitless 0 (not 0px nor 0rem):

.custom-hero-welcome {
    .hero-right-content {
        margin: 0 auto;
        
        @include media(tablet-and-up) {
            padding: 24px $theme-space-large;
        }

        h2,
        p,
        .SearchForm {
            background-color: $ptc-gray-light;
        }
    }
}

Alphabetize attributes (background-color goes before color):

.custom-hero-welcome {
    @include flexbox();
    @include flex-flow(row wrap);
    @include align-items(center);
    background-color: $theme-color-grey-hero-background;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: $theme-black;
}

Use lowercase hex colors; can be written as 6-digit #ffffff or shorthand #fff:

$theme-dark-blue:     #236192;
$theme-cool-gray:     #c8c9c7;
$theme-gray:          #3d4647;
$theme-white:         #fff;

Write a comment after !important uses for why it's necessary:

.lia-cancel-search {
    font-size: $font-size-xsmall !important; // override Hermes !important
}

Combinators (>, +, ~) should have a space before and after:

.selector > .child { 
    color: $theme-color-primary; 

    &.anotherclass {
        & + p {
            color: $theme-color-secondary;
        }

        li ~ li {
            margin-top: 0;
        }
    }
}

.selector {
    & > * {
        color: $theme-color-secondary;
    }
}

Psuedo-elements content should support screenreaders with a default variation. (As of now there is no preference for :: or :)

.selector::after {
    content: "\f0a2";
    content: "\f0a2" / "";
}

.selector {
    &:before {
        content: "\f007";
        content: "\f007" / "";
    }
}

Add a space before opening curly braces ({) and place closing curly braces (}) on a new line:

.selector { 
    color: $theme-color-primary; 
    
    @include media(desktop-and-up) {
        @include flexbox();
        @include flex-direction(row-reverse);
    }
}

Aim to develop mobile-first, preferred variable uses:

• $large-desktop
• $desktop-and-up
• $tablet-and-up
• $phone
• $phone-min
• $tablet-and-down
• $desktop-and-down

New files

Freemarker

Freemarker files should be named either starting with custom.name-of-component (custom) or theme-lib.name-of-component (Hermes). Avoid creating filenames or code referencing the customer name.

Basic building block of custom.name-of-component.ftl:

<#-- custom profile notifications -->
<div class="custom-profile-notifications">
    ...
</div>

SCSS

For new scss partials for styling custom component, create the partial in custom; don't name it using "custom" or "customer name", for example: custom/_wayfinding-tiles.scss would be a good name.

For new partials, add a comment at the top of the .scss file, eg:

// custom/_wayfinding-tiles.scss

To-do:

• Can we generate .map files for css, js? This would be done in the compiledskin folder as part of core LIA