🧑‍🚀 Launchpad SCSS

Launchpad SCSS is a boilerplate for Sass (scss) used in projects to maintain a well structured and scalable CSS. Comes with basic functions, mixins and coding standards.

It is a well tested architecture that works in projects of any size, from small single-page applications to large enterprise e-commerce.

Looking for a component library? 🚀 Rocket SCSS is a minimal component libary built on Launchpad SCSS used to make the the start of a new project skyrocket.

Methodology

The design of this boilerplate is based on the CSS mothodology BEM.

The following is an example of how a component could be structured.

<div class="foo foo--alternative">
  <div class="foo__bar">
    <!-- HTML -->
  </div>
</div>

In the example above, .foo is the name of the component (block). .foo__bar is a child element. .foo--alternative is a modifier. To convert this into scss it could look like this:

.foo {
  color: #000;

  &--altenative {
    color: #757575;
  }

  &__bar {
    margin-bottom: 8px;
  }
}

Structure

The scss is structured in four main folders with styles.scss as a main input file.

• helpers
• imports
• materials
• partials

helpers

Helpers are features such as functions, mixins and theme related variables such as colors.

To use helpers in your components, import them using scss @use rule.

@use "../../../helpers" as *;

You can also import each subcategory in helpers if you just want to use a specific part. It is also possible to add a custom namespace by raplacing * with desired namespace.

breakpoint

This folder contains all information about breakpoints used in the project. Breakpoints are defined in helpers/breakpoint/_breakpoints.scss.

To customize breakpoints, add the breakpoints needed in $breakpoint-defs. This scss map will automatically create min-width and max-width breakpoints based on its values. As an example, if you add a breakpoint called sm, two breakpoints will be generated; sm and lt-sm.

color

This folder contains all information about colors used in the project. Colors are defined in $color-defs (helpers/color/_definition.scss) and assigned to a variable in $colors (helpers/color/_colors.scss).

To use colors in other files, use the function color() that are exposed and imported using the @use rule. It is imported with everything else from helpers but can also be imported alone using the following @use rule.

@use "../../../helpers/color" as *;

When colors is imported, set the color using the color() function. This function can fetch values from a deep nested scss map.

.foo {
  color: color(text, main);
}

The example above refers to the variable text.main defined in the $colors map:

$colors: (
  text: (
    main: color-defs(black),
  ),
);

font

This folder contains all styling related to the font(s) used in the project. helpers/font/_fonts.scss includes mixins to define a specific font style.

If you are going to add own fonts using @font-face, this is the place where that code should be placed.

To use colors in other files, use the mixins exposed and imported using the @use rule. It is imported with everything else from helpers but can also be imported alone using the following @use rule.

@use "../../../helpers/font" as *;

When font is imported, set the font using any of the font mixins.

.foo {
  @include font-regular;
}

function

This folder contains global functions used across the project.

To use these functions in other files, use the functions exposed and imported using the @use rule. It is imported with everything else from helpers but can also be imported alone using the following @use rule.

@use "../../../helpers/function" as *;

size

Size is a useful function used to create spacing in the project. This function is found in helpers/function/_size.scss and should be used everywhere where a value is set in px.

The size is calculated using a multiplier and base unit. The base unit is set to 8px by default but could be changed in this file.

.foo {
  padding: size(4); // 4 * 8px = 32px
}

str-replace

This is a basic function found in helpers/function/_str-replace.scss used for replacing substrings in a string. The functions takes $string (input string), $search (substring to be replaced) and $replace (string to replace $search with. Default '') as parameters.

$hex: #f5f5f5;
$hex-digits: str-replace(#{$hex}, '#', ''); // f5f5f5

mixin

This folder contains all global mixins used in the project. Mixins are primarily used to add prefix to properties, but there can also be other use cases.

To use these mixins in other files, use the mixins exposed and imported using the @use rule. It is imported with everything else from helpers but can also be imported alone using the following @use rule.

@use "../../../helpers/mixin" as *;

variable

This folder contains all global variables used in the project.

To use variables in other files, use the functions exposed and imported using the @use rule. It is imported with everything else from helpers but can also be imported alone using the following @use rule.

@use "../../../helpers/variable" as *;

variables

Global variables are defined in the map $variables found in helpers/variable/_variables.scss. To use the variables in other files, use the scss-var() function. This function can fetch values from a deep nested scss map.

.foo {
  font-size: scss-var(font, size, large);
}

The example above refers to the variable font.size.large defined in the $variables map:

$variables: (
  font: (
    size: (
      large: 1.125rem,
    ),
  ),
);

constants

Constants are located in helpers/variable/_constants.scss and includes variables that are bound to CSS itself.

Constants are defined in the scss map $contants and used using the exposed function const(). This function can fetch values from a deep nested scss map.

These constants could be useful when positioning a modular component for intance. The example below uses the constant position, inline, x to add modifiers for text alignment.

.foo {
  @each $value in const(position, inline, x) {
    &--align-#{$value} {
      text-align: $value;
    }
  }
}

The example above refers to the variable $position-inline-x used in the $contants map:

$position-inline-x: left, center, right; // This variable is not exposed using @forward

$contants: (
  position: (
    inline: (
      x: $position-inline-x,
    ),
  ),
);

imports

Imports are located in imports and this is where all components are imported.

To minimize unnecessary CSS for media queries, each media query for the breakpoints are only declared once. Breakpoint specific files are then imported in the correct import file.

Each component should include a scss file for each breakpoint it uses. These breakpoint files are imported in imports using scss @use rule.

As an example, demo.scss is the default scss file for that component. This file contains styling across all breakpoints. This file is imported in imports/imports.scss. The breakpoint specific file in the same component, demo-sm.scss, contains styling used in the sm breakpoint (and larger) and is imported in imports/imports-sm.scss.

To summarize, breakpoint media quieries should not be included in any components, but be handled in imports instead.

materials

Materials is the building blocks in the project. Each material should be based on the lowest common dominator. A material is modular and could be used by iteself, inside other materials or in combination with other materials.

Materials is split into two parts; componets and layout. They are both containing components, but separated to make the structure easier. This is the place where the majority of the work is done.

Important: It is important to name the components and thier breakpoint folders correctly. The folder and default scss file should both be named as the comopnent itself. Breakpoint specific scss files should be suffixed with *-[BREAKPOINT] ([COMPONENT_NAME]-[BREAKPOINT].scss). If the components is named demo the breakpoint file for the sm breakpoint should be named demo-sm.scss.

components

Components are found in materials/components. Each folder in this location component represents a component. Each component consists of one or more scss files (one for each breakpoint).

A demo component is included in this boilerplate called demo to demonstrate how a component is supposed to be built.

layout

Components that are used for layout purposes only should be placed in materials/layout. Other than that, the same rules as for components applies here.

The layout component container is included in this boilerplate as an example of what a layout material is. This is also a very useful component in most projects.

partials

Partials contains styling aimed at elements and global styling, such as base styling, focus, keyframes and reset CSS.

Work in this repository

Before you start working in this repository, install the dependencies.

npm install

Compile scss to CSS

Compile the scss in this project into CSS by running the following commands.

npm run sass

The scripts will output a CSS file at compiled/styles.css.

Code formatting

This project uses Prettier to format the code. To format all files, run the following command.

npm run prettier

Lint

This project uses Stylelint to lint the scss. The settings is based on stylelint-config-standard-scss. To run the lint, run the following command.

npm run stylelint