A modern, light CSS UI framework by Shakr
Clone or download
zvuc Merge pull request #20 from shakrmedia/rawgit-to-jsdelivr
Use jsdelivr link for quick start instead of rawgit
Latest commit a32c3bc Oct 13, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Migrate to CircleCI from Travis CI (#19) Aug 8, 2018
assets Fix checkmark/radiobox becoming overly thick when sizing them up; Add… Apr 20, 2018
dist Bump version to 0.11.1 Jul 9, 2018
docs-src Change rawgit link to jsdelivr Oct 13, 2018
docs Regenerate start/index.html Oct 13, 2018
js Normalize indent style with editorconfig Apr 25, 2018
less Fix checkbox/radiobox ticks color not changing in dark mode Jul 9, 2018
.editorconfig Add editorconfig Apr 23, 2018
.gitignore Migrate to CircleCI from Travis CI (#19) Aug 8, 2018
CHANGELOG.md Remove commit hash from changelog because no longer relevant Aug 31, 2016
Gruntfile.js Separate Selecter js file from main petal.js, cleanup gruntfile build… Apr 25, 2018
LICENSE Add LICENSE Jan 23, 2015
README.md Migrate to CircleCI from Travis CI (#19) Aug 8, 2018
logo.png Setup grunt copy for copying assets to build folder Aug 18, 2016
package.json Bump version to 0.11.1 Jul 9, 2018
yarn.lock Update yarn.lock with integrity checksum Oct 13, 2018


Petal CircleCI

Petal is a modern, light CSS UI framework developed at Shakr.

Petal aims to provide an ample set of consistently designed UI components you can easily utilize in your web projects.

Petal is fully coded on LESS from scratch.

Setting up Petal in your project

Download the latest release, copy the dist folder to your project folder. (You may want to rename it to something else.)

Insert the link to stylesheet in the <head> of your html:

<link rel="stylesheet" type="text/css" href="dist/petal.min.css">

Now you can use all the Petal classes and styles in your project's HTML file.

(If you need a pre-built, hosted CDN link, use the rawgit URL as explained in the documentation.)

Alternatively, if you want to install through npm, run

npm install petal.less

in your console.

Please refer to the documentation for other advanced ways to use Petal in your project.

Developing Petal

Build Petal

Petal uses Grunt for compiling LESS files to a single petal.css file. Run grunt petal to compile Petal for a single time. Run grunt dev to go into development mode where files in the Petal directory will be watched, building automatically when you make changes to any of the source files. (This will also build the documentation.)

Build Docs

Petal's documentation is built using Assemble. Run grunt (default task) to build Petal and documentation pages for a single time, grunt dev for continuous watching and automatic building. The documentation will be built into docs folder.

The dev task will also run a local webserver based on the docs folder. While running the dev task, you can access the built documentation at localhost:9000. The pages will also livereload when you save any of the watched files.


Please view Releases for the changelog.




Released under the MIT License. See LICENSE for details.