https://github.com/drsounds/space

Pure CSS-vars flexible CSS design system
https://github.com/drsounds/space

bootstrap design design-system

Last synced: 6 days ago
JSON representation

Pure CSS-vars flexible CSS design system

• Host: GitHub
• URL: https://github.com/drsounds/space
• Owner: drsounds
• Created: 2023-12-03T12:30:47.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-12T20:32:52.000Z (9 months ago)
• Last Synced: 2024-04-14T11:43:12.153Z (7 months ago)
• Topics: bootstrap, design, design-system
• Language: SCSS
• Homepage:
• Size: 292 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# Space Design Language

Space 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.

The 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.

This 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.

This framework will use bootstrap.grid only css for basic layou so we don't have to reinvent the wheel.

As 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.

For 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



# Folder structure

````

project_folder/

  css/

    index.css

    variables.css

    features/

       /

          index.css

          variables.css

          components/

              index.css

````

Note: 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.

# Features

The 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.

To use a feature, you will need to import the core style and the features you want to use like

````html



... Your code



````

## Multiple features

It is possible to combine multiple features like this

````html

  

    

    

  

   

       


         ... Your code

       
 

  


````

# License

MIT