https://github.com/forthright48/simplecss
A simple css framework using flexbox
https://github.com/forthright48/simplecss
Last synced: 9 months ago
JSON representation
A simple css framework using flexbox
- Host: GitHub
- URL: https://github.com/forthright48/simplecss
- Owner: forthright48
- License: mit
- Created: 2016-06-19T06:29:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-08-13T07:24:52.000Z (over 9 years ago)
- Last Synced: 2025-03-04T19:05:36.405Z (10 months ago)
- Language: HTML
- Size: 34.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SimpleCSS
A simple minimalistic CSS framework that uses flexbox grid.
Please, do not expect anything from the framework, cause I am not sure what I am doing.
## Normalize.css
First of all, include normalize.css file from src in the project to normalize browser behavior. Refer to [Normalize.css](https://necolas.github.io/normalize.css/) for more details.
## Row, Column, Tower and Container
The whole flexbox system depends on the following four classes: `container, tower, row, col`.
'container' is a vertical flex-container. Originally it was a class to determine the width of the site, but later turned into flex only for one reason: sticky footer. The container should be used to create stick-footer only. It should appear right after body tag only and no where else.
In case we need vertical flex-container, we can use `tower`. It is a flex-container and if nested in another container will also act as flex item.
`row` is a horizontal flex-container, which can act as a container if nested.
`item` is flex-item only.
## `one`, `two`, `three` ... `twelve` and `any`
The literal numbers `one`, `two` and such forms the basis of the flex items. `any` means there is no fixed basis, it will dynamically allocate the basis like a normal flexbox.
## Sticky Footer
Based on the article [Sticky Footer](https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/), the following will create sticky footer:
```
```
Note the `u-flex` class on main tag. That class forces the main tag to use up all the empty space around, thus pushing the footer to bottom.