A CSS framework for building custom user interfaces. No JS required!

📦 Download v1.11.0 📚 Documentation

How To Use

Via CDN

Default configuration for CDN build.
<link rel="stylesheet" href="https://unpkg.com/gorangocss@latest/dist/gorango.min.css" crossorigin="anonymous">

Via npm

Install via npm.
npm i gorangocss

Layouts

since 1.8.0

Columns

.columns .column .column--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12} 
  <div class="columns"><div class="column bg--gainsboro rounded--6 pa--1"><kbd>.column</kbd></div><div class="column bg--gainsboro rounded--6 pa--1"><kbd>.column</kbd></div><div class="column bg--gainsboro rounded--6 pa--1"><kbd>.column</kbd></div></div>
  <div class="columns--nogap"><div class="column bg--gainsboro rounded--6 pa--1"><kbd>.column</kbd></div><div class="column bg--gainsboro rounded--6 pa--1"><kbd>.column</kbd></div><div class="column bg--gainsboro rounded--6 pa--1"><kbd>.column</kbd></div><div class="column bg--gainsboro rounded--6 pa--1"><kbd>.column</kbd></div></div>

  <div class="column--1 bg--gainsboro rounded--6 pa--1"><kbd>.column--1</kbd></div>
  <div class="column--2 bg--gainsboro rounded--6 pa--1"><kbd>.column--2</kbd></div>
  <div class="column--3 bg--gainsboro rounded--6 pa--1"><kbd>.column--3</kbd></div>
  <div class="column--4 bg--gainsboro rounded--6 pa--1"><kbd>.column--4</kbd></div>
  <div class="column--5 bg--gainsboro rounded--6 pa--1"><kbd>.column--5</kbd></div>
  <div class="column--6 bg--gainsboro rounded--6 pa--1"><kbd>.column--6</kbd></div>
  <div class="column--7 bg--gainsboro rounded--6 pa--1"><kbd>.column--7</kbd></div>
  <div class="column--8 bg--gainsboro rounded--6 pa--1"><kbd>.column--8</kbd></div>
  <div class="column--9 bg--gainsboro rounded--6 pa--1"><kbd>.column--9</kbd></div>
  <div class="column--10 bg--gainsboro rounded--6 pa--1"><kbd>.column--10</kbd></div>
  <div class="column--11 bg--gainsboro rounded--6 pa--1"><kbd>.column--11</kbd></div>
  <div class="column--12 bg--gainsboro rounded--6 pa--1"><kbd>.column--12</kbd></div>
.column
.column
.column

.column
.column
.column
.column


.column--1

.column--2

.column--3

.column--4

.column--5

.column--6

.column--7

.column--8

.column--9

.column--10

.column--11

.column--12

since 1.8.0

Flex

.flex .flex--{wrap | nowrap | reverse} 
  <div class="flex"><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div></div>

  <div class="flex--wrap"><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div></div>

  <div class="flex--nowrap"><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div></div>

  <div class="flex--reverse"><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div><div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div></div>
Column-1
Column-2
Column-3
Column-4
Column-5
Column-6
Column-7
Column-8
Column-9
Column-10
Column-11
Column-12


Column-1
Column-2
Column-3
Column-4
Column-5
Column-6
Column-7
Column-8
Column-9
Column-10
Column-11
Column-12


Column-1
Column-2
Column-3
Column-4
Column-5
Column-6
Column-7
Column-8
Column-9
Column-10
Column-11
Column-12


Column-1
Column-2
Column-3
Column-4
Column-5
Column-6
Column-7
Column-8
Column-9
Column-10
Column-11
Column-12
since 1.9.0

Hero

.hero 
  <div class="hero bg--info"><div class="hero__content"><div class="container"><p class="hero__title">Title</p><p class="hero__subtitle">Sub Title</p></div></div></div>

Title

Sub Title

Components

since 1.6.0

Badge

.badge .badge--{info | success | warning | danger} 
  <span class="badge bg--navy txt--white">New</span> Badge with Navy color! 
  <span class="badge bg--orchid txt--white">New</span> Badge with Orchid color! 
  <span class="badge bg--aqua">New</span> Badge with Aqua color! 

  <span class="badge bg--dark">New</span> Badge with Dark properties! 
  <span class="badge bg--light">New</span> Badge with Light properties! 

  <span class="badge--info">New</span> Badge with Info properties! 
  <span class="badge--success">New</span> Badge with Success properties! 
  <span class="badge--warning">New</span> Badge with Warning properties! 
  <span class="badge--danger">New</span> Badge with Danger properties!
New Badge with Navy color!
New Badge with Orchid color!
New Badge with Aqua color!

New Badge with Dark properties!
New Badge with Light properties!

New Badge with Info properties!
New Badge with Success properties!
New Badge with Warning properties!
New Badge with Danger properties!
since 1.7.0

