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
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.
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.
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
.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!
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