Vinepaper

General layout

.breath
Breathing (padded from top and bottom)
.rbreath
Right breath (left breath in RTL)
.lbreath
Left breath (right breath in RTL)
.hbreath
Breathing horizontally (right and left pad)
.breathout
Breath for li elements
.hspace
Margin left and right
.lspace
Margin left (right in RTL)
.rspace
Margin right (left in RTL)
.r
float right (left float in RTL)
.l
float left (right float in RTL)
.spaced
Bottom spaced
.doublespaced
twice bottom spaced
.spacedout
Bottom spaced for li elements
.spacetop
Margin top
.padtop
Padding top
.center
equal horizontal margins
.lauto
left auto
.rauto
right auto
.center-content
center content in the middle of a defined width and height
.dinline
display inline-block
.txt-c
Center aligned
.txt-l
Left aligned
.bthin
Bottom bordered, thin
.bthick
Bottom bordered, thick
.bthin-dark
Bottom bordered dark, thin
.bthick-dark
Bottom bordered dark, thick
.clear
Clear both

Grid

c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1
c-1

Auto width

auto
auto
auto

Auto width and spaced

auto
auto
auto

Auto width with gap

auto
auto
auto

Fixed width and spaced

c-5
c-4
c-3
c-9
c-3

Fixed width with auto left

c-5
c-3

Fixed width medium screen

col md-5
col md-4
col md-3

Fixed width large screen

col lg-5
col lg-4
col lg-3

Row breaker

auto
auto
auto
auto

Offsets, for medium screens

offset-md-5 c-2
offset-md-2 c-3

Rows may apply to ul, will carry forward column definition to li's

  • uc-1 row
  • item row
  • item row
  • item row
  • breaker
  • item
  • item
  • item
  • item
  • item

... list for medium screen

  • ucol umd-6
  • ucol umd-6
  • ucol umd-6
  • ucol umd-6

... list for both medium and large screen, spacedout

  • ucol umd-6 ulg-3
  • ucol umd-6 ulg-3
  • ucol umd-6 ulg-3
  • ucol umd-6 ulg-3
  • ucol umd-6 ulg-3
  • ucol umd-6 ulg-3
  • ucol umd-6 ulg-3
  • ucol umd-6 ulg-3

Example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quos, reiciendis laborum nam praesentium non libero tempore quam saepe a eos hic placeat quidem ex dignissimos, ut porro sapiente eum?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, consectetur facere quasi culpa quae enim delectus in molestiae iure, est quo sit. Ducimus repudiandae minus eos sunt obcaecati quae architecto.

Two column grids

This is a simpler grid variation where the first column is defined by g-n (n is 1 to 11) and the second one is an auto width.

g-3
the auto column
g-3
the auto column
g-3
the auto column

Grid basic

where the first column decides how much it would take

xxxxx
the auto column
xxxx
the auto column
xxxxxxxxxx
the auto column

Grid spaced out

g-2
the auto column
g-2
the auto column
g-2
the auto column

Grid spacedout bthin and bthin-dark

g-1 the auto column g-1 the auto column g-1 the auto column

Grid for medium screens

gmd-6 the auto column gmd-6 the auto column gmd-6 the auto column

Grid for large screens

glg-6 the auto column glg-6 the auto column glg-6 the auto column

Special case: dl grid

Name
Value1
Value2
Another item
Value 3

Heights of minheight

h-1
h-2
h-3
h-4
h-5
h-6

Height of li elements

  • uc-1 uh-3
  • uc-1 uh-3
  • uc-1 uh-3
  • uc-1 uh-3

Border bottom

.bthin.spaced
.bthick.spaced
.bthin-dark.spaced
.bthick-dark.spaced

Formatting

  • .weight-bold: Bold
  • .weight-light: Light face font
  • .weight-normal: Normal face font
  • .weight-medium: Medium face font
  • .face-italic: italic
  • .large: Large
  • .larger: Larger
  • .small: Small
  • .smaller: Smaller
  • .red: Red
  • .green: Green
  • .blue: Blue
  • .red-light: Red light
  • .green-light: Green light
  • .blue-light: Blue light
  • .light Light text
  • .lighter Even lighter text

  • .f1: Header 1 Subtext (.f3 .weight-normal .light)

  • .f2: Header 2

  • .f3: Header 3

  • .f4: Header 4

  • .f5: Header 5
  • .f6: Header 6

Label

Box

  • Simple box (padded with radius)
  • yellow
  • yellow light
  • red
  • red light
  • green
  • green light
  • blue
  • blue light
  • grey
  • grey dark
  • grey light
  • white
  • white dark
  • white light

Shadows

  • None
  • box-shadow-shallow
  • box-shadow
  • box-shadow-deep
  • box-shadow-deeper

Radius

box-white box-radius

Card

Simple flexbox card
in one div
another div
With a tail in the end
Just text .valign-center
tail
content vertically directed .card-v
the bottom card
corner

  • sdfsdfsdf sdfsfdsf
    content
  • content
  • content
  • content
  • content

Lists

  • An ".alist"
  • Item
  • Item
  • A border list (.blist)
  • Item
  • Item
  • .rowlist (padded and borded)
  • Item
  • Item
  • Normal list (.normal)
  • Item
  • Item
  1. Normal ordered list (.normal)
  2. Item
  3. Item
  • Nested list (.nestedlist)
  • Item
    • Another nested list
    • Item
      • Item
      • Item
  • comma
  • list
  • of
  • multiple
  • items

Tables

Tabulated (.tabulated)
c-2 c-2 c-2 c-2 *
cell cell cell cell cell
cell cell cell cell cell
cell cell cell cell cell
footer footer footer footer footer
Spacedout and Bordered (.spacedout .bordered)
c-3 c-3 c-3 c-1 *
cl1 cell cell cell cell
cl1 cell cell cell cell
cl1 cell cell cell cell
footer footer footer footer footer
Striped (.striped)
c-3 c-3 c-3 c-1 *
cl1 cell cell cell cell
cl1 cell cell cell cell
cl1 cell cell cell cell
footer footer footer footer footer
Rich (.rich)
c-1 c-1 c-1 c-1 *
cl1 cell cell cell cell
cl1 cell cell cell cell
cl1 cell cell cell cell
footer footer footer footer footer
Responsive (.tresp > table)
cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long cell long

Buttons

Forms

  • Help text
  • Invalid
    Help text

Recreating old styles

Name
Ayyash
Location
Amman
Value
Title
Value
Title

explaination here

Help with question mark here

Checkbox