Highlight

.highlight--{info | success | warning | danger} 
  GorangoCSS is require <span class="highlight--info">no JS</span> to run! 
  GorangoCSS is require <span class="highlight--success">no JS</span> to run! 
  GorangoCSS is require <span class="highlight--warning">no JS</span> to run! 
  GorangoCSS is require <span class="highlight--danger">no JS</span> to run!
GorangoCSS is require no JS to run!
GorangoCSS is require no JS to run!
GorangoCSS is require no JS to run!
GorangoCSS is require no JS to run!
since 1.7.0

Float

.float--{left | right | none} 
  <p class="float--left">Float left!</p>
  <p class="float--right">Float right!</p>
  <p class="float--none">No float properties.</p>

Float left!


Float right!


No float properties.


since 1.8.0

Card

.card 
  <article class="card shadow--md bg--light pa--1 rounded--5 column--3"><header class="card__header"><h4>Card Title</h4></header><div class="card__content">This is a card example.</div></article>

Card Title

This is a card example.

since 1.9.0

Buttons

.button--{xs | sm | md | lg} 
  <button class="button--xs bg--dark">.button--xs</button>
  <button class="button--sm bg--dark">.button--sm</button>
  <button class="button--md bg--dark">.button--md</button>
  <input type="submit" class="button--lg bg--dark" value=".button--lg">
  <button class="button--xs bg--info">.button--xs</button>
  <button class="button--sm bg--info">.button--sm</button>
  <button class="button--md bg--info">.button--md</button>
  <input type="submit" class="button--lg bg--info" value=".button--lg">
  <button class="button--xs bg--success">.button--xs</button>
  <button class="button--sm bg--success">.button--sm</button>
  <button class="button--md bg--success">.button--md</button>
  <input type="submit" class="button--lg bg--success" value=".button--lg">
  <button class="button--xs bg--warning">.button--xs</button>
  <button class="button--sm bg--warning">.button--sm</button>
  <button class="button--md bg--warning">.button--md</button>
  <input type="submit" class="button--lg bg--warning" value=".button--lg">
  <button class="button--xs bg--danger">.button--xs</button>
  <button class="button--sm bg--danger">.button--sm</button>
  <button class="button--md bg--danger">.button--md</button>
  <input type="submit" class="button--lg bg--danger" value=".button--lg">




since 1.9.0

Notice

.notice--{info | success | warning | danger} 
  <div class="notice--info"><button class="close" aria-label="X"> </button>.notice--info</div>
  <div class="notice--success"><button class="close" aria-label="X"> </button>.notice--success</div>
  <div class="notice--warning"><button class="close" aria-label="X"> </button>.notice--warning</div>
  <div class="notice--danger"><button class="close" aria-label="X"> </button>.notice--danger</div>
.notice--info
.notice--success
.notice--warning
.notice--danger
since 1.10.0

Dropdown

.dropdown 
  <div class="dropdown"><button class="button--md bg--dark">Hover Menu</button><div class="dropdown__menu"><div class="dropdown__content"><div class="dropdown__item"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa.</p></div></div></div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, ipsa.

since 1.10.0

Navbar

Experimental feature.

.navbar 
  Coming soon.
Coming soon.

Utilities

since 1.0.0

Margin

.margin--{ auto | t | r | b | l | a } 
  <p class="mt--4 bg--gainsboro rounded--6 pa--1">Paragraph section with <kbd>.mt--4</kbd> or <kbd>.margin--t--4</kbd> class.</p>
  <p class="margin--r--4 bg--gainsboro rounded--6 pa--1">Paragraph section with <kbd>.mr--4</kbd> or <kbd>.margin--r--4</kbd> class.</p>
  <p class="mb--4 bg--gainsboro rounded--6 pa--1">Paragraph section with <kbd>.mb--4</kbd> or <kbd>.margin--b--4</kbd> class.</p>
  <p class="margin--l--4 bg--gainsboro rounded--6 pa--1">Paragraph section with <kbd>.ml--4</kbd> or <kbd>.margin--l--4</kbd> class.</p>
  <p class="ma--4 bg--gainsboro rounded--6 pa--1">Paragraph section with <kbd>.ma--4</kbd> or <kbd>.margin--4</kbd> class.</p>

Paragraph section with .mt--4 or .margin--t--4 class.


Paragraph section with .mr--4 or .margin--r--4 class.


Paragraph section with .mb--4 or .margin--b--4 class.


Paragraph section with .ml--4 or .margin--l--4 class.


Paragraph section with .ma--4 or .margin--4 class.


since 1.0.0

Padding

