Getting Started

Source: materials/getting-started.md

Quick start

Add the following stylesheet <link> to your <head> before all other stylesheets.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/project-fast@2.0.0-beta.2/dist/css/style.css">

Add the following script before the the closing </body> tag. No jQuery required!

<script src="https://cdn.jsdelivr.net/npm/project-fast@2.0.0-beta.2/dist/js/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/project-fast@2.0.0-beta.2/dist/js/app.min.js"></script>

How to install

NPM

npm install project-fast

Yarn

yarn add project-fast

Usage with Laravel Mix

Add the following code to webpack.mix.js:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

And resources/sass/app.scss:

// Variables
@import "variables";

// Project FAST
@import '~project-fast/src/scss/includes.scss';

Add the following code to resources/js/app.js:

import Fast from 'project-fast';

Variables

Source: materials/general/variables.md 
$color-primary:                   #F37748 !default;
$color-secondary:                 #696969 !default;

$color-base-white:                #fff !default;
$color-base-light:                #ededed !default;
$color-base-black:                #000 !default;

$color-text:                      #333 !default;
$color-link:                      #007bff !default;
$color-icon:                      #6d6d6d !default;
$color-button:                    $color-primary !default;
$color-button-text:               $color-base-white !default;
$color-table:                     $color-base-white !default;
$color-table-border:              #e0e0e0 !default;
$color-table-text:                $color-base-black !default;
$color-table-selection:           rgba($color-primary, 0.22) !default;
$color-checkbox-active:           $color-primary !default;
$color-checkbox-inactive:         #757575 !default;
$color-checkbox-check:            $color-base-white !default;
$color-radio-active:              $color-primary !default;
$color-radio-inactive:            #757575 !default;
$color-text-field-label:          rgba($color-base-black, 0.54) !default;
$color-text-field-inactive:       #8a8a8a !default;
$color-text-field-active:         $color-primary !default;
$color-fill-field:                darken($color-base-white, 6%) !default;
$color-field-helper:              rgba($color-base-black, 0.54) !default;
$color-field-error:               #f44336 !default;
$color-form:                      $color-base-white !default;
$color-pagination:                $color-primary !default;
$color-pagination-text:           $color-base-white !default;
$color-fab:                       $color-primary !default;
$color-fab-text:                  $color-base-white !default;
$color-card:                      $color-base-white !default;
$color-card-title:                $color-base-black !default;
$color-card-text:                 rgba($color-base-black,.54) !default;
$color-expansion-panel:           $color-base-white !default;
$color-expansion-panel-text:      rgba($color-base-black,.54) !default;
$color-app-bar:                   $color-primary !default;
$color-app-bar-text:              $color-base-white !default;
$color-drawer:                    $color-base-white !default;
$color-drawer-text:               rgba($color-base-black, .87) !default;
$color-drawer-header:             $color-primary !default;
$color-drawer-header-text:        $color-base-white !default;
$color-drawer-border:             #e0e0e0 !default;
$color-facebook:                   #3b5998 !default;
$color-youtube:                   #e52d27 !default;
$color-twitter:                   #55acee !default;
$color-success:                   #28a745 !default;
$color-error:                     #f44336 !default;

$drawer-image:                    "../img/logo.svg" !default;
$drawer-background:               url($drawer-image) no-repeat center bottom 50px / auto calc(100% - 65px) !default;
$border-radius:                   .8rem !default;
$login-image:                     "https://picsum.photos/1920/1080/?blur&random" !default;
$margin-size:                     3rem !default;

App Bar

Source: materials/components/app-bar.md

Required

Default

Example

Prominent

Example

Dense

Example

Fixed

Example

Variables

@use "setup/variables" with (
    $app-bar: (
        "background": $color-primary,
        "color": $color-base-white,
        "padding": .8rem 1.2rem,
        "height": 6.2rem,
        "title": (
            "font-size": 2rem,
        ),
        "prominent": (
            "height": 12.8rem,
        ),
        "dense": (
            "height": 5.4rem,
            "padding": .2rem .4rem,
        ),
        "icon": (
            "font-size": 2.4rem,
        ),
    ),
);

