Use only grid system (or other component) from Bootstrap

PSA: You don’t need to add the whole Bootstrap code and a zillion dependencies and plugins just because it’s easier to use col-md-3 than hacking some CSS to float a few divs.

Use the link below to download a customized version of Bootstrap. Need the Grid System? Perhaps the pretty Glyphycons or tooltips? This has you covered:

Customize & Download Bootstrap

HTML0 – A starting point for front-end design

My last post was about front-end design workflow. Since then I got to think that others might benefit from it in a more concrete way.

So here it is, I put everything I use to kickstart a new HTML design project. For lack of time and creativity I named it HTML0. Its main parts are Browsersync + Sass, with a couple of Sass helpers I use frequently.

Any feedback is welcome :)

Fork HTML0 on GitHub.

A Front-end design workflow (Jul 2016)

It’s been quite a while since I started coding HTML+CSS designs from PSD/Ai/Sketch files. I started using plain CSS files, then Less, started using the awesome CodeKit, then Bash scripts, then Sass, tried Bourbon, tried Neat, learnt Gulp, npm, etc.

I wanted to share what works for me today. I mean, CodeKit still works great and I love it, just like Less or plain old CSS. But this config is what really helps me be more productive.

Sass

The first thing that works great for me is Sass. I certainly don’t use -know even- know half of its features, but just being able to import, use variables, nesting, mixins, etc. makes me more productive than plain CSS.

On a sidenote, I moved from Less to Sass basically because of the command line utility to watch changes and compile automatically, using sass --watch. That also changed a bit afterwards.

HTML5 Boilerplate

This is pretty standard nowadays. I almost always steal the basic HTML  from the HTML5 Boilerplate.

npm

I started using Bower, I love it and it works great. However, now I use some tools to compile Sass, prefix or concat that are stored in npm. So, I don’t want to be using two package managers if I can use just one.

Autoprefixer

This one is pretty straightforward. As per their docs: “just forget about vendor prefixes and write normal CSS according to the latest W3C specs”.

Browsersync

This has been the latest tech I’ve incorporated into the workflow and now I love it. It lets you reload multiple browsers when it detects a file change, remote debug, among many things.

Gulp – Putting it all together

At this time you may wonder how to put this all together. The answer is Gulp. In this setup, Gulp compiles Sass files, autoprefixes them, outputs them in a separate folder. On the fly, as you change Sass files. Also, it provides a small server, watches for changes in other files, and reloads the browser on all connected devices.

Here’s how a Gulpfile looks like:

To start the server, you have to run $ gulp and a browser window pops up pointing to localhost:3000 or similar.

Extras

SVG Injector

This little tool lets you inline SVG automatically on the HTML when an image tag src attribute points to an SVG file.

Links