Dusted Guide

# SASS

Please begin with installing npm and starting your running npm start

Index for scss

# Basics

Standard CSS

The majority of dusted projects are styled with scss and then compiled on save in to css

Example of CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

With SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable.

Learn more about the basics of sass, please read - Sass Basics (opens new window)

# SASS with dusted Projects

Most of the dusted sites are set up in the same way.

Each section of the website is usually created as what we call a "Pattern" which would have a corresponding sass file. These will usually always be named the same.

An Example of this would be, if the file you wanted to edit the styles for a pattern called row-accordion.php, the file you would need to locate would be _accordion.scss

You can locate these patterns usually always within the same place:

Project/custom/themes/Project-theme/src/assets/scss/templates/patterns

(This may vary depending on the project.)

# Global Site settings

Our sites are based on foundation.

custom/themes/belasko/src/assets/scss/_settings.scss

# Global Site settings - Variables

We can store things like font-family, colors, breakpoints many others in variables.

A good example would be the colour palette of the website.

$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;

This can now be used around the site when needed:

p {
    color: $black;
    &:hover {
        color: $white;
    }
}

# Global Site settings - Breakpoints

All breakpoints are stored within the _settings.scss and can be used within any scss file to make your element responsive.

Example of breakpoints found within _settings.scss

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large);

Making an element responsive:

.div {
    width: 100%;
    @include breakpoint(medium) {
        width: 50%;
    }
    @include breakpoint(large) {
        width: 25%;
    }
}

looking at the last snippet, large screens and above (1024px) will make this element width: 25%;.

Medium screens and above (640px) will make this element width: 50%;

# Global Site settings - Foundation Grids

Within this settings file, we have a default grid set up for use with foundation:

$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
  small: 20px,
  medium: 50px,
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;

The $grid-column-gutter may need editing depending on the design.

We can use width: calc(6 / 12 * 100%); to set something to 50% within the grid.

# Creating SASS Files

app.scss - Creating new Pattern

In the scenario you have just created a new pattern, or you need to add an additional sass file, this is very simple to do:

Project/custom/themes/Project-theme/src/assets/scss/templates/patterns

Create your scss file where needed, and name it accordingly (In this scenario we're creating one for a pattern called row-hero.php) and name it _hero.scss

This will then need to be imported within the app.scss.

Project/custom/themes/Project-theme/src/assets/scss/app.scss

This can be imported using:

@import "templates/patterns/hero";

# Foundation enable SCSS features

app.scss - Foundation Enable features

Foundation comes with a huge amount of pre setup features we can toggle on and off.

@include foundation-typography;
@include foundation-button;
// @include foundation-forms;
// @include foundation-range-input;
@include foundation-accordion;
@include foundation-accordion-menu;
// @include foundation-badge;
// @include foundation-breadcrumbs;

These can be toggled on and off by simply commenting them out or uncommenting depending on if the feature is needed.

Don't forget to run npm run build to build your css, add & push!

← CSS →