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...
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,...
In CSS3 we have two ways of creating animations: We have CSS Transitions that allow us to create some simple effects for things like hover; and we also have CSS Animations for more complicated effects. We can in fact create pretty much any animation we want using pure CSS and since it works with keyframes it uses a system we are already used to seeing in software like After Effects and Flash. In this article I'll get you through the basics of animating with vanilla CSS. Browser support ... CSS Animations...
It sounds really impossible that a language like CSS can be object oriented but it is possible to implement OOP ideas in CSS to make it into a much more pleasant writing experience whilst along the way making your CSS faster to load. What is object-oriented CSS? ... When you hear “object oriented CSS” you may think that this is somehow a new CSS, a pre-processor or something that was added to CSS but no, object-oriented CSS is the same CSS we have always written; but in a cleaner, dryer way so it's merely...
currentColor is a CSS variable-like feature that's been around for quite awhile now and has reasonably good browser support (it's supported by all modern browsers and their mobile counterparts, and even IE9+, though bugs have been reported in mobile Safari). While most variables are still being used with preprocessors until support becomes more widely established, currentColor can be used as-is. currentColor is super useful under some specific circumstances, and well worth learning (especially...
CSS is growing more sophisticated all the time, with new tools for us to use. In this article I'll talk about one new feature: clipping with clip-path and masking. clip-path and masking are two properties that push the boundaries of the box model a little further than we've seen before. Browser support ... Happily, browser support is pretty good for clip-path. For desktop browsers it's supported as far back as IE9 (although some older browsers need vendor prefixes, as we'll see). The only real issue...
Most of us use some form of a CSS pre processor now, they give us the freedom and advantages that CSS still doesn’t have implemented, like variables. The problem with these pre processors is that they use a completely different syntax than CSS itself making us learn two syntaxes. What if we could have a pre processor that had all the advantages we are used to and still keep the CSS syntax ? Myth allows you write CSS syntax so that you don’t have to remember two syntaxes and so that when features like variables...
If there is one thing a language needs to qualify as a programming language, it’s variables; they’re incredibly useful, save us a bunch of work and typing, and improve coding all-round. This is exactly what CSS didn’t have. Pre-processors like Sass and Less used them, but vanilla CSS never had variables. Until now. They’ve been on the horizon for a while, but only recently have variables started to be implemented in CSS, let’s take a look at how they work. Browser support ... Currently CSS...