The Shapes of LESS CSS (The LESS CSS Shapes Mixin Library)
posted under category: CSS on August 31, 2011 by Nathan
Foreword: I am giving a LESS CSS talk at the Adobe MAX 2011 ColdFusion Unconference. Blogging about LESS is just one of my stepping stones to presenting. If you want the really good stuff, you should come to my session!
A few weeks ago I stumbled on a CSS shapes demo, The Shapes of CSS from a great site, CSS-Tricks. It's good code, really good, but nobody wants their shapes the same size or color, and changing these means changing a lot of properties. Say you want three sizes of triangles on your site, you have to do the math three times. That's not a huge deal because it's a simple divide-by-two equation, but the heart shape is going to cause a lot more problems, a lot of rework, and a lot of checking.
The great news for you is that I made a LESS CSS mixin library that does all this work for you! All the shapes are LESS mixins, so they don't output anything unless you call them explicitly. You can add the library to your project and if you don't use them, it shouldn't add any overhead.
All of the shape mixins take at least 2 optional parameters, size and color. Some of them have additional properties, like width and height instead of size, and angle for some shapes like the parallelogram. The default size is 100px, which means that at least one edge of the shape will be 100px wide. The default color is red.
The best way to see it in action is to check the demo page, affectionately titled, The Shapes of LESS CSS.
When you decide it's awesome, check it out, download it and fork it on GItHub:
The LESS CSS Shapes Library.