phpocean: Code is Clay
  • Tutorials
    • Front end
    • Back end
    • Computer skills
    • Design & illustration
    • See all »
  • Forum
  • Blog
  • Contact
  • Log In|Join free

Gulp: recommended plugins and good habits to adopt

Previous article

Your First Code In Object Oriented Programming With PHP

Next article

How to create a responsive web design with Gulp, susy, and breakpoint?

By zooboole Sep 3rd, 2015 Demo   PDF </>

Hey! welcome to this special tutorial. Today I am going to make use of gulp, susy, and breakpoint to show you how you can create a simple responsive blog home page.

Click here to preview the demo and have a better feel of what we're going to do.

Before that let me tell you a bit about susy and breakpoint. As far as gulp is concerned, it shouldn't be new for you, and if that's the case head over here to have a look at what it's.

Susy

Susy is a grid system that provides you with a lot of flexibility on how to control your website layout with ease. Susy gives you everything that no other framework like bootstrap or foundation could give you. I will not get the perfect words to describe its power here, there is this post Zell Liew on css-tricks introducing susy and how you can easily build a layout with it.

For this tutorial purpose, let me just show you a bit of how could Susy be used to define a layout. Susy works with SASS, not LESS, and it's also configurable. Here is a simple and minimalist setting you could have:

@import "susy"

/* Changing Susy default global settings */

$susy: (

  /* Set number of columns to 12 columns */
  columns: 12,

  /* Set the main container' with to 1120px */
  container: 1024px

  );

Now let assume that we want a page layout like this current page on which you are reading this tutorial. The page has a header that covers the whole layout, the content side, at the left occupies 8 columns and the side bar occupies 4 columns. To write that with Susy, you could have this:

header{
  @include span(12);
}

.content{
  @include span(8);
}

.content{
  @include span(4);
}

So, simple right? No more hustle.

Breakpoint

No media queries, no responsive design. Breakpoint is a simple module that allows you to use media queries in a simpler and cleaner way. It's designed to help your write your media queries in SASS as fast as possible. Let's see an example of use case:

header{

  @include breakpoint( 320px ){
    background-color: $white;
  }

  @include breakpoint( 768px ){
    background-color: $red;
  }

  @include breakpoint( 1024px ){
    background-color: $black;
  }

}

This will simply change the background color of the header every time the viewport falls in any of these break points. It's as simple as that. Imagine this combined with Susy, we're going to make magic.

Read more about breakpoint-sass here

Project Mockup

Before we go further, let me show you what we really want to do here as an example:

 Screens

I think you understand the point. Though this concept can be just called an elastic layout, I think it's an appropriate use case to illustrate what we want. If you have to make it fully responsive you have to consider more elements, like change the menu, add/removing the design elements based on the viewport, etc.

Project Set Up

For this project we will be using gulp build system to automate some of our tasks. And we'll also use Bower to manage our packages such us Susy, Breakpoint. So, let's start.

Step 1: create a folder and name it responsive_blog or any name you prefer.

Step 2: cd to the folder and run npm init to set up your package.jason file. Say yes to all the steps.

Setp 3: install gulp locally by running, npm install --save-dev gulp.

Step 4: Also install locally the following gulp plugins - gulp-sass, gulp-minify, gulp-uglify, gulp-rename, gulp-del, browser-sync, etc. by running npm install --save-dev plugin-name-here, or you can just use these dependencies in your package.json file:

"devDependencies": {
    "browser-sync": "^2.9.0",
    "del": "^2.0.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-minify-css": "^1.2.1",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2"
  }

Step 5: Create one more folder in responsive_blog. Name it src. The src folder will contain our source files.

In order to do so you can run: mkdir src

Step 6: Create a bower.json file by running bower init, and say yes to all steps. Then run bower install susy breakpoint. This will install your bower packages, especially Susy, and Breakpoint-sass.

Step 7: Create your gulpfile.js in the same folder by running touch gulpfile.js

