Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. I’ve been using Sass for quite sometime and found out that mixins are something any front-end developer would enjoy and take advantage of saving time and being more efficient.
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.
It save quite a lot of time and helps developers ensuring that the code is not redundant and organized nicely.
I recommend using Compass as they have many built in mixins that simplify developers work.
Some designers advocate skipping the Photoshop process and moving from wireframes directly into HTML/CSS. This is possible for smaller projects but not always advisable. Adobe Photoshop offers the best tools for testing color schemes, gradients, icons, and detailed page elements before moving the layout into your browser.
If you’re a little rusty in Photoshop then these tutorials should get you back into the groove. I’ve collected 28 web design tutorials centered around Photoshop techniques for designing typical page elements. Most are simple enough that you can follow along without much prior experience in the software. But even the more advanced tutorials can offer insights and help newcomers understand the digital design process.
Scalable images have become a lot more popular in recent years. As modern browsers slowly accept the notion of SVG images we can see many techniques being released out on the web. These range from scalable responsive logos to animated line drawings – all through the use of dynamically-generated images.
This collection of tutorials should be more than enough to get you all caught up to speed with the latest trends. Even if you know absolutely nothing about SVG images or how they’re created, these articles should provide insight along with a few industry tips & tricks. SVG resources appear to be a growing solution amongst web designers. Take a look over this showcase to understand what all the fuss is about.
Many newer social media communities and web applications are pushing the boundaries of interface design. Form inputs have changed a lot over just the past 4-5 years. One such feature is the tag select input field, where users can enter tags which appear as block items within the field itself.
For this tutorial I want to demonstrate how we can build this effect to be used in any website. To save time I’ll be using the jQuery Tags Input Plugin which is free and open source to use on any project. I prefer this plugin over some others because of the many parameters and options for customizing the experience. Take a peek at my live demo to see what we will be creating.