Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vladocar/basic.css
Basic.css - Classless CSS Starter File
https://github.com/vladocar/basic.css
classless classless-css classless-css-framework css css-framework
Last synced: about 4 hours ago
JSON representation
Basic.css - Classless CSS Starter File
- Host: GitHub
- URL: https://github.com/vladocar/basic.css
- Owner: vladocar
- License: mit
- Created: 2020-05-25T21:22:58.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-30T13:41:55.000Z (almost 4 years ago)
- Last Synced: 2024-11-11T11:04:48.901Z (9 days ago)
- Topics: classless, classless-css, classless-css-framework, css, css-framework
- Language: HTML
- Homepage: https://vladocar.github.io/Basic.css/
- Size: 171 KB
- Stars: 687
- Watchers: 14
- Forks: 27
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://choosealicense.com/licenses/mit/)
[](https://unpkg.com/@vladocar/[email protected]/css/basic.min.css)
Basic.css
=======================================
Classless CSS Starter File
* * *
Basic.css gives you basic CSS formatting and ability to make basic grids with only HTML5 syntax. You can use this project to Set your default styling.
### List of features
* Lightweight 1kb minified and gzipped.
* Basic typography.
* Basic forms.
* Custom colors.
* Dark theme.
* Round corners.
* Flex Grid without classes.
* Flex Grid cards.
Demo: https://vladocar.github.io/Basic.css/
This project uses the best elements from my previous projects:
https://github.com/vladocar/Basic-CSS-Typography-Reset
https://github.com/vladocar/infinity-css-grid
https://github.com/vladocar/Simple-Button
##### You can change root css variables with your color palette:
```css
:root {
--c1:#0074d9;
--c2:#eee;
--c3:#fff;
--c4:#000;
--c5:#fff;
}
```
##### Or adjust the round corners
By default are 8px, use --rc: 0px; if you don't like round corners.
```css
:root {
--rc: 8px;
}
```
##### Override the colors in the dark mode:
```css
@media (prefers-color-scheme: dark) {
:root {
--c2:#333;
--c3:#1e1f20;
--c4:#fff;
}
}
```
##### How you can use the infinity flex grid?
Use the HTML5 tags section and nested section to make flex grid.
```html
1
2
3
1
2
3
4
```
Demo: https://vladocar.github.io/Basic.css/grid.html
Use the HTML5 tags selection and article to make cards.
```html
1
2
3
```
Demo: https://vladocar.github.io/Basic.css/cards.html
#### How to use this project?
Simply download and personalize the **basic.css** file.
Or
```sh
npm i @vladocar/basic.css
```
#### Why should you use this project?
Instead of using CSS Reset you could just Set the basic css formatting and styling. You could even make some grids with the HTML5 tags. Naturally if you want to build something more complex you should use CSS classes and this project works great in combination with other CSS frameworks.
You can also check up some other [Classless CSS Frameworks](https://www.designinspiration.info/classless-css-frameworks/).
### Bonus comic:
Modified text from the original [https://xkcd.com/2309/](https://xkcd.com/2309/)