The Dopefly Tech Blog

« The Dopefly Tech Blog Main page

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.

Nathan is a software developer at The Boeing Company in Charleston, SC. He is essentially a big programming nerd. Really, you could say that makes him a nerd among nerds. Aside from making software for the web, he plays with tech toys and likes to think about programming's big picture while speaking at conferences and generally impressing people with massive nerdiness and straight-faced sarcastic humor. Nathan got his programming start writing batch files in DOS. It should go without saying, but these thought and opinions have nothing to do with Boeing in any way.
This blog is also available as an RSS 2.0 feed. Click your heels together and click here to contact Nathan.