.padding--{ t | r | b | l | a }--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10} 
  <div class="pt--4 bg--plum rounded--6"><p class="bg--gainsboro pa--1">Paragraph section with <kbd>.pt--4</kbd> or <kbd>.padding--t--4</kbd> class.</p></div>
  <div class="pr--4 bg--plum rounded--6"><p class="bg--gainsboro pa--1">Paragraph section with <kbd>.pr--4</kbd> or <kbd>.padding--r--4</kbd> class.</p></div>
  <div class="pb--4 bg--plum rounded--6"><p class="bg--gainsboro pa--1">Paragraph section with <kbd>.pb--4</kbd> or <kbd>.padding--b--4</kbd> class.</p></div>
  <div class="pl--4 bg--plum rounded--6"><p class="bg--gainsboro pa--1">Paragraph section with <kbd>.pl--4</kbd> or <kbd>.padding--l--4</kbd> class.</p></div>
  <div class="pa--4 bg--plum rounded--6"><p class="bg--gainsboro pa--1">Paragraph section with <kbd>.pa--4</kbd> or <kbd>.padding--4</kbd> class.</p></div>

Paragraph section with .pt--4 or .padding--t--4 class.


Paragraph section with .pr--4 or .padding--r--4 class.


Paragraph section with .pb--4 or .padding--b--4 class.


Paragraph section with .pl--4 or .padding--l--4 class.


Paragraph section with .pa--4 or .padding--4 class.


since 1.5.0

Background Color

.bg--{colorName} 
  <div class="bg--navy rounded--5 pa--2 txt--white">.bg--navy</div>
  <div class="bg--orchid rounded--5 pa--2">.bg--orchid</div>
  <div class="bg--aqua rounded--5 pa--2">.bg--aqua</div>
.bg--navy

.bg--orchid

.bg--aqua

.bg--{dark | light} 
  <div class="bg--dark rounded--5 pa--2">.bg--dark</div>
  <div class="bg--dark--gradient rounded--5 pa--2">.bg--dark--gradient</div>
  <div class="bg--light rounded--5 pa--2">.bg--light</div>
.bg--dark

.bg--dark--gradient

.bg--light

.bg--{info | success | warning | danger} 
  <div class="bg--info rounded--5 pa--2">.bg--info</div>
  <div class="bg--info--gradient rounded--5 pa--2">.bg--info--gradient</div>
  <div class="bg--success rounded--5 pa--2">.bg--success</div>
  <div class="bg--success--gradient rounded--5 pa--2">.bg--success--gradient</div>
  <div class="bg--warning rounded--5 pa--2">.bg--warning</div>
  <div class="bg--warning--gradient rounded--5 pa--2">.bg--warning--gradient</div>
  <div class="bg--danger rounded--5 pa--2">.bg--danger</div>
  <div class="bg--danger--gradient rounded--5 pa--2">.bg--danger--gradient</div>
.bg--info

.bg--info--gradient

.bg--success

.bg--success--gradient

.bg--warning

.bg--warning--gradient

.bg--danger

.bg--danger--gradient

.bg--black--{10 | 20 | 30 | 40 | 50} 
  <div class="bg--black rounded--5 pa--2 txt--white">.bg--black</div>
  <div class="bg--black--10 rounded--5 pa--2 txt--white">.bg--black--10</div>
  <div class="bg--black--20 rounded--5 pa--2 txt--white">.bg--black--20</div>
  <div class="bg--black--30 rounded--5 pa--2 txt--white">.bg--black--30</div>
  <div class="bg--black--40 rounded--5 pa--2 txt--white">.bg--black--40</div>
  <div class="bg--black--50 rounded--5 pa--2 txt--white">.bg--black--50</div>
.bg--black

.bg--black--10

.bg--black--20

.bg--black--30

.bg--black--40

.bg--black--50

Border

since 1.5.0
Border Properties
.border--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10} 
  <div class="border--1 bg--gainsboro rounded--6 pa--2">.border--1</div>
  <div class="border--5 bg--gainsboro rounded--6 pa--2">.border--5</div>
  <div class="border--10 bg--gainsboro rounded--6 pa--2">.border--10</div>
.border--1

.border--5

.border--10

.border--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10} 
  <div class="border--t--5 bg--gainsboro rounded--6 pa--2">.border--t--5</div>
  <div class="border--r--5 bg--gainsboro rounded--6 pa--2">.border--r--5</div>
  <div class="border--b--5 bg--gainsboro rounded--6 pa--2">.border--b--5</div>
  <div class="border--l--5 bg--gainsboro rounded--6 pa--2">.border--l--5</div>
.border--t--5

.border--r--5

.border--b--5

.border--l--5

since 1.7.0

Rounded Border Properties

.rounded--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | full} 
  <div class="rounded--1 bg--gainsboro pa--2">.rounded--1</div>
  <div class="rounded--5 bg--gainsboro pa--2">.rounded--5</div>
  <div class="rounded--10 bg--gainsboro pa--2">.rounded--10</div>
  <div class="rounded--full bg--gainsboro pa--2">.rounded--full</div>
