GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → shakrmedia → Petal

shakrmedia / Petal

Licence: mit
A modern, light CSS UI framework by Shakr

Labels

htmlcsslibraryframeworklesscss-framework

Projects that are alternatives of or similar to Petal

Skin
Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
Stars: ✭ 126 (+11.5%)
Mutual labels:  css-framework, library, less
Discord.js Menu
💬 Easily create Discord.js v12 embed menus with reactions and unlimited customizable pages.
Stars: ✭ 89 (-21.24%)
Mutual labels:  framework, library
Loadingshimmer
An easy way to add a shimmering effect to any view with just one line of code. It is useful as an unobtrusive loading indicator.
Stars: ✭ 1,180 (+944.25%)
Mutual labels:  framework, library
Kanbasu
A lightweight CSS framework written in Sass.
Stars: ✭ 94 (-16.81%)
Mutual labels:  framework, css-framework
Text Classification Keras
📚 Text classification library with Keras
Stars: ✭ 53 (-53.1%)
Mutual labels:  framework, library
Keyboardhidemanager
Codeless manager to hide keyboard by tapping on views for iOS written in Swift
Stars: ✭ 57 (-49.56%)
Mutual labels:  framework, library
Zui
⬢ Zsh User Interface library – CGI+DHTML-like rapid application development with Zsh
Stars: ✭ 95 (-15.93%)
Mutual labels:  framework, library
Lwc
⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
Stars: ✭ 974 (+761.95%)
Mutual labels:  framework, library
Aesthetic Css
A vaporwave CSS framework
Stars: ✭ 100 (-11.5%)
Mutual labels:  framework, css-framework
Framy Css
Very simple CSS Framework
Stars: ✭ 103 (-8.85%)
Mutual labels:  framework, css-framework
Swift Screencapture
A Swift framework to easily capture the screen on OS X.
Stars: ✭ 105 (-7.08%)
Mutual labels:  framework, library
Lemon
🍋 Minimal and responsive CSS framework for fast building websites.
Stars: ✭ 51 (-54.87%)
Mutual labels:  framework, css-framework
Pnet
High level Java network library
Stars: ✭ 49 (-56.64%)
Mutual labels:  framework, library
Best Of Web Python
🏆 A ranked list of awesome python libraries for web development. Updated weekly.
Stars: ✭ 1,118 (+889.38%)
Mutual labels:  framework, library
Csspin
CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner
Stars: ✭ 1,019 (+801.77%)
Mutual labels:  library, less
Cdnjs
🤖 CDN assets - The #1 free and open source CDN built to make life easier for developers.
Stars: ✭ 9,270 (+8103.54%)
Mutual labels:  framework, library
Materialize
Materialize, a CSS Framework based on Material Design
Stars: ✭ 38,630 (+34085.84%)
Mutual labels:  framework, css-framework
Bojler
Bojler is an email framework
Stars: ✭ 885 (+683.19%)
Mutual labels:  framework, css-framework
Core
Runn Me! core library
Stars: ✭ 31 (-72.57%)
Mutual labels:  framework, library
Milligram
A minimalist CSS framework.
Stars: ✭ 9,568 (+8367.26%)
Mutual labels:  framework, css-framework
View All Similar Projects ➔

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.

Changelog

Please view Releases for the changelog.

Attribution

Author

License

Released under the MIT License. See LICENSE for details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].