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

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.

LESS CSS – Beginner’s Guide

LESS CSS – Beginner’s Guide

CSS Pre-processor has now become a staple in web development. It ships plain CSS with programming traits such…Read more

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.

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 Petal UI Showcase by Shakr (@Shakr) on CodePen.

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.

petal css layoutpetal css layout

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!

CSS Preprocessors Compared: Sass vs. LESS

CSS Preprocessors Compared: Sass vs. LESS

There are a number of CSS Preprocessor, LESS, Sass, Stylus, and Swith CSS, just to name a few.…Read more

Source: http://www.hongkiat.com/blog/petal-css/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s