{"id":18765031,"url":"https://github.com/moonrhythm/biomatic","last_synced_at":"2025-08-21T09:08:43.074Z","repository":{"id":73782767,"uuid":"100697322","full_name":"moonrhythm/biomatic","owner":"moonrhythm","description":"A Flexible Atomic-Focused CSS Toolkit","archived":false,"fork":false,"pushed_at":"2022-08-16T13:33:47.000Z","size":2345,"stargazers_count":154,"open_issues_count":2,"forks_count":10,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-08-09T02:31:29.750Z","etag":null,"topics":["css","scss"],"latest_commit_sha":null,"homepage":"https://biomatic.dev/","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/moonrhythm.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}},"created_at":"2017-08-18T09:40:36.000Z","updated_at":"2025-05-26T12:53:45.000Z","dependencies_parsed_at":"2024-06-21T14:16:52.959Z","dependency_job_id":"4cf1ce62-0e1c-4fe1-82a7-86220512e993","html_url":"https://github.com/moonrhythm/biomatic","commit_stats":{"total_commits":371,"total_committers":2,"mean_commits":185.5,"dds":"0.0026954177897574594","last_synced_commit":"7c48ff3e8aa61fbd93c69393696996d7940866b0"},"previous_names":["biomaru/biomatic"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/moonrhythm/biomatic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moonrhythm%2Fbiomatic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moonrhythm%2Fbiomatic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moonrhythm%2Fbiomatic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moonrhythm%2Fbiomatic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moonrhythm","download_url":"https://codeload.github.com/moonrhythm/biomatic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moonrhythm%2Fbiomatic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271028280,"owners_count":24687218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"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":["css","scss"],"created_at":"2024-11-07T18:32:29.413Z","updated_at":"2025-08-21T09:08:43.055Z","avatar_url":"https://github.com/moonrhythm.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/BioMaRu/biomatic/readme-resource/readme-images/logo.png\" alt=\"biomatic\" height=\"120\"\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eBiomatic CSS\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA flexible atomic-focused CSS toolkit\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\t\u003ca href=\"https://npmjs.org/package/biomatic\"\u003e\n\t\t\u003cimg src=\"https://img.shields.io/npm/v/biomatic.svg?style=flat-square\" alt=\"NPM version\"\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"https://github.com/BioMaRu/biomatic/blob/master/LICENSE\"\u003e\n\t\t\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\" alt=\"License\"\u003e\n\t\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n**Biomatic CSS** is an atomic-focused CSS library with utilities, layout, and basic components classes for faster development.\n\nBiomatic's goal is to be a foundation to create and extend a maintainable CSS for your design systems (You can still easily use the complied css file in ``/dist``).\n\n**Biomatic** is unopiniated. You can customize atomic classes, colors, font, spacings, and more from the simple SCSS configuration files and use them across your project.\n\n# Features\n\n- **Atomic-focused:** craft anything you wanted with the collection of atomic classes.\n- **Battery included:** basic components, layouts and utilities included, for rapid UI development and easy to extend.\n- **Clean responsive grid:** simple and clean grid systems.\n- **Carefully naming:** readable and predictable class name.\n- **Customizable:** customize and create your own design systems.\n- **Pure CSS:** no javascript required.\n- **Fun:** very fun to use.\n\n# Installation\n\n### Install manually\nDownload the compiled and minified of [biomatic](https://github.com/moonrhythm/biomatic/releases/download/v0.3.4/biomatic.full.min.css.zip).\n\nUnzip and include ``biomatic.min.css`` in your website.\n```html\n\u003clink href=\"/path/to/biomatic.min.css\" rel=\"stylesheet\"\u003e\n```\n\n### Install from CDN\nAlternatively, you can use the unpkg or jsdelivr CDN to load latest compiled of Biomatic\n```html\n\u003clink href=\"https://unpkg.com/biomatic/dist/biomatic.min.css\" rel=\"stylesheet\"\u003e\n```\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/biomatic/dist/biomatic.min.css\" rel=\"stylesheet\"\u003e\n```\n\n### install using NPM or Yarn\n```shell\nnpm install biomatic --save\n```\n```shell\nyarn add biomatic\n```\n\n# Customize and Build\n\nTo use Biomatic as a foundation and extend it to create your design system. you can either\n- __Clone Biomatic__\n- __Import Biomatic__\n\n## Clone and build Biomatic\n\n**Clone biomatic**\n```shell\ngit clone https://github.com/moonrhythm/biomatic.git\ncd biomatic\n```\n\n**Install dependencies**\n```shell\nnpm install\n```\n```shell\nyarn\n```\nBiomatic uses ``Gulp`` for compiling CSS.\nThis will install ``Gulp`` and it dependencies.\n\nThen you can play around with the files in [/config](https://github.com/moonrhythm/biomatic/blob/master/src/config)\n\n**Build th new CSS**\n\nsimply run\n```shell\ngulp build\n```\nThe CSS output located in ``/dist`` directory.\n\n## Import Biomatic\n\nIt is recommended importing Biomatic SCSS source files to your projects from ``node_module`` and then customize it from your project.\n\nIn this way, you can keep Biomatic up to date without conflicts, because Biomatic main source and configure files are separated.\n\n1. Install Biomatic using npm.\n2. Create your ``main.scss`` file.\n3. Import Biomatic's source file from ``node_module`` but copy [/config](https://github.com/moonrhythm/biomatic/blob/master/src/config) to your project and import [/config](https://github.com/moonrhythm/biomatic/blob/master/src/config) from your project instead.\n4. Customize [/config](https://github.com/moonrhythm/biomatic/blob/master/src/config).\n5. Build ``main.scss``.\n\nExample of ``main.scss``\n```js\n/* import config from your project*/\n@import 'config/config';\n/* import Biomatic's files from node_module */\n@import 'biomatic/src/mixins/mixins';\n@import 'biomatic/src/layouts/layout';\n@import 'biomatic/src/components/components';\n@import 'biomatic/src/utilities/utilities';\n@import 'biomatic/src/atomics/atomics';\n```\n\nfiles in ``/config``\n\n```\nconfig/\n├── _breakpoint.scss\n├── _color.scss\n├── _initial.scss\n├── _radius.scss\n├── _reset.scss\n├── _pacing.scss\n├── _typography.scss\n└── config.scss\n```\n\n# Sites using Biomatic\n\u003cdiv style=\"display: flex\"\u003e\n\t\u003ca href=\"https://www.swapgap.com\"\u003e\n\t\t\u003cimg height=\"50\"\n\t\tstyle=\"margin-right: 16px\" src=\"https://raw.githubusercontent.com/BioMaRu/biomatic/readme-resource/readme-images/swapgap.png?v=2\"\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"https://fastwork.co\"\u003e\n\t\t\u003cimg height=\"50\"\n\t\tstyle=\"margin-right: 16px\" src=\"https://raw.githubusercontent.com/BioMaRu/biomatic/readme-resource/readme-images/fastwork.png\"\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"https://chanto.io\"\u003e\n\t\t\u003cimg height=\"50\"\n\t\tstyle=\"margin-right: 16px\" src=\"https://raw.githubusercontent.com/BioMaRu/biomatic/readme-resource/readme-images/chanto.png\"\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"https://healthathome.in.th/\"\u003e\n\t\t\u003cimg height=\"50\"\n\t\tstyle=\"margin-right: 16px\" src=\"https://raw.githubusercontent.com/BioMaRu/biomatic/readme-resource/readme-images/healthathome.png\"\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"https://rushh.co/\"\u003e\n\t\t\u003cimg height=\"50\"\n\t\tstyle=\"margin-right: 16px\" src=\"https://raw.githubusercontent.com/BioMaRu/biomatic/readme-resource/readme-images/rushh.png\"\u003e\n\t\u003c/a\u003e\n\u003c/div\u003e\n\n# License\nCode copyright 2017 Theerapong Laowrungrat, 2018 Moon Rhythm. Code released under the \u003ca href=\"https://github.com/moonrhythm/biomatic/blob/master/LICENSE\"\u003eMIT license.\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoonrhythm%2Fbiomatic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoonrhythm%2Fbiomatic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoonrhythm%2Fbiomatic/lists"}