Page 3 of 19

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

ComingSoon · a minimal landing page template

Here’s a fresh new template for a minimal landing page for your new website or app for you to download.

Replace the rocket emoji with a big H1 text or your website/app logo, put a catchy tagline, place a killer screenshot below and you’re done! Continue reading

Spoticalc – Spotify bandwidth usage calculator

Recently, we were wondering with a couple of friends how much data Spotify was sucking out of our cell phone data plans.

I knew that with a 3GB/mo plan I could get away with most of my needs, but there was also streaming quality into the mix. Continue reading

Contact forms without code

You just designed and implemented a beautiful portfolio. You’re almost about to publish it, but remember you still have to make that static contact form actually send messages to your inbox.

You google “contact form PHP”. And you know the rest. Continue reading

DailyUI #012 E-Commerce Shop (Single Item)

This is the last Daily UI on the blog. As I’ll be posting them on Dribbble and Twitter.

DailyUI#012---E-Commerce-Shop

Fonts are Oswald and Lato.

© 2018 Ignacio Toledo

Theme by Anders NorénUp ↑