Web Injaz sass framework with Bootstrap 3
shell
npm install wi-framework-b3
`
$3
First, in your main sass file import the framework:
`css
// Your variables ...
// Web Injaz / Bootstrap 3
@import "path/to/node_modules/wi-framework-b3/index";
// Your code ...
`
Framework content
$3
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
`css
$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:
`css
$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
)
);
`
$3
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- where 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.
`css
.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
`css
.card {
border: 1px solid;
@include Backgrounder {
color: $text-color;
border-color: bw(0.4);
}
}
`
##### Structure
`html
. . .
`
$3
#### 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-
- - - 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
$3
#### title
The title is a component that used to create a shape for every title.
- class
- - .title
$3
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
`html
. . .
`
#### Mixins
`css
@include shaper('', ') {
. . .
}
`
- Example
This mixin will generate a class .sh-card-1 to style the card component.
`css
@include shaper('1', 'card) {
. . .
}
`
#### How to use
`css
.sh-card-1 {
@import "path/to/shapes/card/1";
}
`
$3
The framework has built-in css helpers along to the Bootstrap 3 helpers.
`css
.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;
}
`
$3
#### 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%);`