wi-framework-b3
v1.2.3
Published
Web Injaz sass framework with Bootstrap 3
Downloads
49
Readme
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%);