CSS posts

Will CSS Houdini revolutionize web development?

Browser development has often seemed like an endless cycle of disappointment for wed developers. A new standard is recommended, and maybe one browser implements it as a feature. It looks cool. But we can’t allow ourselves to get excited... not yet. That way lies pain, sadness, and five years to a decade of waiting for the feature to become viable. Remember how long it took us just to get working transparent .PNGs in every browser? Yeah. That took a while. Well, that could all be changed in a big way, sort...

Underappreciated frameworks part 2: spaceBase

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...

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...
Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns