Via CDN
<link rel="stylesheet" href="https://unpkg.com/gorangocss@latest/dist/gorango.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/gorangocss@latest/dist/gorango.min.css" crossorigin="anonymous">
npm i gorangocss
<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>
<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>
<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
<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!
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!
<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.
<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>
<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">
<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>
<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>
Experimental feature.
Coming soon.
<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.
<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.
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6>
<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
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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!
<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!
<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.
<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>