Getting started

DOTS-UI framework is powered with gulp toolkit, before you start the project you must install node.js, gulp and npm modules, here below the steps.

1. Install Node.js

Node.js can be downloaded for Windows, Mac and Linux from Here. There are various options for installation like binaries, package managers and docker images – full instructions are available.

2. Install Gulp Globally

Install Gulp command-line interface globally so the gulp command can be run from any project folder:

npm install gulp-cli -g

3. Install Gulp Packages

Change your path into project folder in command console before you installing packages.

npm install

4. Run application

Your browser automatically open a window with a localhost port, just simply put gulp serve command in the console. This is the development environment, here gulp automatically run SASS compiling, HTML changes and Browser sync when a change happens in the code.

gulp serve

5. Build application

This is the final process of the project also known as building production files. So run this task after all of the task are completed in the development environment. Here gulp automatically build minified CSS, Images, Javascript and HTML with clean codes. All of the latest files in the production environment will be appear in the dist folder. Use dist folder for the final release.

Also don't work on the dist folder directly, If you want to do some changes in the files you should work on the app folder files run with gulp serve command and after take building production files with gulp build command. It will automatically replace existing dist folder with latest production files.

gulp build

Variables

DOTS-UI framework powered with sass preprocessor, so all of the CSS values can quickly modify by variables. For example If you want to change your primary color into another color just change $primary-color : #00cc9c !default; color value from the scss/helpers/_variables.scss file into some another color value.

Used variables

//fonts
$lato                   : 'Lato', sans-serif !default;

// ============== Define colors ============

//base colors   
$primary-color          : #00cc9c !default;
$secondary-color        : #3e3e3e !default; 
$border-color           : #eeeeee !default;
$danger-color           : #fd7061 !default;
$success-color          : #579c3e !default;

//text colors 
$default-font-color     : #3e3e3e !default;
$sub-font-color         : #505050 !default;
$title-font-color       : #3e3e3e !default;
$sub-title-font-color   : #3e3e3e !default;
$link-color             : #0275d8 !default;
  
//Fonts 
$font-family-base       : $lato !default; 
$title-font             : $lato !default;
$title-sub-font         : $lato !default;
$paragraph              : $lato !default;
$icon                   : 'mousIcon' !default;

//background color 
$bg-color               : #fff !default; 
$bg-dark                : #ececec !default; 


//button colors 
$primary-button         : $primary-color !default;
$secondary-button       : $secondary-color !default; 

//radius 
$radius                 : 4px !default;
$radius-large           : 5px !default;
$radius-small           : 3px !default;

//layout 
$grid-columns           : 12 !default;
$grid-gutter            : 30px !default;
$grid-md-gutter         : 20px !default;
$grid-sm-gutter         : 10px !default;
$grid-xs-gutter         : 6px !default;
$header-height          : 66px !default;
 
//Typebase 
$baseFontSize           : 14px !default;
$baseLineHeight         : 1.428571428571429 !default;

//modal properties 
$overlay-color          : #ffffff !default;
$overlay-opacity        : .95 !default;

//stacking 
$stack-xs               : 1;
$stack-sm               : 9;
$stack-md               : 10;
$stack-lg               : 99;
$stack-xl               : 999;

//Container sizes 

//Tablet screen 
$layout-sm              : (720px + $grid-gutter) !default;

//Medium screen  
$layout-md              : (940px + $grid-gutter) !default;

//Large screen 
$layout-lg              : (1170px + $grid-gutter) !default;

Mixin

DOTS-UI framework inbuilt with a bunch of Compass Mixin, Sass mixin allows you to create reusable lumps of CSS. Being able to do this will help you to avoid writing repetitive code. Want to know more mixin lists? compass providing a full list of their mixin here.

We also made some outstanding and re-usable custom mixin that will help us to saving lots of time. Those are listed below.

We can use Sass mixin as a CSS declaration starting with @include followed by the name of the mixin.

Clear Float

.class-name{
    @include clearfloat(); //same as clear fixing 
}

Size

.class-name{
    @include size($width, $height); //adding width and height of the element 
}

Equal Size

