JR css logo

A lightweight responsive css framework

How to use it?

CDN: https://cdn.jsdelivr.net/gh/lufemas/jr-css/jr.css/jr-min.css

Download: JR.css JR.css minified JR.css Source (Sass)

How it works?

Every element that will use JR.css styling needs to have the jr class name

Flex Grid

Twelve columns and fractions.

FULL
HALF
HALF
ELEVEN
ONE
ELEVEN
TWO
TEN
ONE and HALF
TWO and HALF
EIGHT
THREE
NINE
FOUR
EIGHT
FIVE
SEVEN
SIX
SIX
TWELVE

Code:

          <div class="jr col"> <code>FULL</code> </div>


          <div class="jr col-05"> <code>1/2</code> </div>
          <div class="jr col-05"> <code>1/2</code> </div>
          <div class="jr col-11"> <code>ELEVEN</code> </div>
  
          <div class="jr col-1"> <code>ONE</code> </div>
          <div class="jr col-11"> <code>ELEVEN</code> </div>
          
          <div class="jr col-2"> <code>TWO</code> </div>
          <div class="jr col-10"> <code>TEN</code> </div>
  
          <div class="jr col-3"> <code>THREE</code> </div>
          <div class="jr col-9"> <code>NINE</code> </div>
  
          <div class="jr col-4"> <code>FOUR</code> </div>
          <div class="jr col-8"> <code>EIGHT</code> </div>
  
          <div class="jr col-5"> <code>FIVE</code> </div>
          <div class="jr col-7"> <code>SEVEN</code> </div>
  
          <div class="jr col-6"> <code>SIX</code> </div>
          <div class="jr col-6"> <code>SIX</code> </div>
  
          <div class="jr col-12"> <code>TWELVE</code> </div>

Positioning with: .between, .evenly, .around

TWO
BETWEEN
ONE
AROUND
TWO
AROUND
ONE
AROUND
EVENLY
TWO
EVENLY
ONE
EVENLY

Buttons

.button and .button-primary

Colors can be customized by defining these variables at your main styling or diretcly at jr-main.css:

          --jr-text-color: #222;
  
          --jr-btn-primary-color       : rgb(255, 255, 255);
          --jr-btn-hover-primary-color : white;
  
          --jr-btn-primary-bg-color       : rgb(142, 62, 207);
          --jr-btn-hover-primary-bg-color : rgb(110, 45, 163);
  
          --jr-btn-border-primary-color       : rgb(164, 93, 223);
          --jr-btn-hover-border-primary-color : rgb(184, 112, 243);

Links

.link-raw

Cards

.card

This is a card

Use it with wisdom

You can mix all

the classes together.

Even nested

cards

Margin and Padding

To be documented...

  • m-1    = margin: 0 
  • mt-3   = margin-top: 3rem 
  • mb-m-1 = margin-bottom: 1rem (Medium screens) 
  • p-0    = padding: 0 
  • p-l-2  = padding-left: 2rem ( Large screens)
  • .
  • .
  • .

Responsive

To be documented...

					Modifiers:
					-m : Medium screen, from 720px width
					-l : Medium screen, from 1024px width
					.
					.
					.

Display Changing

To be documented...

  • .jr.none-m   = display: none ( Medium screens) 
  • .jr.block   = display: block ( All or small screens) 
  • .jr.inline-block-l   = display: inline-block ( Large screens)
  • .
  • .
  • .