Your project folder should look like this:

  • responsive_blog/
    • node_modules/
    • src/
    • bower_components
    • bower.json
    • gulpfile.js
    • package.json

If this looks nice, let's continue.

Step 8: cd to the src folder; create your index file by running touch index.html.

Step 9: Create 2 more folders css, and scss inside src by running mkdir css scss.

Step 10: Inside scss, create a new file and name it styles.scss. From now on your folder should look like this:

  • responsive_blog/
    • node_modules/
    • bower_components/
    • src/
      • css/
      • index.html
      • scss/
        • styles.scss
    • bower.json
    • gulpfile.js
    • package.json

Great job!

Coding

We've just set up our folders and files. Now let's add some code inside our index.html, gulpfile.js, and styles.scss files:

- index.html

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Web Design - Blog</title>
    <meta name="charset" content="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/styles.min.css">
</head>
<body>

    <div class="container">
        <header class="">
            <h2><a href="" title="">RWD</a></h2>
            <nav>
                <ul>
                    <li><a href="" title="">Home</a></li>
                    <li><a href="" title="">About</a></li>
                    <li><a href="" title="">Contact</a></li>
                </ul>
            </nav>
        </header><!-- /header -->
        <div class="page-content">
            <section class="latest-posts">
                <h1>Latest tutorials</h1>

                <article>
                  <!-- this is a blog post -->
                  <h2><a href="" title="">How to create a blog?</a></h2>
                  <p>This shows you how you can create your own blog. 
                  <a href="" rel=bookmark>Read more</a></p>
                  <footer>
                    By zooboole | 7k views
                  </footer>
                </article>

                <article>
                  <!-- this is a blog post -->
                  <h2><a href="" title="">How to create a blog?</a></h2>
                  <p>This shows you how you can create your own blog. 
                             <a href="" rel=bookmark>Read more</a></p>
                  <footer>
                    By zooboole | 7k views
                  </footer>
                </article>

                <article>
                  <!-- this is a blog post -->
                  <h2><a href="" title="">How to create a blog?</a></h2>
                  <p>This shows you how you can create your own blog. 
                           <a href="" rel=bookmark>Read more</a></p>
                  <footer>
                    By zooboole | 7k views
                  </footer>
                </article>

                <article>
                  <!-- this is a blog post -->
                  <h2><a href="" title="">How to create a blog?</a></h2>
                  <p>This shows you how you can create your own blog. 
                               <a href="" rel=bookmark>Read more</a></p>
                  <footer>
                    By zooboole | 7k views
                  </footer>
                </article>
            </section><!-- /section -->

            <aside class="popular-posts">
                <h1>Popular</h1>
                <article>
                  <!-- this is a blog post -->
                  <h2><a href="" title="">How to create a blog?</a></h2>
                  <p>This shows you how you can create your own blog. 
                            <a href="" rel=bookmark>Read more</a></p>
                  <footer>
                    By zooboole | 7k views
                  </footer>
                </article>

                <article>
                  <!-- this is a blog post -->
                  <h2><a href="" title="">How to create a blog?</a></h2>
                  <p>This shows you how you can create your own blog. 
                                <a href="" rel=bookmark>Read more</a></p>
                  <footer>
                    By zooboole | 7k views
                  </footer>
                </article>

                <article>
                  <!-- this is a blog post -->
                  <h2><a href="" title="">How to create a blog?</a></h2>
                  <p>This shows you how you can create your own blog. 
                                  <a href="" rel=bookmark>Read more</a></p>
                  <footer>
                    By zooboole | 7k views
                  </footer>
                </article>
            </aside><!-- /aside -->
        </div>

        <footer class="footer">
            2015 © Responsive Blog, by <a href="http://zooboole.me">zooboole</a>
        </footer><!-- /footer -->
    </div>

<script src="bower_components/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="bower_components/breakpoint/jquery.breakpoint.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>



