blossom-ui
Advanced tools
Blossom has been built for the ground up to provide an easy way for beginner and advanced web designers and developers to get their hands on a simple but powerful design framework. With a massive library of web elements, Blossom allows users to build & design intuitive websites efficiently.
Download the ZIP bundle
Include it in your markup
<link rel="stylesheet" type="text/css" href="/blossom-ui/css/blossom.min.css"/>
<script src="/blossom-ui/js/blossom.js"></script>
Install the package
npm install blossom-ui --save
Directly link to the files built in your working directory
Coming soon
The Elements section provides a vast range of elements needed to build a site from scratch; ranging from buttons to progress bars, you have all the building blocks needed to make a truly unique page.
Just hover over the element you want to use and click the code icon. You'll see the HTML markup needed to clone the element for your website.
The Design section gives you all the helper classes needed to make a customized layout. Use the 12 Column Grid to make the basic structure of your page.
Make sure to start planning for mobile versions from the start by using several grid classes and breakpoints on your elements.
The Utility section provides additional helper classes and methods to add that next level of detail to your page.
Ensure that you use Blossom JS as mentioned in the section to get your Progress Bars and Dropdowns working correctly.
Most theming can be achieved by editing the variables.styl file within Blossom's src folder. Changing single variables will have an effect across your whole website so try to experiment from the start to see what suits your site the most.
A new theming guide has been released, going into detail about different parts of theming.
Upon installing Blossom, a gulpfile with come along with all source files in the install directory. Run gulp build to watch the source directory and to allow Blossom to be recompiled each time you edit any .styl files.
The file _.styl in included within Blossoms source folder so that custom Style markup can be written in and compiled directly with Blossom.
When you are ready for production, simply run gulp build so that Blossom JS and Blossom CSS can be compiled and minified.
Found any issues with the build? Make sure you let me know by posting an issue.
Licensed under MIT - Copyright (c) Cindr.io 2017
FAQs
A free open-source design framework for the modern web
The npm package blossom-ui receives a total of 3 weekly downloads. As such, blossom-ui popularity was classified as not popular.
We found that blossom-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.
Security News
Cloudflare is expanding Node.js compatibility for Workers and Pages, enabling developers to use more npm packages through a hybrid approach that combines native code and polyfills for Node.js APIs.
