Q

Create super fast websites

My workflow to create websites using Bootstrap, Less & Grunt.

Overview

Since 2011 I have built a few websites for friends and relatives. I started purchasing HTML-Javascript templates from Template Monster and then I modified them to create custom websites. This method helped me to create websites quickly as Template Monster has fantastic templates at a reasonable price. Then I switched to Wordpress because the maintenance was easier and a wide variety of templates were also available. I worked a lot with Elegant Themes and specifically with Divi template which allowed me to create customised layouts very easily. The problem I found with Wordpress was: sites were slower than plain HTML sites, they would break easily after updates, they were hard to move between servers and backups didn't save all configurations and data. Also, there wasn't a direct way of managing content, templates and tweaks with source control tools.

Because the websites I manage are small informative sites and not complex e-commerce sites, Wordpress was not necessarily the best alternative. After some research I found Bootstrap and in a week I was able to recreate one of my Wordpress sites with Bootstrap framework from scratch. I uploaded the Bootstrap site in a test folder on the same server where the original site was located. Bootstrap site was quicker than the original site and both looked the same. More important, there was room for many tweaks to make Bootstrap site even quicker. It is possible to increase Wordpress sites performance, but at a certain point it's not possible to continue without big changes in the code.

Bootstrap itself is good, but when it is combined with Less and Grunt it becomes a powerful way for creating and maintaining fast responsive websites.

The following article gives a conceptual explanation of these tools and na overview of my workflow, as I believe concepts are the most important part when someone starts learning. Technicalities and commands can be found online. I will add useful links for detailed explanations.

Bootstrap

Bootstrap is a collection of CSS and Javascript files that, once included in your pages, facilitate tasks such as creating navigation bars, buttons, responsive design and much more. Bootstrap was partially created with a language called Less which I explain below. To use Bootstrap it's required some knowledge of HTML and CSS so it's not for everyone. Some people say that all Bootstrap sites look the same. Well... not really. Responsive websites will adapt to the viewport which means that they may behave in a similar way. However, Bootstrap can be fully customised using custom CSS/Javascript files and/or modifying Bootstrap directly.

Less

Less is a language that was developed to create stylesheets (CSS) in a smart way. Less code can be reused for different CSS classes, it's possible to define variables, functions are called mixins and mathematical operations can be performed so it becomes much easier to create and maintain CSS stylesheets. Less files have to be compiled to generate standard CSS files.

For instance, if your CSS file uses the same color in 10 places, it's possible to create a Less variable to store that color and use the variable in those 10 places. If the color changes, you only need to modify the variable's value and all colors are automatically updated when Less file is compiled.

Grunt

Grunt helps to automate repetitive tasks such as minify, compile Less files, copy/paste file/folders and more. Grunt is not required to use Bootstrap but it helps a lot. The syntax is not very clear (at least for me) but it's nothing to be worried about. It probably takes one or two days to understand Grunt if you are not very good with Javascript language. Grunt requires Node.js to be installed in advance.

Workflow

OK, first thing first. Each website lives in its own folder. The folder structure of my website looks something like this:


@@img_alt_fq

FernandoQuiros folder contains all my website. I use Mercurial to manage my source code.

Build folder contains temporarily files that are used to create files for distribution. It is created when I compile the source. For instance, HTML files that are not minified will be kept in "build".

Dist folder contains what has to be uploaded to the server. Every time I compile the source code, the content of dist is updated. All files required in the server are kept in this folder so it's easy to copy its content to the server with one click. I keep the content of dist separated in different folders depending on file extensions.

Lib folder contains all code that comes from somewhere else such as Bootstrap code, jQuery and any other library I download for the site.

Node_modules keeps all Grunt modules. I recommend to install Grunt modules locally on each website project and "Grunt command line interface" (GUI) as a global. Have a look to the Lazy Developer speech.

Src folder contains all files I create from scratch. They are also organised in folders depending the files extensions. It doesn't matte how you organise your source files as long as it makes sense to you.

NOTE 1: Pages like "404" or "about-me" are kept inside separate folders. In that way the URL displayed in the browser doesn't show the ".html" extension. Inside "404" folder there is an index.html file that contains HTML code for 404 page. The same happens with "about-me" page.

Grunt