- styles.scss

  @import "../bower_components/susy/sass/_susy.scss";
  @import "../bower_components/breakpoint-sass/stylesheets/breakpoint";

  @import "reset";
  @import "variables";

  //Susy Maps
  $susy: (
    columns: 12,
    gutters: 1/2,
    math: fluid,
    gutter-position: outside,
  );

  html,body{

    font-family: $font-family-default;
    font-size:$font-size-default;
    line-height:$line-height;
    color:$color-text;
    background-color: $color-background;

    margin:0;
    padding:0;

    overflow-x:hidden;
  }

  a{
    text-decoration: none;
  }

  .container{

    @include container($container);

    background-color:$white;
  }


  .page-content{
    padding:3%;
    margin:0;
  }

  // ***********************************
  // SMALL DEVICES
  // ***********************************
  @include breakpoint($breakpoint-small)
  {

    h1{
        color: $color-secondary;
        font-size: $font-size-title;
    }

    h2{
        font-size: 1.2em;
        margin:0;
        padding:0;
    }

    // Site header
    header{
        @include span(12);
        background-color:$color-secondary;
        padding:0 1%;
        color: $white;
        // padding:1em;
        h2{
            @include span(12);
            font-size: 1.5em;
            padding:0 0.4em;
        }
        nav{
            @include span(12);
        }
        ul{
            list-style-type: none;
            padding:0;
            margin:0;
            padding-left:0.1em;
            li{
                display: inline-block;
                a{
                    font-size: 1em;
                    display: block;
                    padding: 0.5em;
                }
            }

        }

        a{
            color: $white;
            &:hover{
                color: $black;
            }
        }
    }

    // featured/ latest posts section
    .latest-posts{
        @include span(12);


        article{
            border:1px solid $color-background;
            padding:0.5em;
            margin-bottom: 1em;
            p{
                font-size: 0.9em;
            }

            a{
                color: darken($color-background, 25%);
            }
            footer{
                font-size: 0.9em;
                color:#333;
            }
        }
    }

    // Popular posts  section
    .popular-posts{
        @include span(12);

        article{
            background-color:lighten($color-background, 5%);
            border:1px solid $color-background;
            padding:0.5em;
            margin-bottom: 1em;
            a{
                color: darken($color-background, 20%);;
            }
        }

    }

    // Footer section
    .footer{
        @include span(12);
        background-color:$color-secondary;
        font-size: 1em;
        padding:0.5em 1%;
        color: $white;

        a{
            color:lighten( $color-primary, 22%);
            &:hover{
                color: $black;
            }
        }
    }
  }


  // ***********************************
  // MEDIUM DEVICES
  // ***********************************
  @include breakpoint($breakpoint-medium)
  {

    // Here we just change what need to be modified
    // because the previous style applies itself automatically

    // Site header
    header{
        @include span(12);
        background-color:$color-primary;

        h2{
            @include span(3);
            font-size: 3em;
        }
        nav{
            @include span(8);
        }
        ul{
        text-align: right;
            margin-top:0.4em;
            li{
                a{
                    font-size: 1.7em;
                }
            }

        }

    }

    // featured/ latest posts section
    .latest-posts{
        @include span(6);
        article{
            h2{
                font-size: 1.8em;
            }
            border:1px solid $color-background;
            padding:0.5em;
            margin-bottom: 2em;
            clear: both;
            p{
                font-size: $font-size-default+50;
            }

            a{
                color: darken($color-background, 25%);
            }
            footer{
                font-size: 1.3em;
            }
        }
    }

    // Popular posts  section
    .popular-posts{
        @include span(6);
        padding-left:1em;
        article{
            h2{
                font-size: 1.8em;
            }
            background-color:lighten($color-background, 2%);
            border:1px solid transparent;
            padding:0.5em;
            margin-bottom: 1em;
            p{
                font-size: $font-size-default+50;
            }
            a{
                color: darken($color-background, 20%);;
            }
            footer{
                font-size: 1.3em;
            }
        }
    }
    // Footer section
    .footer{
        @include span(12);
        background-color:$color-primary;
        font-size: 1.5em;
    }
  }

  // ***********************************
  // LARGE DEVICES
  // ***********************************
  @include breakpoint($breakpoint-large)
  {

    // Here we just change what need to be modified
    // because the previous style applies itself automatically

    // Site header
    header{
        @include span(12);
        background-color:lighten($color-primary, 15%);
        padding:0%;
    }

    // featured/ latest posts section
    .latest-posts{
        // by living it empty, it means the previous viewport style will be applied
    }

    // Popular posts  section
    .popular-posts{
        @include span(6);
        padding-left:1em;
        article{
            h2{
                font-size: 1.8em;
            }
            background-color:lighten($color-background, 2%);
            border:1px solid transparent;
            padding:0.5em;
            margin-bottom: 1em;
            p{
                font-size: $font-size-default+50;
            }
            a{
                color: darken($color-background, 20%);;
            }
            footer{
                font-size: 1.3em;
            }
        }
    }

    // Footer section
    .footer{
        padding:0em;
        background-color:lighten($color-primary, 15%);
    }
  }



