Petal Is An Organized & Lightweight CSS UI Framework Running on LESS

By Jake Rocheleau. in Web Design. Updated on April 9, 2018.

From Bootstrap to Foundation it seems like there’s an endless stream of CSS frameworks to pick from. But few run on LESS and even fewer are as well-organized as Petal.

This small open source project was created internally for the team at Shakr but they decided to release it all on GitHub. It’s still a new framework so there’s plenty of room for improvement. In its current state, Petal is a feature-rich framework for any web project.

Read Also: LESS CSS – Beginner’s Guide

Anyone interested should check out the main page and look over some of the documentation.

The Petal stylesheet breaks down into different LESS files, so it’s organized based on features and settings. This way if you want to make changes or find a specific class you need to browse only one file, for instance typography.less, rather than a whole library.

You can see some of the more common design features in this pen along with code snippets you can copy.

See the Pen <a href="https://codepen.io//Shakr/pen/rWWBwJ/" rel="nofollow">Petal UI Showcase</a> by Shakr (<a href="https://codepen.io//Shakr" rel="nofollow">@Shakr</a>) on <a href="https://codepen.io/" rel="nofollow">CodePen</a>.

Petal is meant to be a minimalist framework with simple pre-built styles.

Not everyone wants to work adding color or tone into their designs. The beauty of a CSS framework is that it can provide the design and style, so you just add the HTML and get moving.

This is what Petal does well, and it’s a breath of fresh air in a world full of Bootstrap-powered homepages.

If you wanna try this for yourself just add the Petal.css stylesheet right to your document’s <head> section. From there, all the basic styles will be applied directly to all HTML elements.

You can tinker with classes by checking out the docs page on the site. There’s actually a whole section covering basic page setup using a class, such as .section as a container with classes like .row or .column for the structure.

Layout options are practically endless, and you can always add extra formatting for padding & margins if needed.

For such a small CSS framework, Petal is truly impressive. It’s currently in its infancy at v0.5 but will continually be developed as time goes on. To learn more check out the Petal homepage, and see what you can build!