Cards

Source: materials/components/cards.md

Add a grid column class like .col__sm--6 to the card to change size. Image is optional.

Example

Variables

@use "setup/variables" with (
    $card: (
        "background": $color-base-white,
        "color": rgba($color-base-black,.54),
        "font-size": 1.4rem,
        "padding": 1.6rem,
        "title": (
            "color": $color-base-black,
            "font-size": 2rem,
        ),
        "subtitle": (
            "color": rgba($color-base-black, .65),
            "font-size": 1.4rem,
        ),
        "button": (
            "color": rgba($color-base-black, .65),
            "font-size": 1.8rem,
        ),
    ),
);

Dialog

Source: materials/components/dialog.md

Powered by tingle.js. Click here for the full documentation.

Example

Drawer

Source: materials/components/drawer.md

Required

The header image can be changed with the SASS variable: $drawer-image. If you want a dark drawer add the class drawer--dark to the drawer__drawer element.

Example

Compact

Example

Temporary

Example

Persistent

The drawer will change to temporary on mobile

Example

Permanent

The drawer will change to temporary on mobile

Example

Variables

@use "setup/variables" with (
    $drawer: (
        "background": $color-base-white,
        "color": rgba($color-base-black, .87),
        "border": #e0e0e0,
        "width": 32rem,
        "image": "/src/assets/img/logo.svg",
        "header": (
            "background": $color-primary,
            "color": $color-base-white,
            "height": 13.5rem,
            "image": url("/src/assets/img/logo.svg") no-repeat center bottom 5rem / auto calc(100% - 6.5rem),
            "padding": 1.6rem,
        ),
        "compact": (
            "width": 24rem,
            "header": (
                "height": 6.2rem,
                "padding": .8rem 1.6rem,
            ),
        ),
        "dark": (
            "background": $color-secondary,
            "color": $color-base-white,
        ),
        "list": (
            "font-size": 1.4rem,
        ),
    ),
);

Expansion panel

Source: materials/components/expansion-panel.md
Example

Variables

@use "setup/variables" with (
    $expansion-panel: (
        "background": $color-base-white,
        "color": rgba($color-base-black,.54),
    )
);

Floating Action Button (FAB)

Source: materials/components/floating-action-button.md

Required

Default

Example

Centered

Example

FAB menu

Example

Variables

@use "setup/variables" with (
    $fab: (
        "background": $color-primary,
        "color": $color-base-white,
        "icon": "../img/dots-vertical.svg",
        "size": 5.6rem,
        "text": (
            "background": $color-base-white,
            "color": $color-text,
            "padding": .4rem .6rem .3rem,
        ),
        "icon": (
            "background": $color-primary,
            "color": $color-base-white,
            "size": 4rem,
        ),
    ),
);

List

Source: materials/components/list.md

Single-Line

Example

Striped

Example

Compact

Example

Two-Line

Example

Leading icon

Example

Trailing icon

Example

Variables

@use "setup/variables" with (
    $list: (
        "background": $color-base-white,
        "border": #e0e0e0,
        "color": rgba($color-base-black, .87),
        "font-size": 1.6rem,
        "height": 4.8rem,
        "padding": 1.5rem 1.6rem,
        "compact": (
            "font-size": 1.4rem,
            "height": 3.6rem,
        ),
        "secondary": (
            "color": rgba($color-base-black, .54),
            "font-size": 1.4rem,
        ),
        "graphic": (
            "color": rgba($color-base-black, .38),
            "font-size": 2.4rem,
            "size": 2.4rem,
        ),
        "meta": (
            "color": rgba($color-base-black, .38),
            "font-size": 2.4rem,
        ),
        "divider": rgba($color-base-black, .12),
    )
);

Login

Source: materials/components/login.md
Example

Variables

$login-image:                     "https://picsum.photos/1920/1080/?blur&random" !default;

Menu

Source: materials/components/menu.md

Required

Example

Variables

