jol

0.1.0 • Public • Published

jol

A simple responsive css library

Usage

<!-- Responsive Width -->
<div class="jol">
	<div class="jol-6 jol-phone-12">A</div>
	<div class="jol-6 jol-phone-12">B</div>
</div>

<!-- Responsive Visibility with Gap -->
<div class="jol-gap">
	<div class="jol-6 jol-phone-12">A</div>
	<div class="jol-6 jol-phone-hide">apple</div>
	<div class="jol-6 jol-phone-12">B</div>
	<div class="jol-6 jol-phone-hide">boy</div>
</div>

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):

.jol /* no gap */
.jol-gap /* with gap */
.jol-gap-2x /* doubled gap */

Columns:

.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

Readme

Keywords

Package Sidebar

Install

npm i jol

Weekly Downloads

3

Version

0.1.0

License

MIT

Unpacked Size

49.7 kB

Total Files

8

Last publish

Collaborators

  • jarvisniu