funky_ui v0.0.11

FunkyUI

An SCSS Framework based on Bourbon

installation

Add package to your package.json with: yarn add funky_ui

Use

Put into css:

@import "~funky_ui/all";

Put into js:

import { CloseNotification, InputUpload, Tabs, MobileMenu, Copy2Clipboard } from 'funky_ui'
window.onload = function() {
  CloseNotification()
  InputUpload()
  Tabs()
  MobileMenu('#main', '#slidemenu')
  Copy2Clipboard()
}

Override variable values

You can override variables values before import funky_ui

es.

// Override base colors using default palette
@import "~funky_ui/core/css/base/colors";

$base-bg: $darken-grey;
$base-color: $light-grey;

// Custom color
$base-color: purple;

@import "~funky_ui/all";

below a complete list of variables used by framework:

Color Palette:

// Palette
$black:        #263238 !default;
$dark:         #2E3C43 !default;
$darken-grey:  #314549 !default;
$dark-grey:    #546E7A !default;
$grey:         #d3e2e8 !default;
$light-grey:   #dee9ee !default;
$lighten-grey: #f4f8f9 !default;
$white:        #FFFFFF !default;
$red:          #E74C3C !default;
$orange:       #E67E22 !default;
$yellow:       #FFCB6B !default;
$green:        #C3E88D !default;
$turquoise:    #89DDFF !default;
$blue:         #3498DB !default;
$purple:       #9B59B6 !default;
$brown:        #be643c !default;

// Palette inverse
$black-inverse:        $white !default;
$dark-inverse:         $lighten-grey !default;
$darken-grey-inverse:  $light-grey !default;
$dark-grey-inverse:    $grey !default;
$grey-inverse:         $black !default;
$light-grey-inverse:   $dark-grey !default;
$lighten-grey-inverse: $darken-grey !default;
$white-inverse:        $black !default;
$red-inverse:          $white !default;
$orange-inverse:       $white !default;
$yellow-inverse:       darken($yellow, 50 )!default;
$green-inverse:        darken($green, 45 )!default;
$turquoise-inverse:    darken($turquoise, 50 )!default;
$blue-inverse:         $white !default;
$purple-inverse:       $white !default;
$brown-inverse:        $white !default;

// Custom Colors
$danger:      $red !default;
$info:        $blue !default;
$warning:     $yellow !default;
$success:     $green !default;

Breakpoints:

$breakpoints-gap: 32px !default;
$tablet:          769px !default;
$desktop:         960px + (2 * $breakpoints-gap) !default;
$widescreen:      1152px + (2 * $breakpoints-gap) !default;
$fullhd:          1344px + (2 * $breakpoints-gap) !default;

Base variables:

// Typography ---------------------------------------------

// Text & Font
$base-font-family:  $sans-serif !default;
$base-font-size:    16px !default;
$base-color:        $black !default;
$base-font-weight:  600 !default;

$small-font-size:   12px !default;
$medium-font-size:  19px !default;
$large-font-size:   23px !default;


$font-dimensions: (
  "small":  ($small-font-size),
  "medium": ($medium-font-size),
  "large":  ($large-font-size)
) !default;


$base-line-height:  1.5;


// Background Colors
$base-bg:      $white !default;
$secondary-bg: tint($white, 75%) !default;

$base-action-color:      $darken-grey;

// Link
$base-link-color:          $base-color !default;
$base-link-font-weight:    bolder !default;
$base-link-decoration:     none !default;
// Link Hover
$base-link-hover-color:         shade($base-link-color, 25%) !default;
$base-link-hover-font-weight:   bolder !default;
$base-link-hover-decoration:    none !default;
$base-link-hover-bg:            shade($base-bg, 25%) !default;
// Link Active
$base-link-active-color:         $base-link-color !default;
$base-link-active-font-weight:   bolder !default;
$base-link-active-decoration:    none !default;
$base-link-active-bg:            shade($base-link-color, 20%) !default;

// Sizes --------------------------------------------------
$base-border-radius: 3px !default;
$base-spacing:       1em !default;
$small-spacing:      $base-spacing / 2 !default;
$base-z-index:       0 !default;

// Border
$base-border-color: $grey !default;
$base-border:       1px solid shade($base-border-color, 10%) !default;

// Focus
$base-focus-outline-color:  transparentize($base-action-color, 0.4) !default;
$base-focus-outline-width:  0px !default;
$base-focus-outline:        $base-focus-outline-width solid $base-focus-outline-color !default;
$base-focus-outline-offset: 2px !default;

// Animations
$base-duration: 150ms !default;
$base-timing:   ease !default;

Layout:

$layout-body-margin:                0  !default;
$layout-container-width:           960px !default;
$layout-mobile-container-width:    100% !default;
$layout-mobile-container-padding:  0 20px !default;

Typography:

$typography-font-family:            $base-font-family !default;
$typography-line-height:            $base-line-height !default;
$typography-color:                  $base-color !default;
$typography-headings-font-family:   $base-font-family !default;
$typography-headings-font-weight:   600 !default;
$typography-headings-line-height:   1.2 !default;
$typography-headings-transform:     capitalize !default;
$typography-link-color:             $base-link-color !default;
$typography-link-hover-color:       shade($base-action-color, 25%) !default;
$typography-link-font-weight:       bolder !default;
$typography-link-decoration:        none !default;

Lists:

$lists-margin:          0 !default;
$lists-padding:         0 !default;
$list-style-type:       none !default;
$lists-dt-font-weight:  600 !default;

