{"id":29237,"date":"2017-02-17T21:01:16","date_gmt":"2017-02-17T13:01:16","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29237"},"modified":"2018-04-09T16:54:31","modified_gmt":"2018-04-09T08:54:31","slug":"petal-css","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/petal-css\/","title":{"rendered":"Petal Is An Organized & Lightweight CSS UI Framework Running on LESS"},"content":{"rendered":"

From Bootstrap to Foundation it seems like there\u2019s an endless stream of CSS frameworks<\/strong> to pick from. But few run on LESS<\/strong> and even fewer are as well-organized as Petal<\/a><\/strong>.<\/p>\n

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

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tLESS CSS \u2013 Beginner\u2019s Guide<\/a>\n\t\t\t\t<\/p>\n

Anyone interested should check out the main page<\/a><\/strong> and look over some of the documentation<\/strong>.<\/p>\n

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

You can see some of the more common design features<\/strong> in this pen<\/a> along with code snippets<\/strong> you can copy.<\/p>\n