Getting Started
Source: materials/getting-started.mdQuick start
Add the following stylesheet <link> to your <head> before all other stylesheets.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/project-fast@1.0.7/dist/src/assets/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@1.0.7/dist/src/assets/js/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/project-fast@1.0.7/dist/src/assets/js/app.min.js"></script>How to install
NPM
npm install project-fastYarn
yarn add project-fastAdd the following code to webpack.mix.js:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');Change the code in resources/assets/sass/app.scss to:
// Variables
@import "variables";
// Project FAST
@import '~project-fast/src/assets/scss/includes.scss';Add the following code to resources/assets/js/app.js:
import Fast from 'project-fast';Laravel 5.7+
Starting from Laravel 5.7, the scripts and styles has been flattened in the resources folder.
The code should now look like this in 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/assets/scss/includes.scss';Add the following code to resources/js/app.js:
import Fast from 'project-fast';Utilities
Source: materials/general/utilities.mdText alignment
Element alignment
Background color
Text color
Margin
Hidden
To hide an element, use the class hidden. Add a modifier --xs --sm --md --lg to activate it until a specific breakpoint.
Visible
To make an element visible, use the class visible. Add a modifier --xs --sm --md --lg to activate it until a specific breakpoint.
Variables
$margin-size: 30px !default;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: 3px !default;
$login-image: "https://picsum.photos/1920/1080/?blur&random" !default;
$margin-size: 30px !default;Checkbox
Source: materials/atoms/checkbox.mdVariables
$color-checkbox-active: $color-primary !default;
$color-checkbox-inactive: #757575 !default;
$color-checkbox-check: $color-base-white !default;Chips
Source: materials/atoms/chips.mdHeadings
Source: materials/atoms/headings.mdIcons
Source: materials/atoms/icons.mdPagination
Source: materials/atoms/pagination.mdVariables
$color-pagination: $color-primary !default;
$color-pagination-text: $color-base-white !default;Select field
Source: materials/atoms/select-field.mdCustomizeable
Powered by Choices.js
Variables
$color-text-field-label: rgba($color-base-black, 0.54) !default;
$color-text-field-inactive: #8a8a8a !default;
$color-text-field-active: $color-primary !default;Snackbar
Source: materials/atoms/snackbar.mdRequired
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(){});Text fields
Source: materials/atoms/text-fields.mdField styles
Text field
Number field
Password field
Textarea field
Prefix & Suffix
Helper text
Field error
Variables
$color-text-field-label: rgba($color-base-black, 0.54) !default;
$color-text-field-inactive: #8a8a8a !default;
$color-text-field-active: $color-primary !default;Tooltip
Source: materials/atoms/tooltip.mdUpload field
Source: materials/atoms/upload-field.mdCards
Source: materials/molecules/cards.mdAdd a grid column class like .col__sm--6 to the card to change size. Image is optional.
Variables
$color-card: $color-base-white !default;
$color-card-title: $color-base-black !default;
$color-card-text: rgba($color-base-black,.54) !default;Container
Source: materials/molecules/container.mdDialog
Source: materials/molecules/dialog.mdExpansion panel
Source: materials/molecules/expansion-panel.mdVariables
$color-expansion-panel: $color-base-white !default;
$color-expansion-panel-text: rgba($color-base-black,.54) !default;Forms
Source: materials/molecules/forms.mdForm classes
Fixed form sizes:
form--s 400px,
form--m 800px,
form--l 1200px
To remove card:
form--no-card
Inline:
form--inline
To limit a form submit trigger, add: form--submit-limit
and
Grid
Source: materials/molecules/grid.mdCan be used to override the default sizes of molecules.
Available breakpoints: xs, sm, md, lg
Grid columns
Creates a grid column of requested size.
Grid push
Push or pull a grid column by manipulating its left margin.
Grid shift
Shift columns and reorder them within their container using relative positioning.
List
Source: materials/molecules/list.mdTables
Source: materials/molecules/tables.mdSimple
Compact
Striped
Data table
Also usable with table--compact
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)
Variables
$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;App Bar
Source: materials/organisms/app-bar.mdDrawer
Source: materials/organisms/drawer.mdRequired
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.
Compact
Temporary
Persistent
The drawer will change to temporary on mobile
Permanent
The drawer will change to temporary on mobile
Variables
$drawer-image: "../img/logo.svg" !default;
$drawer-background: url($drawer-image) no-repeat center bottom 50px / auto calc(100% - 65px) !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;