CSS Pre-processors

CSS is very easy to write. The syntax is straightforward and easy to understand. But as your project grows larger, you may have to manage multiple stylesheets to handle thousands of CSS lines and if you know CSS, you know it becomes mighty hard to maintain in that situation.
This is where CSS Pre-processors become really useful. CSS Pre-processor allows us to write CSS in programming fashion with Variables and Functions, which then is compiled into browser-compliant CSS format. We can also reuse CSS properties with some special rules such as @extend and@include.
There are a number of CSS Pre-processors: Sass, LESS, Stylus, and Myth.

Template Engine

Creating a static HTML page similarly is simple. However, if you have multiple HTML pages to handle in your project, things could get out of hand. Most of these pages may share the same components such as a Header, Sidebar, and Footer.
Using a Template Engine sounds better for this situation. There are now a number of Template Engines that we can use, such as Kit, Jade, and Handlebars. Each has its own writing conventions. Kit, for instance, comes only withVariables and Import capability which are declared with a simple HTML comment tag, like so.
1
2
3
4
// example of importing a seperate template
// this is a variable
Jade and Handlebars come with a lot of robust features to cater to more complex projects. We will discuss them in more detail in a separate post (stay tuned!). The point is that if you want to build a scalable static website, you should take advantages of a Template Engine.

Task Runner

The process to build a website is considerably repetitive. Minification,Compilation, Unit Testing, Linting, Concatenating Files and Browser Refreshing, to name a few, are the things that we would most likely do often in projects. Luckily, they can be automated using a Task Runner, such as Grunt and Gulp.
You can tell Grunt to do a set of tasks specified in Gruntfile.js. There are now a plenty of plugins to automate almost anything with Grunt, so you need not write your own Grunt tasks.
If if your project is tiring you out, it is time for you to utilize a Task Runner to streamline your workflow.

Synchronized Testing Tool

Here is one inevitable tool if you are building a mobile optimized website. If you have a lot of devices to test your website in, you definitely need Synchronized Testing, which allows you to test your website in multiple devices simultaneously.
Browser reloading as well as the interactions like clicking and scrolling are reflected across all tested devices at the same time, saving you from repetitive action.
There are two tools you can try to do this: A Grunt plugin called BrowserSync, and a GUI application called Ghostlab.

Development Toolkit

Development Toolkit puts together a number of tools in one Application. If you are not comfortable with the text-based setting in Grunt, a GUI application would probably be a better tool for you.
Codekit pioneers this kind of application, and includes LESS, Sass, Kit, Jade, Siml, Uglify, Bower, and a lot more on its feature list.

TAGS :