Nowadays, UX and design are critical for every web app. If you want your web app to be used by anyone - even if its highly functional - it must be designed well.
Every project is different, but there are a few steps that you should go through every time you kick off UI development.
Before you choose your front-end framework, you need to first decide if you even need one. Here are some pros and cons of using one:
If you do decide to use one, you’ve got plenty of options. At Netguru we mostly use Boostrap 3 or Foundation 5. Each of them has theirs own pros and cons. I won’t compare the two in this post, but @felippenardi wrote about core differences and summed it up in once sentence:
Bootstrap tries to give you everything you’ll ever need to bootstrap your project. Foundation just gives you the foundation.
Both Bootstrap and Foundation use preprocessors. That means you can easily customize it by either:
Add a mixin library for keeping your code DRY. Two great examples are Compass and Bourbon. They provide a lot of cool features that work out of the box, and what’s more, these tools don’t make your production assets heavier.
Both libraries make writing cross-browser compatible code much easier by implementing prefixers:
You write something like this
There is even a mixin for creating your custom prefixers!
Besides prefixers, Bourbon and Compass define a set of useful functions (i.e. converting pixels to rems, math functions and others). Some of these are included in frameworks like Bootstrap or Foundation as well.
Bourbon and Compass are both great for prefixing, but when it comes to code-shortening mixins, I sometimes prefer my own custom solutions:
It’s very comfortable for setting both height and width:
Squares and rectangles are covered with the
size mixin. I use circles and rounded squares a lot as well so why not create mixins for them?
Then it’s very easy to create shapes like these:
I was experimenting with this one a bit. I’ve tried two different solutions before I ended up with a mixin very similar to Hugo Giraudel’s mixin.
Ruby hash style (with Sass maps)
The part I don’t like the most in this one is necessity of of using double parenthesses
My current mixin
As mentioned above, I ended up with this simple mixin:
Then, I just include it and it works perfectly:
I’m also using mixin for RWD which I covered in this blog post.
Kicking off UI development for your new project can be harmless and fun. The only rule here is “use the right tool for the right job”. What is your flow when starting new project? What tools do you use? Feel free to share it in comments section.
PS. Check out our checklist for launching a new project and see how this simple yet powerful tool can help you with keeping the workflow efficient!