@use "setup/variables" with (
    $menu: (
        "background": $color-base-white,
        "font-size": 1.6rem,
        "border-radius": .2rem,
        "color": $color-base-black,
    )
);

Snackbar

Source: materials/components/snackbar.md

Required

Vanilla JS

new Snackbar("Hey! Im a snackbar");
// Snackbar(message, options, callback)

or HTML

<span data-toggle=snackbar data-content="Hey! Im a snackbar">Click me</span>

or Vue.js

Vue.use(fastSnackbar);
this.$snackbar.create("Vuejs is awesome!", {}, function(){});
Example

Tables

Source: materials/components/tables.md

Simple

Example

Compact

Example

Striped

Example

Data table

Also usable with table--compact

Example

Helper classes

The following classes can be added to the <table>:
.table--layout-fixed for table-layout: fixed.
.table--fullwidth for 100% width.
.table--scroll-horizontal for horizontal scrolling if the table is too big.
.table--fit for making the content fit on one line. (If you have set widths to columns) .table--responsive for change the table to a vertical view on mobile.

Variables

@use "setup/variables" with (
    $table: (
        "background": $color-base-white,
        "border": #e0e0e0,
        "color": $color-base-black,
        "font-size": 1.3rem,
        "padding": .4rem 5.6rem .4rem 2.4rem,
        "height": 5.6rem,
        "head": (
            "font-size": 1.2rem,
            "color": rgba($color-base-black, .54),
        ),
        "foot": (
            "font-size": 1.2rem,
        ),
        "compact": (
            "height": 4.4rem,
            "padding": .4rem 0 .4rem 2.4rem,
        ),
        "data-table": (
            "selection": $color-primary,
            "action": $color-primary,
        ),
        "responsive": (
            "head-width": 35%,
            "body-width": 65%,
            "height": 3.9rem,
            "padding": .8rem 1.8rem,
        ),
    ),
);

Tabs

Source: materials/components/tabs.md
Example

Variables

@use "setup/variables" with (
    $tab: (
        "label": (
            "border": #e0e0e0,
            "border-active": $color-primary,
        ),
        "border": $color-primary,
        "chip": (
            "background": $color-primary,
            "color": $color-base-white,
            "font-size": 1.4rem,
        ),
    ),
);

Tooltip

Source: materials/components/tooltip.md

Powered by Tippy.js. Click here for the full documentation

By default, you can add a data-tippy-content attribute to create a tooltip.

Example

Buttons

Source: materials/elements/buttons.md
Example

Icon buttons

Example

Compact buttons

Example

Icon

Example

Variables

@use "setup/variables" with (
    $button: (
        "background": red,
        "border-radius": .1875em,
        "color": white,
        "font-size": 1.6rem,
        "padding": .75em 1.375em .6875em,
        "compact": (
            "font-size": 80%,
            "padding": .5em 1em .4375em,
        )
    )
);

Chips

Source: materials/elements/chips.md
Example

Leading icon

Example

Filter

Example

Variables

@use "setup/variables" with (
    $chip: (
        "background": #e0e0e0,
        "background-primary": $color-primary,
        "border-radius": 1.2em,
        "color": rgba($color-base-black, .87),
        "color-primary": $color-base-white,
        "font-size": 1.4rem,
        "padding": .5em .857em,
        "height": 2em,
        "icon-font-size": 1.6rem,
    )
);

Headings

Source: materials/elements/headings.md

Available headings

Example

Variables

@use "setup/variables" with (
    $headings: (
        "color": #212529,
        "h1": 4.2rem,
        "h2": 3.4rem,
        "h3": 2.8rem,
        "h4": 2.2rem,
        "h5": 1.8rem,
        "h6": 1.6rem,
    )
);

Icons

Source: materials/elements/icons.md

Powered by Iconify. Click here for more info.

Example

Variables

@use "setup/variables" with (
    $icon: (
        "color": #6d6d6d,
    )
);

Typography

Source: materials/elements/typography.md
Example

Checkbox

Source: materials/forms/checkbox.md
Example

Variables

@use "setup/variables" with (
    $checkbox: (
        "size": 1.6rem,
        "active": $color-primary,
        "inactive": #757575,
        "check": $color-base-white,
    )
);

