wi-framework-b3

Web Injaz framework

Bootstrap 3 version from wi-framework created by webinjaz.com team.

Contents

• Getting started
• • Installation
• • Setup
• Framework content
• • Variables
• • Backgrounds
• • Components
• • Shapes
• • Css Helpers
• • Sass Functions

Getting started

Web Injaz framework is built to ease the process of coloring and shaping the components of a website.

Installation

Using npm, run:

npm install wi-framework-b3

Setup

First, in your main sass file import the framework:

// Your variables ...
 
// Web Injaz / Bootstrap 3
@import "path/to/node_modules/wi-framework-b3/index";
 
// Your code ...

Framework content

Variables

The main variables that you can use to build your website.

Define these variables in Your variables ... before importing the framework to overwrite the default variables.

Colors

WI

• $brand-primary default: #2163b3

Bootstrap

• $brand-success default: #5cb85c
• $brand-info default: #5bc0de
• $brand-warning default: #f0ad4e
• $brand-danger default: #d9534f

Spacing

• $gutter default: 15px

  The global margin or padding between components.

• $radius default: .5rem

  The global border radius

Media breakpoint

$breakpoint default: 991px

The media breakpoint between mobile and desktop screens.

Backgrounds

Build background class to ease the coloring process, forther more in the Backgrounds section below.

• Structure

$user-bg-sets: (
  "bg-name": (
    "background-color": "#fff",
    "text-color": "#fff",
    "title-color": "#fff",
    "link-color": "#fff",
    "link-hover-color": "#fff",
    "component-background-color": "#000",
    "component-text-color": "#000",
    "component-title-color": "#000",
    "component-link-color": "#000",
    "component-link-hover-color": "#000"
  ),
  . . .
);

• Example:

$user-bgs: (
  "red": (
    "background-color": #c93958,
    "text-color": #f8f8f8,
    "title-color": #f8f8f8,
    "link-color": #f8f8f8,
    "link-hover-color": #f8f8f8,
    "component-background-color": #b8939c,
    "component-text-color": #443f41,
    "component-title-color": #b32146,
    "component-link-color": #79001f,
    "component-link-hover-color": #b32146
  ),
  "main": (
    "background-color": #0a366b,
    "text-color": #f8f8f8,
    "title-color": #3a7fd4,
    "link-color": #3a7fd4,
    "link-hover-color": #2e6fbe,
    "component-background-color": #2163b3,
    "component-text-color": #d1d7df,
    "component-title-color": #bfd1e7,
    "component-link-color": #bfd1e7,
    "component-link-hover-color": #88a9d1
  )
);

Backgrounds

The framework use background classes for coloring the sections and make the components or shapes in those sections interactive to the background in the parent class.

Structure

The background class generate as .wi-bg-<bg-name> where <bg-name> is the name that you gave to the sass map in the variables.

Defaults

The framework has 1 built-in backgrounds you can edit or manipulate them in the variables section in your code.

• .wi-bg-body

Mixins

To color a component or shape or any part of the website and make it interact with the background in the parent, you should use the Backgrounder() mixin and the colors variables for coloring.

.foo {
  @include Backgrounder {
    // Available variables
    $background-color
    $text-color
    $title-color
    $link-color
    $link-contrast-color
    $link-hover-color
    bw(.1) _Function return rgba color of $text-color_
    isNotTrans($background-color) _Function return $text-color if the background color is transparent, other wise it's return $background-color_
    $bg-trans-10 // rgba of the background color
    .
    .
    $bg-trans-90
 
    $bg-contrast-10 // darken or lighten of the background color
    .
    .
    $bg-contrast-90
 
    // content
  }
}
// or same but outside of the class
@include backgrounder($isRoot: true) {
  .foo {
    // Available variables
    $background-color
    $text-color
    $title-color
    $link-color
    $link-contrast-color
    $link-hover-color
    bw(.1) _Function return rgba color of $text-color_
    isNotTrans($background-color) _Function return $text-color if the background color is transparent, other wise it's return $background-color_
    $bg-trans-10 // rgba of the background color
    .
    .
    $bg-trans-90
 
    $bg-contrast-10 // darken or lighten of the background color
    .
    .
    $bg-contrast-90
 
    // content
  }
}

