Articles > CSS


Avalanche CSS grid system debuts

Colour Garden, the brainchild of front-end web developer Tom Hare, from Cambridge, England, has released Avalanche, a CSS grid system that’s responsive, SASS-based, extremely clean and powerful. Sounds too good to be true? We look at it in more depth. For a grid system to be well-received, it must have many benefits, and Avalanche promises plenty. They include: A flexible naming convention ... Your width class names now come with three naming conventions: fraction (1/4), percentage (25) and...

Getting the best out of CSS

Cascading Style Sheets (CSS) have really changed the way we think about web page design, and they've certainly made creating awesome designs much simpler than it used to be.  Still, for such a great technology, there's a huge amount that designers and developers need to learn in order to truly master the entire skill set required to earn the title of CSS Ninja. 1. Create an organized library of CSS that fits your design philosophy ... Every time you do something in CSS that achieves a perfect result, you...

Meet Rucksack, the latest CSS development tool

Has CSS development become too humdrum for you and just not as fun as it used to be? If that’s been what you’ve found in the last little while, then it’s a good idea to try something new and fresh, such as Rucksack. Rucksack might come in a neat, compact package, yet it’s full of goodies that will make CSS development easier. Both modular and lightning-quick, Rucksack is built on PostCSS and comes with many features. Designers and developers want to start using tools like this right out of the box,...

Can you overuse media queries?

When most people think about responsive web design, they think about a website that restructures and reforms to fit the device where it is being displayed. While this is true, few know how this is actually achieved. There are all types of different frameworks out there for building a responsive website. Most of them use media queries to get the job done. With all of the devices out there, at different screen sizes and resolutions, can you set up a media query for each one? Also, is there such a thing as too...

How to create a CSS3 progress bar

The progress bar has been used on the web ever since we realized that not everything would load instantly for everyone. These bars serve to notify the user about the progress of a specific task in your website, such as uploading, downloading, loading an app etc. It used to be impossible to create a progress bar animation without the use of JavaScript but thanks to CSS3 we're now able to perform animations, add gradients and some multi-color element inside a div. In fact HTML5 has also a special progress...

40 tools for writing better CSS

We all know CSS is great. It makes our sites look good, can be used to add animation, and keeps the presentation separate from the content. It can be hard, though, to know everything there is to know about CSS. It only gets harder as we try to make our code cross-browser compatible. This is where third-party tools come in. From simplifying our workflows, to generating actual CSS, these tools give us the code we need, faster, even as we learn to write it ourselves. Pure ... Pure is not quite a framework. Rather,...

Control vertical rhythm using Sass and Compass

Good vertical rhythm on a website has numerous benefits: aesthetically the design will appear more balanced and polished; for the reader, the content will be more cohesive and easier to read. If you’ve ever read a content heavy website and found it hard for your eyes to jump to the start of the next line, it was probably due to a poor vertical rhythm. In the old days of print design, vertical rhythm was set using font sizes, line heights, margin and paddings, set in point (pt) size units. Today the same styling...

8 simple CSS hover effects

With support for CSS3 increasing with each new release for every browser, and those tiresome CSS2-only browsers slowly dropping off the usage charts, we have far more options for hover effects and transitions in general. Almost all the calls to action that you see on the Web use some form of hover effect, because they draw the eye and make a website feel more engaging. Last year I brought you a set of 8 simple transitions that will wow your users, and today we’re going to look at 8 more… Getting started...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress