fluent-css

Navigate in the package folder

cd node_modules/fluent-css

Install dependencies

npm install

Create css files

npm run build

Customize output folder

npm run build -- --output='../css'

Start sass watch (not active by default)

npm run build -- --watch

Or just start watching (with all paramters e.g. --gzip)

npm run watch

Deactivate sourcemaps default is true

npm run build -- --sourcemaps=false

Deactivate compression

npm run build -- --compress=false

Build with gzip

npm run build -- --gzip

Or start gzipping (with all paramters e.g. --package)

npm run gzip -- --clean=false

Change output filename

npm run build -- --filename=main.css

npm run build -- --filename=main.scss

npm run build -- --filename=main

adding .css will only create css files. Adding .scss will only create scss files, filename without ending will create both, scss and css files.

Too much? Limit to the packages you need

npm run build -- --packages='display, position'

Deactivate clean

npm run build -- --clean=false

Or just clean up

npm run clean

Combine them!

npm run build -- --gzip --compress=false --souremap=false --ouput=../ filename=main.css

Usage of fluent-css

to import fluent-css, simply copy this line in your scss stylesheet (or the name you specified)

@import 'fluent-css'; // absolute path from your stylesheet e.g. -> ./sass/fluent-styles/fluent-styles, ('node_modules/fluent-css/dist/fluent-css' if default)

padding and margin

<div class="padding-px pb-14 pl-14">
	...
</div>

<div class="margin-percent mb-14 ml-14-important">
	...
</div>

Style behind

.padding-px { 
   &.pb-1 {
      padding-bottom: 1px;
   }

   &.pb-1-important {
      padding-bottom: 1px !important;
   }

   // also with minus for margin (invalid for padding!)
   &.mb-neg-1 {
      margin-bottom: -1px;
   }
}

<div class="display-inline-block">
	<!-- easy! right? -->
</div>

Packages (Work in Progress)

• margin-padding.scss
• border.scss
• position.scss
• display.scss
• z-index.scss
• font.scss

Available Classes

margin-padding.scss

// units: rem, em, px, percent

.margin-px.m-1 // margin: 1px

.margin-px.mb-1 // margin-bottom: 1px; mb, mt, ml, mr 
.margin-percent.mb-1  // up to 64 .mb-64
.padding-px.mb-1

// !important
.margin-px.mb-1-important

// negative (not valid for padding!)
.margin-px.mb-neg-1

border.scss

// dotted, dashed, solid, double, groove, ridge, inset, outset, thin, medium, thick, initial, inherit 

.border-1
.border-solid
.border-solid-1 // (1-5)
.border-solid-thin
.border-solid-thin-green // 140 colors
.border-left-1
.border-left-solid
.border-left-solid-1-green

position.scss

// static, absolute, fixed, relative, sticky, initial, inherit
.position-absolute
.position-absolut-important

// units: rem, em, px, percent
.position-px.top-1 // top: 1px

display.scss

/*
inline, block, contents, flex, grid, inline-block, inline-flex, inline-grid, inline-table, list-item, run-in, table, table-caption, table-column-group, table-header-group, table-footer-group, table-row-group, table-cell, table-column, table-row, none, initial, inherit
*/
.display-inline
.display-inline-important

z-index.scss

.z-index-0 // 0-64
.z-index-0-important

font.scss

// units: rem, em, px, percent

.font-size-px.font-size-1;
.font-size-percent.font-size-5; // 0, 5, 10... steps of 5 on percent
.font-weight-bold // 100-900, lighter, bold, bolder, normal
.font-color-green
.font-style-italic // normal, italic, oblique, initial, inherit

Work in progress

Example for margin

Example for padding