### - gulpfile.js

// ////////////////////////////////////////////////
//
// Included taskes
//
// // /////////////////////////////////////////////


var gulp            = require('gulp'),
    minifycss       = require('gulp-minify-css'),
    sass            = require('gulp-sass'),
    browserSync     = require('browser-sync'),
    reload          = browserSync.reload,
    autoprefixer    = require('gulp-autoprefixer'),
    plumber         = require('gulp-plumber'),
    del             = require('del'),
    rename          = require('gulp-rename'),
    sourcemaps      = require('gulp-sourcemaps');



// ////////////////////////////////////////////////
//
// Configuration variables
// Set paths
//
// // /////////////////////////////////////////////

var config = {
                scss    :[ 'src/scss/**/*.scss' ],
                css     :[ 'src/css/' ],
                html    :[ 'src/**/*.html' ],
                build   :[ 'build/' ],
                src     :[ 'src/' ]
            };



// ////////////////////////////////////////////////
//
// Styles / Sass Tasks
//
// // /////////////////////////////////////////////

gulp.task('styles',function(){

 return gulp.src(config.scss)
            .pipe(sourcemaps.init())
            .pipe(sass()
            .on('error', sass.logError))
            .pipe(autoprefixer('last 3 versions'))
            .pipe(minifycss())
            .pipe(rename({suffix: '.min'}))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(''+config.css+''))
            .pipe(reload({stream:true}));

});



// ////////////////////////////////////////////////
//
// HTML Tasks
//
// // /////////////////////////////////////////////

gulp.task('html', function(){
    return gulp.src(config.html)
               .pipe(reload({stream:true}));
});





// ////////////////////////////////////////////////
//
// Browser-Sync Tasks
//
// // /////////////////////////////////////////////

gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir: config.src
        }
    });
});



// ////////////////////////////////////////////////
//
// Build Tasks
// Create build, clean un-neccesary files and folders
//
// // /////////////////////////////////////////////

// create build
gulp.task('build:create', function(){
    return gulp.src(config.src+'**/*')
               .pipe(gulp.dest(''+config.build+''));
});

// Clean build folder
gulp.task('build:clean',['build:create'], function(){
    return del(['build/bower_components/',
                'build/scss/',
                'build/css/!(*.min.css)',
                'build/js/!(*.min.js)'
              ]);
});


// preview build app Tasks
gulp.task('build:start', function() {
    browserSync({
        server: {
            baseDir: config.build
        }
    });
});

// remove build folder
gulp.task('build:delete', function(res){
    return del([config.build+'/**'], res);
});

 // build task
 gulp.task('build', ['build:create', 'build:clean']);




// ////////////////////////////////////////////////
//
// Watch Tasks
// Watch any changes of the css, scripts, and html
//
// // /////////////////////////////////////////////

