functional-css v1.1.0

Functional CSS

This module will let you seamlessly integrate functional css. This also comes with a dark and light theme.

Install

npm install functional-css

Usage

Webpack with JS ES6 / TypeScript

import 'functional-css'

Webpack with ES5

require('functional-css')

With CSS/SCSS

@import '~functional-css'

Import what's required

// core functional-css classes
import 'functional-css/dist/core.min.css'

// light and dark themes
import 'functional-css/dist/theme.min.css'

// light theme
import 'functional-css/dist/light-theme.min.css'

// dark theme
import 'functional-css/dist/dark-theme.min.css'

Without Bundle

 <link rel="stylesheet" media="all" href="./node_modules/functional-css/dist/index.min.css">

Create Your Own Color Theme

This module comes with the two color themes dark and light. Define the color name as a class on the body tag, then use colors as defined under Colors Classes

You can define colors themes on your own as below. Colors are defined in pairs. The second color is the contrast color to the first.

@import '~functional-css/src/mixins'
.name-of-the-theme {
  @include addColor(primary, #2C3336, #d7e3ea);
  @include addColor(primary-s1, #162029, #abb4bd);
  @include addColor(primary-s2, #3C4549, #d3dce0);
  @include addColor(primary-s3, #58656d, #d3dce0);
  @include addColor(secondary, #fafafa, #4b585f);
  @include addColor(secondary-s1, #ecf0f3, #4b585f);
  @include addColor(secondary-s2, #58656d, #ecf0f3);
  @include addColor(accent, #ffae27, #424242);
  @include addColor(white, #fff, #000);
  @include addColor(black, #000, #fff);
  @include addColor(error, #D02A2B, #fff);
  @include addColor(success, #29D185, #fff);
  @include addColor(warning, #ffae27, #424242);
  @include addColor(divider, #263138);
}

Table of Contents

• Colors Classes
• Available Colors
• Transparent Colors
• Border Radius
• Border Style
• Outline Style
• Border Width
• Outline
• Flexbox
• Font Weight
• Opacity
• Image
• Shadow
• Text
• Margin
• Margin Bottom
• Margin Left
• Margin Right
• Margin Top
• Margin Horizontal
• Margin Vertical
• Padding
• Padding Bottom
• Padding Left
• Padding Right
• Padding Top
• Padding Horizontal
• Padding Vertical
• Font Size
• Left
• Top
• Right
• Bottom
• Stroke Width
• Line Height
• Height
• Max Height
• Min Height
• Width
• Max Width
• Min Width
• Utils
• Overflow
• Vertical Align
• Transition

Styles

Colors Classes

Available Colors

}

Transparent Colors

Border Radius

Border Style

Outline Style

Border Width

Outline

Flexbox

Font Weight

Opacity

Image

Shadow

Text

Margin

Margin Bottom

Margin Left

Margin Right

Margin Top

Margin Horizontal

Margin Vertical

Padding

Padding Bottom

Padding Left

Padding Right

Padding Top

Padding Horizontal

Padding Vertical

Font Size

Left

Top

Bottom

Right

Stroke Width

Line Height

Height

Max Height

Min Height

Width

Max Width