{"id":49453710,"url":"https://github.com/animify/Blossom","last_synced_at":"2026-06-18T22:01:02.797Z","repository":{"id":75431028,"uuid":"61443326","full_name":"animify/Blossom","owner":"animify","description":"A free open-source design framework for the modern web","archived":false,"fork":false,"pushed_at":"2019-02-01T20:04:53.000Z","size":8565,"stargazers_count":30,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-17T18:48:36.220Z","etag":null,"topics":["blossom","blossom-js","framework","grid","open-source","stylus","stylus-environment","theming"],"latest_commit_sha":null,"homepage":"https://getblossom.io/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/animify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-06-18T16:45:51.000Z","updated_at":"2025-01-06T14:03:23.000Z","dependencies_parsed_at":"2023-03-11T19:49:54.979Z","dependency_job_id":null,"html_url":"https://github.com/animify/Blossom","commit_stats":null,"previous_names":["cindr-io/blossom","aotik/blossom"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/animify/Blossom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FBlossom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FBlossom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FBlossom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FBlossom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/animify","download_url":"https://codeload.github.com/animify/Blossom/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animify%2FBlossom/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34508867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blossom","blossom-js","framework","grid","open-source","stylus","stylus-environment","theming"],"created_at":"2026-04-30T04:01:03.703Z","updated_at":"2026-06-18T22:01:02.791Z","avatar_url":"https://github.com/animify.png","language":"CSS","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# Blossom UI\n\n[![downloads](https://img.shields.io/npm/dm/blossom-ui.svg?style=flat-square)](https://npm-stat.com/charts.html?package=blossom-ui\u0026from=2017-07-01)\n[![npm](https://img.shields.io/npm/v/blossom-ui.svg?style=flat-square)](https://www.npmjs.com/package/blossom-ui)\n\nBlossom 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 \u0026 design intuitive websites efficiently.\n\n---\n\n### Getting started\n\n#### Self hosting\nDownload the [ZIP bundle](http://getblossom.io/introduction)\n\nInclude it in your markup\n\n`\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/blossom-ui/css/blossom.min.css\"/\u003e`\n\n`\u003cscript src=\"/blossom-ui/js/blossom.js\"\u003e\u003c/script\u003e`\n\n#### NodeJS Dependancy\n\nInstall the package\n\n`npm install blossom-ui --save`\n\nDirectly link to the files built in your working directory\n\n#### CDN Hosting\n\n_Coming soon_\n\n---\n\n### Elements\nThe [Elements section](http://getblossom.io/elements/buttons) 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.\n\nJust 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.\n\n### Design\nThe [Design section](http://getblossom.io/elements/buttons) gives you all the helper classes needed to make a customized layout. Use the [12 Column Grid](http://getblossom.io/design/grid) to make the basic structure of your page.\n\nMake sure to start planning for mobile versions from the start by using several grid classes and breakpoints on your elements.\n\n### Utility\nThe [Utility section](http://getblossom.io/utility/js) provides additional helper classes and methods to add that next level of detail to your page.\n\nEnsure that you use Blossom JS as mentioned in the section to get your Progress Bars and Dropdowns working correctly.\n\n### Theming\nMost 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.\n\nA new [theming guide](http://getblossom.io/customization) has been released, going into detail about different parts of theming.\n\n### Building\nUpon 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.\n\nThe file `_.styl` in included within Blossoms source folder so that custom Style markup can be written in and compiled directly with Blossom.\n\nWhen you are ready for production, simply run `gulp build` so that Blossom JS and Blossom CSS can be compiled and minified.\n\n### Issues\nFound any issues with the build? Make sure you let me know by posting an issue.\n\n###### Feel free to post enhancements in the Issues section\n\n---\n\nLicensed under MIT - Copyright (c) Stefan Mansson 2019\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimify%2FBlossom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanimify%2FBlossom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimify%2FBlossom/lists"}