Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prolific/onlycss
Modern CSS framework built ONLY with pure css. No bullshit!
https://github.com/prolific/onlycss
css css-framework css-grid css3 customizable modern seo-friendly
Last synced: about 1 month ago
JSON representation
Modern CSS framework built ONLY with pure css. No bullshit!
- Host: GitHub
- URL: https://github.com/prolific/onlycss
- Owner: prolific
- Created: 2021-06-12T12:05:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-31T19:01:36.000Z (about 2 years ago)
- Last Synced: 2024-10-01T19:15:34.105Z (about 1 month ago)
- Topics: css, css-framework, css-grid, css3, customizable, modern, seo-friendly
- Language: CSS
- Homepage:
- Size: 30.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# onlycss
Modern CSS framework built ONLY with pure css. No bullshit!
**NPM Installation**
```sh
npm install --save onlycss
```
**USAGE**
You can use any one of the below methods to import the core framework or any part of it.
> 1. Include directly into Javascript or CSS
```js
import "~onlycss/only.css";
```
> 2. Include into HTML via CDN
```html
```
### Structure
```
Sizes: xs, sm, md, lg, xl, xxl
Colors: default, alpha, beta, gamma
```
The css is dynamic which means same set of classes can have different effects based on the other classes they are used with. But they will always mean the same thing i.e. `alpha` will always represent color whereas `lg` will always represent size.
Examples:
1. `lg` class on a text will increase the font size whereas when `lg` class is used in combination with `btn` then it will increase both the button size as well as the font size.
2. `alpha` will change the color of text but when used with `btn`, it will change the colors of button.
### Features
| Feature | We Say
|:------------- |:----------------------------------------------------------------------------- |
| Modular | Just import what you want. |
| Flexbox Based | Isn't it normal? Yes, we also use flexbox. Everybody does. |
| Customizable | Only using pure css variables. We are not being **sass**y about it ;) |
| Responsive | Statistically, most of today's traffic comes from mobile so it is important to build websites that look good everywhere. We follow the **mobile first** approach and our extensive use of variables allow you to customize css as per your needs based on media query. |
| CSS Knowledge| Not required but recommended. Don't be that guy. |
### Ideology
* We **do not** support no code movement. We think everyone should know how to write css if they are working with frontend.
* The purpose of the core framework is to provide you with only the **usual** css required to build a complete website from scratch.
* For special cases that depends on site to site, we recommend writing your own css classes. Framework is fully customizable so overriding the variables for the respective custom class should do the trick in most cases.
* The concept of CSS variables is used in such a way that you can customize the entire framework by just configuring a few variables.