Forms

Source: materials/forms/forms.md

Form classes

Fixed form sizes: form--s 400px, form--m 800px, form--l 1200px

To wrap it around a card: form--card

Inline: form--inline

To limit a form submit trigger, add: form--submit-limit and

Example

Variables

@use "setup/variables" with (
    $form: (
        "background": $color-base-white,
        "sizes": (
            "s": 40rem,
            "m": 80rem,
            "l": 120rem,
        ),
    )
);

Radio button

Source: materials/forms/radio.md
Example

Variables

@use "setup/variables" with (
    $radio: (
        "size": 1.6rem,
        "active": $color-primary,
        "inactive": #757575,
    )
);

Select field

Source: materials/forms/select-field.md
Example

Variables

Switch

Source: materials/forms/switch.md
Example

Variables

@use "setup/variables" with (
    $switch: (
        "size": 1.6rem,
        "active": $color-primary,
        "inactive": #fafafa,
    )
);

Text fields

Source: materials/forms/text-fields.md

Field styles

Example

Text field

Example

Number field

Example

Password field

Example

Textarea field

Example

Prefix & Suffix

Example

Helper text

Example

Field error

Example

Variables

@use "setup/variables" with (
    $input-field: (
        "font-size": 1.6rem,
        "label": rgba($color-base-black, .54),
        "inactive": #8a8a8a,
        "active": $color-primary,
        "fill": darken($color-base-white, 6%),
        "helper": rgba($color-base-black, 0.54),
        "error": #f44336,
        "disabled": (
            "background": #f9f9f9,
            "color": lighten($color-text, 30%),
        ),
    )
);

Upload field

Source: materials/forms/upload-field.md

Required

The upload-field__value element will be automatically updated.

Example

Container

Source: materials/layout/container.md

Give your content a fixed width with a container component.

Example

Grid

Source: materials/layout/grid.md

Can be used to override the default sizes of molecules.

Available breakpoints: mob, tab, desk

Grid columns

Creates a grid column of requested size.

Example

Grid shift

Shift columns and reorder them within their container using relative positioning.

Example

Variables

@use "setup/variables" with (
    // desktop grid
    $grid-desktop-columns: 12;
    $grid-desktop-sideMargin: 40px;
    $grid-desktop-gutter: 20px;
    $grid-desktop-breakpoint: $screen-xl;

    // tablet grid
    $grid-tablet-columns: 12;
    $grid-tablet-sideMargin: 40px;
    $grid-tablet-gutter: 20px;
    $grid-tablet-breakpoint: $screen-lg-max;

    // mobile grid
    $grid-mobile-columns: 4;
    $grid-mobile-sideMargin: 32px;
    $grid-mobile-gutter: 20px;
    $grid-mobile-breakpoint: $screen-sm-max;
);

Main

Source: materials/layout/main.md

To give your content the right spacing, use the main component.

Example

Dashboard

Source: materials/templates/dashboard.md
Example

Overview

Source: materials/templates/overview.md
Example

Single

Source: materials/templates/single.md
Example

Utilities

Source: materials/utilities/utilities.md

Text alignment

Example

Element alignment

Example

Background color

Example

Text color

Example

Margin

Example

Hidden

To hide an element, use the class hidden. Add a modifier --xs --sm --md --lg to activate it until a specific breakpoint.

Example

Visible

To make an element visible, use the class visible. Add a modifier --xs --sm --md --lg to activate it until a specific breakpoint.

Example

Variables

$margin-size:                     30px !default;

Project FAST

Getting Started
Getting Started
General
Variables
Components
App Bar Cards Dialog Drawer Expansion panel Floating Action Button (FAB) List Login Menu Pagination Snackbar Tables Tabs Tooltip
Elements
Buttons Chips Headings Icons Typography
Forms
Checkbox Forms Radio button Select field Switch Text fields Upload field
Layout
Container Grid Main
Templates
Dashboard Overview Single
Utilities
Utilities
No matches.
Generated by Stylemark