.rounded--1

.rounded--5

.rounded--10

.rounded--full

.rounded--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10} 
  <div class="rounded--t--10 bg--gainsboro pa--2">.rounded--t--10</div>
  <div class="rounded--r--10 bg--gainsboro pa--2">.rounded--r--10</div>
  <div class="rounded--b--10 bg--gainsboro pa--2">.rounded--b--10</div>
  <div class="rounded--l--10 bg--gainsboro pa--2">.rounded--l--10</div>
.rounded--t--10

.rounded--r--10

.rounded--b--10

.rounded--l--10

Typography

since 1.7.0
Headers
h1 - h6 
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <h3>Header 3</h3>
  <h4>Header 4</h4>
  <h5>Header 5</h5>
  <h6>Header 6</h6>

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
since 1.8.0
Font Size
.font--{xs | sm | md | lg | xl | xxl} 
  <p class="font--xs">.font--xs</p>
  <p class="font--sm">.font--sm</p>
  <p class="font--md">.font--md</p>
  <p class="font--lg">.font--lg</p>
  <p class="font--xl">.font--xl</p>
  <p class="font--xxl">.font--xxl</p>

.font--xs

.font--sm

.font--md

.font--lg

.font--xl

.font--xxl

since 1.4.0
Font Weight
.hairline .font--hairline .font--100 
  <span class="hairline">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--hairline">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--100">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!
.xlight .font--xlight .font--200 
  <span class="xlight">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--xlight">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--200">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!
.light .font--light .font--300 
  <span class="light">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--light">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--300">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!
.regular .font--regular .font--400 
  <span class="regular">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--regular">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!
.medium .font--medium .font--500 
  <span class="medium">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--medium">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--500">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!
.semibold .font--semibold .font--600 
  <span class="semibold">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--semibold">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!
.bold .font--bold .font--700 
  <span class="bold">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--bold">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--700">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!
.xbold .font--xbold .font--800 
  <span class="xbold">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--xbold">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--800">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!
.heavy .font--heavy .font--900 
  <span class="heavy">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--heavy">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
  <span class="font--900">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!</span>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, quae!
since 1.5.0
Text Color
.txt--{colorName} 
  <p class="txt--navy">Text with Navy color!</p>
  <p class="txt--orchid">Text with Orchid color!</p>
  <p class="txt--aqua">Text with Aqua color!</p>

Text with Navy color!

Text with Orchid color!

Text with Aqua color!

since 1.7.0
Text Align
.txt--{left | center | right} .{left | center | right} 
  <p class="left">Text with Left alignment!</p>
  <p class="center">Text with Center alignment!</p>
  <p class="right">Text with Right alignment!</p>

  <p class="txt--left">Text with Left alignment!</p>
  <p class="txt--center">Text with Center alignment!</p>
  <p class="txt--right">Text with Right alignment!</p>

Text with Left alignment!

Text with Center alignment!

Text with Right alignment!


Text with Left alignment!

Text with Center alignment!

Text with Right alignment!

since 1.7.0
Text Transform
.txt--{upper | lower | capital} .{upper | lower | capital} 
  <p class="upper">Transformed to uppercase.</p>
  <p class="lower">Transformed to lowercase.</p>
  <p class="capital">Transform first letter in each words to uppercase.</p>

  <p class="txt--upper">Transformed to uppercase.</p>
  <p class="txt--lower">Transformed to lowercase.</p>
  <p class="txt--capital">Transform first letter in each words to uppercase.</p>

Transformed to uppercase.

Transformed to lowercase.

Transform first letter in each words to uppercase.


Transformed to uppercase.

Transformed to lowercase.

Transform first letter in each words to uppercase.

since 1.7.0

Shadow

.shadow--{xs | sm | md | lg | xl | inner | 0 } 
  <div class="shadow--xs bg--whitesmoke rounded--6 pa--2">.shadow--xs</div>
  <div class="shadow--sm bg--whitesmoke rounded--6 pa--2">.shadow--sm</div>
  <div class="shadow bg--whitesmoke rounded--6 pa--2">.shadow</div>
  <div class="shadow--md bg--whitesmoke rounded--6 pa--2">.shadow--md</div>
  <div class="shadow--lg bg--whitesmoke rounded--6 pa--2">.shadow--lg</div>
  <div class="shadow--xl bg--whitesmoke rounded--6 pa--2">.shadow--xl</div>
  <div class="shadow--inner bg--whitesmoke rounded--6 pa--2">.shadow--inner</div>
  <div class="shadow--0 bg--whitesmoke rounded--6 pa--2">.shadow--0</div>
.shadow--xs

.shadow--sm

.shadow

.shadow--md

.shadow--lg

.shadow--xl

.shadow--inner

.shadow--0