Create Our Own CSS Frameworks part-1

What Will I Learn?

• Use and Setting Glup
• Create Structure Dev and Production file
• Create Task in Glup
• Compile SASS to CSS file with Task in Glup

Requirements

• Install Nodejs
• NPM (Node Package Manager)
• Javascript Intermediate
• Html and CSS advance

Difficulty

• Intermediate

Tutorial Contents

Setting Gulp

We will use Gulp as task runner. Why should use task runner??, because, with the task runner, we can save time when the development process. Although we also can not use it.

Install package Gulp

We need to install Glup and some other package, at NPM we can chain the package in one install.

npm install gulp gulp-concat gulp-sass gulp-connect --save-dev

• gulp-concat: This package is useful for combining multiple files.
• gulp-sass: This package is useful for compiling SASS for CSS to make it more modular.
• gulp-connect: This package is useful for life reload, every save something does not need to reload the browser page. but this will only be done in the development process only.

Make Structure folder

I will separate assets for development and assets for production. for example folder :

• assets : For production .
• assets-dev : For Development Prosess.

CSS Reset

We will change the CSS back to default, there are many select reset CSS. I will use reset CSS eric-mayer version 2.0 .

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Implement Gulp

We have installed Glup and to implement it, We need to create a file named gulpfile.js. in this file, We define the Glup tasks.

Variable declaration

We need a variable declaration that contains the glup packages.

var gulp    = require('gulp'),         //declaration of variable glup
    concat  = require('gulp-concat'),     //declaration of variable gulp-concat
        sass    = require('gulp-sass'),      //declaration of variable glup-sass
    connect = require('gulp-connect');      // //declaration of variable glup-connect

How define task in Gulp??

We can define the task by using the method or function task(). There are two parameters and separated by a comma. The following is the explanation of these parameters :

• First parameter: The first parameter is the name of the task, Thhe type is a string.
• Second parameter: The second parameter is a function() which we will write the function of the task.

Example :

gulp.task('styles',function(){
    //here we will write down what function will be done task 'styles'
    })

gulp is the variable we define in var gulp = require('gulp'), when we want to use gulp, We can use that variable and with glup.

Compile SASS to CSS

We can use the gulp task to compile SASS into CSS. to complie SASS to CSS. we need the help of two functions of glup, ie .src() and .pipe(). here is an explanation :

• .src() : This function is useful to access files or folders that we want, we can put the file directory with 'namedirectory'.
• .pipe() : This function is useful to combine some functions in it, so later we can use the function in the .pipe().

Implement in code :

gulp.task('styles',function(){
        gulp.src('assets-dev/css/**/*')
            .pipe(sass({outputStyle:'compressed'}))
            .pipe(concat('main.css'))
            .pipe(glup.desc('asset/css'))
            .pipe(connect.reload());
    })

• sass(): We can compile the file in SASS, and in this method, we can set the output style with key outputStyle * and style 'compressed'*, This means the file will be in the form of minified.
• concat(): We can concat the compiled file in 'assets-dev/css/*/' with another file in concat , the type is 'string'.
• desc(): This method is used as the destination file where compiled results will be stored, we can add file directory in the form of 'string'.
• connect.reload(): This method is used to reload the file, method reload() is a method of 'gulp-connect' , We will use variables that have been declared in connect = require('gulp-connect');

Conclusion

We have learned how to setting gulp in our project. and we have also learned how to compile SASS files into CSS. And understand some of the functions of the Glup packages.

Thank you for following this tutorial, hopefully useful. thank you

---

Posted on Utopian.io - Rewarding Open Source Contributors

---