{"id":19139756,"url":"https://github.com/drsounds/space","last_synced_at":"2026-06-18T02:31:11.402Z","repository":{"id":210531712,"uuid":"726794764","full_name":"drsounds/space","owner":"drsounds","description":"Pure CSS-vars flexible CSS design system","archived":false,"fork":false,"pushed_at":"2024-02-12T20:32:52.000Z","size":299,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-13T02:15:08.339Z","etag":null,"topics":["bootstrap","design","design-system"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drsounds.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":"drsounds","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-12-03T12:30:47.000Z","updated_at":"2023-12-10T20:09:58.000Z","dependencies_parsed_at":"2023-12-10T21:27:23.204Z","dependency_job_id":"08c358c0-5631-4bab-afbe-3d4fe75ca590","html_url":"https://github.com/drsounds/space","commit_stats":null,"previous_names":["drsounds/space-design-system","drsounds/space"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/drsounds/space","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drsounds%2Fspace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drsounds%2Fspace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drsounds%2Fspace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drsounds%2Fspace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drsounds","download_url":"https://codeload.github.com/drsounds/space/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drsounds%2Fspace/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34474063,"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":["bootstrap","design","design-system"],"created_at":"2024-11-09T07:14:56.610Z","updated_at":"2026-06-18T02:31:11.387Z","avatar_url":"https://github.com/drsounds.png","language":"SCSS","funding_links":["https://github.com/sponsors/drsounds"],"categories":[],"sub_categories":[],"readme":"# Space Design Language\n\nSpace is a multi paradigm CSS theme like bootstrap that aims to use pure 100% non preprocessed CSS like SCSS and the cutting edge CSS technology.\n\nThe goal of this project is to create a native pure CSS framework which is modular set of design features and controlled by classes and CSS variables. Being pure standardized but yet flexible, this framework will be easy to set up and maintain in a wider scope of projects.\n\nThis project will support common denominators for common elements such button classes is both .btn-* and .button-* to make it easy to implement and the framework will follow Bootstrap's class naming conventions.\n\nThis framework will use bootstrap.grid only css for basic layou so we don't have to reinvent the wheel.\n\nAs this framework ditches preprocessed CSS like SCSS and PostCSS this framework will be extremely modular, as the imports is native CSS imports. The structure of the files is a tree meaning that developers can decide to only import a subset of the framework's features of components.\nFor those who want the advantage of precompiled CSS it is off course possible to import these CSS in a project that uses SCSS or Webpack, as scss and PostCSS can handle normal css too. Please note that you must adhere to the --* css variables and will be incompatible with SCSS variables\n\n\u003cimg width=\"1128\" alt=\"Skärmavbild 2023-12-10 kl  21 12 28\" src=\"https://github.com/drsounds/space/assets/5108695/aa3f95d7-e299-4232-a325-6b1f4bc3379e\"\u003e\n\n# Folder structure\n\n````\n\nproject_folder/\n  css/\n    index.css\n    variables.css\n    features/\n       \u003cfeature name\u003e/\n          index.css\n          variables.css\n          components/\n              index.css\n\n````\n\nNote: The scss folder with SCSS files was created in an earlier iteration before I decided to ditch sass and make a pure css native framework. I am in the process of porting these files to native CSS and once it is done the scss folder will be deleted.\n\n# Features\n\nThe Space framework is modular in the sense it is built on a set of independent 'sub frameworks' aka 'features' which apply a cerain ui characteristic of styling like Skeudomorphic, flat, etc.\n\nTo use a feature, you will need to import the core style and the features you want to use like\n\n````html\n\n\u003clink rel=\"stylesheet\" href=\"\u003cframework dir\u003e/css/features/\u003cfeature id\u003e/index.css\"\u003e\n\n\u003cdiv class=\"sp-\u003cfeature id\u003e\"\u003e\n... Your code\n\u003c/div\u003e\n\n````\n\n## Multiple features\n\nIt is possible to combine multiple features like this\n\n````html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"\u003cframework dir\u003e/css/features/core/index.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"\u003cframework dir\u003e/css/features/flat/index.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"sp-core\"\u003e \n       \u003cdiv class=\"sp-flat\"\u003e\n         ... Your code\n       \u003c/div\u003e \n  \u003c/body\u003e\n\u003c/html\u003e\n````\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrsounds%2Fspace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrsounds%2Fspace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrsounds%2Fspace/lists"}