.class-name{
    @include equal-size($equalSize); //adding equal width and height of the element 
}

Placeholder color

.class-name{
    @include placeholder($color, $opacity); //adding placeholder color for the input field 
}

Caret icon

.class-name{
    @include caret($point, $border-width, $color); //adding caret icon, $point should be left | right | top | bottom 
}

Lock text selection

.class-name{
    @include no-select(); //avoiding text selection 
}

Scrollbar

.class-name{
    @include scrollbar($scroll-width, $scroll-radius, $track-color, $thumb-color); 
    //adding custom scrollbar style, sample code @include scrollbar(6px, 3px, rgba(#fff,0.1), rgba(#fff,.2));
}

Text truncation

.class-name{
    @include ellipsis(); //truncate text length 
}

Custom icon

.class-name{
    @include customIcon(); //adding custom icon properties 
}

Visibility

.class-name{
    @include visibility(hidden|visible); //adding element visibility 
}

Grid system

Grid systems are used for creating grid layouts.

Code example

<div class="layout-wrapper"> 

    <div class="layout-xs-12 layout-sm-6 layout-md-4 layout-lg-3">Grid column</div> 

</div>

• Column must placed in wrapper block .layout-wrapper for getting proper grid layout.
• Column .layout-xs-1 to .layout-xs-12, .layout-sm-1 to .layout-sm-12, .layout-md-1 to .layout-md-12 and .layout-lg-1 to .layout-lg-12 are allowed in the layout wrapper.
• Default grid gutter size is 30px, also available 20px, 10px and 6px. Use <div class="layout-wrapper medium-grid">, <div class="layout-wrapper small-grid"> and <div class="layout-wrapper x-small-grid"> respectively.

<p>Lorem ipsum dolor sit amet</p>

<h1>h1 title</h1> 
                    
<h1 class="uppercase">h1 title</h1>
                    
<h1 class="lowercase">h1 title</h1>
                    
<h1 class="capitalize">h1 title</h1>
                    
<h1 class="align-text-left">h1 title</h1>
                    
<h1 class="align-text-center">h1 title</h1>
                    
<h1 class="align-text-right">h1 title</h1>
                    
<h1 class="align-text-justify">h1 title</h1>

Buttons

Code example

<button class="btn primary-btn">btn primary-btn</button>
            
<a href="#" class="btn primary-btn-outline lg">btn primary-btn-outline lg</a>
            
<input type="submit" class="btn secondary-btn sm">btn secondary-btn sm</input>
            
<span class="btn primary-btn rounded-btn">btn primary-btn rounded-btn</span>
            
<span class="btn primary-btn xs-rounded-btn">btn primary-btn xs-rounded-btn</span>
            
<span class="btn primary-btn shadow-btn">btn primary-btn shadow-btn</span>
            
<span class="btn primary-btn" disabled="disabled">btn primary-btn disabled</span>

Tooltips

Code example

<span class="btn primary-btn tooltip tooltip-left">
    Tooltip left
    <i class="tooltip-content">I'm in Left</i>
</span>

Tabs

Code example

<div class="tab"> 
    <div class="tab-menu">
        <a href="#tab1" class="active"> Tab 1 </a>
        <a href="#tab2" class="active"> Tab 2 </a>
    </div>
    <div class="tab-container" id="tab1"> Tab 1 content </div>
    <div class="tab-container" id="tab2"> Tab 2 content </div>
</div>

Popup

Add class names on clickable element <button class="btn primary-btn popup-btn"> and popup block <div class="popup-box-wrap demo-popup"> and use some custom JavaScript. Check below sample codes.

HTML Code

<button class="btn primary-btn popup-btn"> Click me </button> 

<div class="popup-box-wrapdemo-popup"> 
    <div class="popup-box">
        <button class="btn icon-close-bold outside-close close-fn"> </button>
        <div class="popup-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
    </div>
</div>

Using close-fn class can help to close the popup when click on them.

JS Code

$('.popup-btn').click(function(){ 
             
    $('body').addClass('overflow-hidden'); //avoid page scroll
             
    $('.demo-popup').fadeIn(); //target block show up
             
});