Before installing Grunt you need to install Node.js. The process will vary depending on your OS. This, this, this and this are good sites that explain a bit more of Grunt. After installing Node.js and Grunt you can install Grunt modules. Each module will allow you to perform different automated tasks. The modules I use are:

  • grunt-contrib-concat
  • grunt-contrib-uglify
  • grunt-contrib-less
  • grunt-contrib-cssmin
  • grunt-include-replace
  • grunt-contrib-htmlmin
  • grunt-contrib-copy
  • grunt-contrib-watch
  • grunt-w3c-html-validation

This is how I use them.

I use concatenate to combine all Javascript from Bootstrap and any other Javascript function in one file. The benefit is that it's possible to choose what Bootstrap Javascript functions to use, reducing size. Because there is only one Javascript file, HTML requests are reduced to 1, increasing website speed.

Uglify minfies the Javascript file created in the previous step.

Less compiles Less files and put them together in one CSS file.

Cssmin minfies the CSS file created in the previous step.

Includereplace is my favourite module. It includes HTML files in other HTML files. It also accepts parameters so you can use it like a function. It works well if you have the same header and footer in all pages. You can create a header.html and footer.html and include these files on each page to reuse code. Easy!!!

Htmlmin minifies HTML files.

Copy copies files I need from source and/or libraries to the distribution folder. It creates folders if required.

Watch is another cool module. You define what files you want to watch. If changes occur to those files an action is taken. For example, I watch all my HTML files in my source folder. If an HTML changes in src then "watch" minifies the modified HTML file and copies it to the dist folder. Then I just need to go to my browser and refresh it. No manual minifications and copy/paste :-).

Validation validates that html code is written correctly. It shows you if there are non closed tags (div, h1, etc.) and other possible problems. Usually I use it before I push my code to the server.

With this approach I can quickly create and maintain websites.

NOTE 2: Bootstrap offers an online customisation tool that allows to choose which elements are included in Bootstrap framework. This tool is a valid option for creating a customised Bootstrap but it doesn't offer all the flexibility of having Bootstrap compiled on your computer.

NOTE 3:You should know that Glup is na alternative to Grunt. I haven't used it but you can have more information here.

Other tools

Mercurial

All my projects are managed with Mercurial which is a revision control tool. For those who don't know what a revision control tool is I will explain it with simple words. When code is created it is recommended to keep track of changes. Also, when code is created/modified to achieve a specific goal, the chance is that many files have to be modified. So, a revision control tool create snapshots of all files in a project. If things go wrong with the code, it's possible to go back to a previous snapshot and all files are recovered to that specific snapshot. It is a way to control changes in group of files and also make sure that small milestones are saved in case the code is damage in the future. Each snapshot allows to include comments. Other cool things are possible but they are out of the scope of this article.

There are other source control tools such as GIT, SVN, etc. I recommend you to choose one and stick with it for all projects. Source control tools MUST be used for coding.

NOTE 3: I don't track files in dist folder with Mercurial as they change every time I compile my source code. I don't track files in build folders either as they are temporarily files. I do include images in src folder but only because I want to keep all required files for my sites in the repository. It doesn't make much sense to track changes in images or binary files.

Kate

Kate is a free text editor. The main reason I chose Kate is that it's possible to create simple filters to organise each project using a configuration file (.kateproject) that uses JSON syntax.

Initially I was using Sublime because I liked its simplicity and color scheme. The problem was that if I opened different projects they got mixed up. This happened many times which gave lots of headaches. I change Kate's color scheme and fonts trying to emulate Sublime which works quite well.

Screaming Frog

A couple of weeks ago I found Screaming Frog, an SEO spider program that crawls your website looking for links, images, scripts and more. I don't have much experience with it but I found it useful when I update a website to make sure that everything works and also to check that my external links still up. Of course, Screaming Frog offers much more than that but it will be your mission to find out what else it can do for you.

NOTE 4: A few weeks ago I started using webp format for images. It is a new compression algorithm managed by Google to create images that are smaller than jpg and support transparency like png. It's possible to define webp images as default image format for a webpage and include jpg or png images in case the web browser is unable to read webp (for example Firefox, at this date). The images can be reduced aprox. 25% and keep a similar quality. Other interesting tweaks for png images can be found here.


If you have any questions or you think that something is not clear don't heasitate to write a comment below. Thanks for reading!