Buttons:

$button-font-family:     $base-font-family !default;
$button-font-size:       $base-font-size !default;
$button-font-weight:     600 !default;
$button-line-heigth:     1 !default;
$button-cursor:          pointer !default;
$button-border:          0 !default;
$button-border-radius:   $base-border-radius !default;
$button-text-transform:  none !default;
$button-text-align:      center !default;
$button-padding:         $small-spacing $base-spacing !default;
$button-bg:              $base-action-color !default;
$button-hover-bg:        shade($button-bg, 20%) !default;
$button-color:           contrast-switch($button-bg) !default;
$button-hover-color:     $button-color !default;

Forms:

$forms-font-family:         $base-font-family !default;
$forms-font-weigth:         600 !default;
$forms-font-size:           $base-font-size !default;
$forms-border-radius:       $base-border-radius !default;
$forms-border-color:        $base-border-color !default;
$forms-border-size:         1px !default;
$forms-border-style:        solid !default;
$forms-box-shadow:          inset 0 0 1px $light-grey, 0 2px 4px darken($white, 10%) !default;
$forms-disabled-bg:         shade($base-bg, 5%) !default;

$forms-inputs-bg:           $white !default;
$forms-textarea-min-height: 120px !default;
$forms-textarea-max-height: 600px !default;

Notifications:

$notifications-border-radius: $base-border-radius !default;
$notifications-margin:        0 0 $small-spacing !default;
$notifications-padding:       1.25rem 2.5rem 1.25rem 1.5rem !default;
$notifications-bg:            $grey !default;
$notifications-color:         black !default;

Tables:

$tables-width:                  100% !default;
$tables-layout:                 fixed !default;
$tables-border-collapse:        collapse !default;
$tables-border-spacing:         0 !default;
$tables-margin:                 0 0 $small-spacing !default;
$tables-cells-padding:          0.5em 0.75em !default;
$tables-bg:                     white !default;
$tables-cells-border:           0 0 1px 0 solid $base-border-color !default;
$tables-th-text-align:          left !default;
$tables-th-font-family:         $base-font-family !default;
$tables-th-font-weight:         $base-font-weight !default;
$tables-th-font-variant:        small-caps !default;
$tables-th-text-transform:      uppercase !default;
$tables-actions-text-align:     right !default;
$tables-striped-bg:             #fafafa !default;
$tables-mobile-th-color:        grey !default;
$tables-mobile-th-font-size:    10pt !default;
$tables-mobile-border:          1px solid $base-border-color !default;
$tables-mobile-bottom-margin:   $small-spacing !default;

Components variables

Flex Boxes:

$boxes-bg:                   $white !default;
$boxes-color:                $dark-grey !default;
$boxes-box-border-color:     $light-grey !default;
$boxes-box-border:           1px solid $boxes-box-border-color !default;
$boxes-box-background:       $white !default;
$boxes-box-gutter:           0.4em !default;
$boxes-box-width:            18em !default;
$boxes-box-color:            transparentize($boxes-color, 0.3) !default;
$boxes-box-top-colors:       $red, $turquoise, $purple, $yellow, $grey, $orange !default;

Breadcrumb:

$breadcrumb-item-color:           $base-link-color !default;
$breadcrumb-item-hover-color:     $base-link-hover-color !default;
$breadcrumb-item-active-color:    $base-color !default;
$breadcrumb-item-separator-color: $base-color !default;

Dropdown:

$dropdown-content-bg:               $base-bg !default;
$dropdown-content-arrow:            $base-color !default;
$dropdown-content-offset:           0.5rem !default;
$dropdown-content-radius:           $base-border-radius !default;
$dropdown-content-shadow:           0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$dropdown-navbar-content-shadow:    0 2px 3px rgba($black, 0.1), 0 0 0 0 rgba($black, 0.1) !default;
$dropdown-content-z:                20 !default;
$dropdown-item-color:               $dark-grey !default;
$dropdown-item-hover-color:         $black !default;
$dropdown-item-hover-bg:            darken($grey, 20) !default;
$dropdown-item-active-color:        darken($grey, 20) !default;
$dropdown-item-active-bg:           $base-link-color !default;
$dropdown-divider-bg:               $button-hover-bg !default;

Footer:

$footer-font-family:  $base-font-family !default;
$footer-font-size:    $base-font-size !default;
$footer-text-align:   center !default;
$footer-padding:      10px 0 5px !default;
$footer-bg:           $white !default;
$footer-color:        $black !default;
$footer-border-top:   1px solid #ddd !default;

Navbar:

$navbar-bg:             white !default;
$navbar-height:         52px !default;
$navbar-margin-bottom:  1rem !default;
$navbar-border-bottom:  1px solid #ddd !default;
$navbar-items-color:    #4a4a4a !default;
$navbar-items-padding:  1rem !default;

Pagination:

$pagination-hide-until:           $tablet !default;
$pagination-border-color:         #dbdbdb !default;
$pagination-border-radius:        $base-border-radius !default;
$pagination-links-color:          #fff !default;
$pagination-links-hover-color:    #363636 !default;
$pagination-links-bg:             $dark !default;

Tooltip:

$tooltip-bg:          $dark-grey !default;
$tooltip-max-width:   24rem !default;

Layouts

$base-body-margin:                0  !default;
$base-container-width:           960px !default;
$base-mobile-container-width:    100% !default;
$base-mobile-container-padding:  0 20px !default;