Styles

Technology used

• Sass as our stylesheet language
• Bootstrap as our framework. See this page's section on bootstrap

Bootstrap

We use the reywood:bootstrap3-sass package. bootstrap-variables.scss contains the customizable bootstrap variables and get's imported in bootstrap.scss.

Variables

Location

Variables get stored the nearest possible to where they are used. Meaning:

• Variables used only in the same scss block get defined locally:

.mycelium {
    $background-color: $blue;

    background-color: $background-color;
    color: darken($background-color, 10%);
}

• Variables used only in the same stylesheet get defined there:

// _fungus.scss
$fungus-stress: 0;

.fungus-cap {
    stress: $fungus-stress;
}

.fungus-stipe {
    stress: $fungus-stress;
}

• Variables used across stylesheets get defined in variables.scss

Naming

• Local variables are named after the property they define e.g. $border-color
• Global variables are named in a way they contain information about their use and the property they define e.g. $course-border

Code Style

Nesting

Nest pseudo-classes, appended classes, pseudo-elements and @media statements if more than one. Everything else get's its own rule.

.armillaria {
    //...

    &:hover { }

    &.solidipes { }

    &::after { }

    @media (min-width: 768px) { }
}

.armillaria > .cap { }

.armillaria > .stipe {
    //...

    &:active { }
}

.armillaria > .spore::before { }

Order

We try to keep the following order:

1. Extends
2. Mixins
3. Properties (in alphabetical order, except for cases where it's not possible -> documentation needed)
4. Pseudo-Classes
5. Appended Classes
6. Pseudo-Elements
7. @Media Statements

.agaricales {
    @extend %agaricomycetes;
    @include foxfire;
    align-content: center;
    //...
    z-index: 999;
    
    &:first-child { }

    &.physalacriaceae { }

    &::after { }

    @media (max-width: 1920px) { }
}