CSS rules were made to be broken, or at least that’s the idea behind !important. !important is a CSS rule that makes it possible to override other previous styles spread across multiple style sheets. !important essentially defines something as important (imagine that!), ignoring subsequent/conflicting rules. It makes the CSS style with the !important designation the one that counts most, nullifying any others. Essentially, it gives a CSS value more weight than it otherwise would normally...
This is a part of series, where we explore CSS frameworks that are well-made and have great ideas, but never took off like the “big two”. In the first article in this series, I ranted about the wonders of Titon Toolkit. I loved it because it was made to be customized, to be abused, and built upon. Well, I’ll try not to rant about that sort of thing too much, because it’s a feature common to a few of the frameworks that I’ve selected for this series, including today’s. It’s called spaceBase, and...
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...
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...
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,...
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...
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...
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,...