gulp.task ('watch', function(){

  gulp.watch(config.scss, ['styles']);

  gulp.watch(config.html, ['html']);

});



// ////////////////////////////////////////////////
// Gulp Default task
// ///////////////////////////////////////////////

gulp.task('default', ['watch', 'browserSync','styles','html']);

Read me

Good. We've developed different parts of the project. It's left with how to run it. As you may have noticed from the gulpfile.js, we just have to put our tasks into work.

There are two cases to consider:

  • Development

That's while were are still coding and changing things in the code. In our case now just run:

gulp

If you are using my files, run following:

npm install

bower install

gulp

This will download all plugins for your gulp file, and all packages required, then it will run your gulp tasks which will start watching any changes you make and automatically reload the page for you.

If you want to see how I got the paths to susy and breakpoint, run bower list --path.

But there is something I notices with breakpoint. You have to use breakpoint-sass instead of breakpoint. When you are importing it in your styles be careful.

  • Production

When you are done coding and you want to have a final product. We have tasks for that in our gulpfile -build tasks.

To use it, run the following commands:

  • Create the build application:

    gulp build

  • launch the final application:

    gulp build:start

  • If you want to delete the build folder:

    gulp build:delete

Conclusion

This is just an example of how I would have proceeded if had to build such website. It's one workflow and technic amongst many. I am expecting you to learn four main things in this tutorial: the workflow with gulp build system, how to build a responsive website, how susy and breakpoint allow us to have a semantic HTML, and how to go mobile first when designing a responsive website.

I admit I have omitted a lot in these codes, know that it,s for clarity purpose and sometimes I myself didn't figure out how to handle it, because I am still learning how to use susy and breakpoint very well. If you have any idea of how to improve something, I am a happy taker.

Above all this you should also be aware of the existence of Susy and Breakpoint for your next project. They are great tools that can make your life easier.

For any question or any plus, you can just comment under this tutorial. If you like it, please do allow your friends to know about it by sharing. I will appreciate.

Sharing is caring, help us by sharing

Twitter Facebook Pinterest Linkedin
zooboole

zooboole
Hey! I am Ahmed Salifou Amidou aka Zooboole. Full-Stack & Full-time Web Developer. I am always learning and sharing at the same time what I discover. I am currently writing a book check it out at: www.webdevelopmentstarterkit.com

Related tutorials

  • The science of creating fixed components on scroll with vanilla JavaScript

    February 13th, 2018 | Front End
  • How to create a pure css tabbed menu widget?

    September 2nd, 2016 | Front End
  • Gulp: recommended plugins and good habits to adopt

    August 29th, 2015 | Front End
Advertisement

Leave a comment

Log in to comment with your phpocean account or use the form bellow to comment as a guest


Comments (10)


Don't miss any tutorial again

Receive fresh and new tutorials right at the moment they are published into your private email

Recent tutorials

  • How to disable the touchscreen drivers permanently on Ubuntu 17.10 March 11th, 2018
  • The science of creating fixed components on scroll with vanilla JavaScript February 13th, 2018
  • Easy guide on how set your workstation on Ubuntu 17.04 October 19th, 2017
more »
Write for us Want to become an author on phpocean.com? Request a tutorial Can't see a particular tutorial? Ask for it.

Latest updates

  • Clients think you are difficult February 22nd, 2018
  • What's the advantage of not using a CMS like WordPress? February 20th, 2018
  • Why I(you) keep on growing smaller in programming? February 14th, 2018
  • Developer and project management: something you need to know February 7th, 2018
  • Learning programming is different from learning a programming language February 5th, 2018
  • Mirage of good code January 31st, 2018
  • Your client's dream is your nightmare January 27th, 2018
more »
  • About us
  • Faq
  • Policy & Terms
  • Advertise with us
  • Contact
  • Discussions
  • Vialactea Technologies
Copyright © 2015 - 2018 phpocean.com. by Vialactea Technologies Ltd. Except where noted, all rights reserved - Proudly made in Ghana .:. Powered by zooboole.me.