Getting Started with Friday Design System

We have made Friday Design System easy to get started. We have put together these guides to help you get up and running in no time. These guides include SCSS setup and install, how to use the FDS components, accessibility and more.

How to use FDS:

We have put together some guides to help you start super fast. There are two ways to use FDS:

Install FDS with NPM package manager

Friday Design System is available on npm. The package includes all of the source SCSS and JavaScript files.

Using FDS in Angular Projects:
  1. First, install the core FDS components in your project:
    npm logo
    npm i @mobilelivenpm/fds-static-scss
  2. Then, install the FDS angular components:
    npm logo
    npm i @mobilelivenpm/fds-angular
  3. Also you can additionally install icon packs from following location:
    npm logo
    npm i @mobilelivenpm/fds-icons

Once package is installed, all the components are imported in node modules. Perform the following steps to use FDS components in your project:

  1. Use component styles:

    In your main style sheet, import (SCSS) styles of selected components using following path:

    @import node_modules/@mobilelivenpm/fds-static-scss/src/scss/component
  2. Customize component styles:

    In order to customize the existing component, create a theme folder in your main styles and copy the styles file of the relevant component from the sample path as shown:

    @import node_modules/@mobilelivenpm/fds-static-scss/theme/component

File Structure (Development Environment)

The following file structure is for FDS-Static repo:

flow chart

Please note this structure gives an overview of important files/folders required to run static FDS theme.


static > src > scss

The SCSS folder contains core styles for all components. These styles should be selected as per each component.

static > src > styles

The styles folder contains final styles that contain all core styles.

static > src > views

The views folder contains html templates of all components.

static > theme > theme-settings

Use theme settings to override core component styles as per your need.

General

This section describes the Components and Layouts, Containers, a Grid system and Responsive Utility Classes.

Container

Containers are the most basic layout element and are required while using grid system. The main objective of using Container is to contain and/or center the content. Containers can also be nested as per requirement.

There are Three types of Containers in our Design System:

  • .container sets a max-width at each responsive breakpoint:
    breakpoint <576px breakpoint ≥576px breakpoint ≥768px breakpoint ≥992px breakpoint ≥1200px
    max-width:100% max-width: 540px; max-width: 720px max-width: 960px max-width: 1140px

    How to use: <div class="container"> Content here </div>

  • .container--fluid, which always has width:100% irrespective of breakpoints:
    breakpoint <576px breakpoint ≥576px breakpoint ≥768px breakpoint ≥992px breakpoint ≥1200px
    width:100% width:100% width:100% width:100% width:100%
  • .container--{breakpoint}, has width:100% until the set breakpoint:
    breakpoint <576px breakpoint ≥576px breakpoint ≥768px breakpoint ≥992px breakpoint ≥1200px
    .container--sm width:100% max-width:540px max-width:720px max-width:960px max-width:1140px
    .container--md width:100% width:100% max-width:720px max-width:960px max-width:1140px
    .container--lg width:100% width:100% width:100% max-width:960px max-width:1140px
    .container--xl width:100% width:100% width:100% width:100% max-width:1140px

Grid system

FDS provides mobile first flex based grid system to build layouts of various sizes. Grid system contains 12 columns, 5 breakpoints and many utility classes.

1/3 columns
1/3 columns
1/3 columns 

<div class="container">
    <div class="row">
      <div class="col--sm">
        One of three columns
      </div>
      <div class="col--sm">
        One of three columns
      </div>
      <div class="col--sm">
        One of three columns
      </div>
    </div>
  </div>

Above code creates 3 columns of equal width centered in the page with '.container' class.

Auto Layout

Using col only without specifying sm or md generates equal size columns:

One of three columns
One of three columns
One of three columns 

<div class="container">
    <div class="row">
      <div class="col">
        One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
      <div class="col">
        One of three columns
      </div>
    </div>
  </div>
Variable Content Size

Using col--{breakpoint}--auto generates column based on content size:

One of three columns
Variable Content Size
One of three columns 

<div class="container">
      <div class="row">
        <div class="col">
          One of three columns
        </div>
        <div class="col--auto">
          Variable Content Size
        </div>
        <div class="col">
          One of three columns
        </div>
      </div>
    </div>