https://github.com/jarvisniu/jol
a simple responsive css library
https://github.com/jarvisniu/jol
css library responsive
Last synced: about 1 month ago
JSON representation
a simple responsive css library
- Host: GitHub
- URL: https://github.com/jarvisniu/jol
- Owner: jarvisniu
- License: mit
- Created: 2018-12-29T15:06:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-13T09:30:15.000Z (over 7 years ago)
- Last Synced: 2025-02-04T20:05:55.912Z (over 1 year ago)
- Topics: css, library, responsive
- Language: CSS
- Size: 28.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jol
A simple responsive css library
# Usage
```html
A
B
A
apple
B
boy
```
# Content
Includes responsive:
- width
- gap
- visibility
Limitations:
- Mixing with fixed widths and percent widths is not supported. Use flex instead!
Attentions:
- Do not apply `padding` to the container and `margin` to the columns.
# Docs
## Containers (Rows):
``` css
.jol /* no gap */
.jol-gap /* with gap */
.jol-gap-2x /* doubled gap */
```
## Columns:
```css
.jol-3 /* a quarter width by default (12 based) */
.jol-tablet-1-2 /* but halt width on tablet (2 based) */
.jol-phone-12 /* and full width on phone */
.jol-watch-hide /* then hide on watch */
```
## Device Widths
```
desktop: default
laptop: < 1800px
tablet: < 1200px
phone: < 600px
watch: < 300px
```
## Width bases
- 12 (default)
- 6
- 5
- 4
- 3
- 2
- 1
## Visibility
- show
- hide
# License
MIT