Example

.card {
  border: 1px solid;
  @include Backgrounder {
    color: $text-color;
    border-color: bw(0.4);
  }
}

Structure

<div class="wi-bg-<bg-name>">
  . . .
</div>

Components

Bootstrap 3

All Bootstrap 3 components is supported by the framework

Web Injaz

card

The Card is a component that used to create a card with image and body.

• class
• • .card
• sibling-class
• • .horizontal
• sub-class
• • .card-media
• • .card-body
• • .card-title
• • .card-text
• • .card-list-inline
• • .card-btn-container
• • • .card-btn

header

The Header is a component that used to create a header with two sections (settings and intro).

• class
• • .header
• sub-class
• • .header-settings
• • .header-intro

header-section

The Header Section is a component that used to create a small sub header for every page.

• class
• • .header-section
• sub-class
• • .header-section-image
• • .header-section-title

search-box

The Search box is a component that used to create a main search box for the whole website.

• class
• • .search-box
• sub-class
• • .search-box-header
• • • .search-box-title
• • .search-box-body

social-plugins

The Social Plugins is a component that used to create a group of buttons for the social media sharing.

• class
• • .social-plugins
• sub-class
• • .social-<facebook, etc>
• • • svg

clip-path

The Clip path is a component that used to create a dividers between the sections.

• class
• • .clip-path

tabs

The tabs is a component that used to contain the .nav-tabs and .tab-content.

• class
• • .tabs
• sub-class
• • .nav-tabs
• • .tab-content

Sub Components

title

The title is a component that used to create a shape for every title.

• class
• • .title

Shapes

The shapes is the second base that the framework count on, The shape is a class that added to component to change its style.

Structure

<!-- sh-<component-name>-<shape-name> -->
<div class="card sh-card-1">
  . . .
</div>

Mixins

@include shaper('<shape-name>', '<component-name>) {
    . . .
}

• Example This mixin will generate a class .sh-card-1 to style the card component.

@include shaper('1', 'card) {
    . . .
}

How to use

.sh-card-1 {
  @import "path/to/shapes/card/1";
}

Css Helpers

The framework has built-in css helpers along to the Bootstrap 3 helpers.

.content {
  padding-top: $gutter * 3;
  padding-bottom: $gutter * 3;
}
 
.content-lg {
  padding-top: $gutter * 4;
  padding-bottom: $gutter * 4;
}
 
.content-sm {
  padding-top: $gutter;
  padding-bottom: $gutter;
}
 
.img-block,
.btn-block {
  width: 100%;
}
 
.card-img-top {
  border-radius: $radius $radius 0 0;
}
 
.card-img-bottom {
  border-radius: 0 0 $radius $radius;
}
 
.card-img-side {
  border-radius: $radius 0 0 $radius;
}
 
.overflow-hidden {
  overflow-y: hidden;
}

Sass Functions

Colors

contrast-color

The contrast-color() function takes one required argument and two optional ones

• required The color that you want to return the inverse color of it. if you added a color that more to darkness the function will return a white color, and if the color is more to brightness it will return a black color.

  contrast-color(#000); => returned #fff

• optional The second argument is the value (color) that will be returned if the color (first arg) was more to darkness. The third argument is the value (color) that will be returned if the color (first arg) was more to brightness.

  contrast-color($color, $white: #fff, $black: #000);

cont

The cont() function is like the darken() and lighten() sass function, The function acts like the darken function if the the color (first arg) was more to brightness. and acts like lighten function otherwise.

cont($background-color, 10%);