This is a nice forest. What do you want to do with it?
Drax CSS Documentations
These docs contains all of the components available with pure css without using any javascript. Go and see how the contents look on any of your devices.
# Grid
The main approach is mobile-first layout, using flexbox as main display. There are two kind of grid system by flexbox, it is row and column. Row is the parent of horizontaly child elements and Column is the vertically children elements.
Row Grid System
Grid system can be divided into 12 sets of columns, use it horizontally with parent class .row with any tags element for child. By default row class will be set as unlimited child equaly size each row, as long as the size is sufficient otherwise the rest child will be wrapped.
.row1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
1
2
3
4
5
6
1
2
3
4
5
1
2
3
4
1
2
3
1
2
1
<div class="row"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </div> <div class="row twelve"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> <div class="row eleven"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> </div> <div class="row ten"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> <div class="row nine"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> <div class="row eight"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> <div class="row seven"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </div> <div class="row six"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <div class="row five"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="row four"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="row three"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="row two"> <div>1</div> <div>2</div> </div> <div class="row one"> <div>1</div> </div>
Column Grid System
Different with row, column make it possible to vertically child elements with parent class .column. Same with row, without classes the element will grow and shrink to fit the entire container.
.column
.column.twelve
.column.six
.column.twelve
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
<div class="column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </div> <div class="column twelve"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> <div class="column six"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> <div class="column twelve"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
Expand child
To expand remainder child content can be done with .grow on row or column container. For columns, expanding children only works if you set the element height.
1
2
3
4
5
Expand specific child only use parent class name like .three following column span number.
1
.xs-2
3
4
5
Lazy expand with .fill to fit single row.
1
.fill
.fill
1
Expanding column
.fill
1
<div class="row three grow"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="row three center"> <div>1</div> <div class="xs-2">.xs-2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="row three center"> <div>1</div> <div class="fill">.fill</div> </div> <div class="row three center"> <div class="fill">.fill</div> <div>1</div> </div> <div class="column four" style="height:100px"> <div class="fill">.fill</div> <div>1</div> </div>
Align child items
You can align child content left, center, right and justify. Put these classes on parent container.
.start1
2
3
1
2
3
1
2
3
1
2
3
<div class="row five start"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="row five center"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="row five end"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="row five justify"> <div>1</div> <div>2</div> <div>3</div> </div>
# Responsive
The main approach is mobile-first layout, using flexbox as main display. There are two kind of grid system by flexbox, it is row and column. Row is the parent of horizontaly child elements and Column is the vertically parent of children elements.
Container
Main grid container contains about 5 sizes grid-sm, grid-md, grid-lg, grid-xl and grid for fluid width.
| Grid Classname | <576px | ≥576px | ≥768px | ≥960px | ≥1200px |
|---|---|---|---|---|---|
| grid-sm | 100% | 576px | 576px | 576px | 576px |
| grid-md | 100% | 100% | 768px | 768px | 768px |
| grid-lg | 100% | 100% | 100% | 960px | 960px |
| grid-xl | 100% | 100% | 100% | 100% | 1200px |
| grid | 100% | 100% | 100% | 100% | 100% |
Responsive Row
We follow a mobile-first design. Put the number of columns for mobile as explained in the previous point. Then, when things get too stretched, add a column counter with screen classes sm, md, lg and xl. By default counter name is marked as xs.
.one .two-sm .three-md .four-lg .five-xl1
2
3
4
5
6
7
8
9
10
Column number from previous section can be used to follow their parent in responsive design.
.one .two-sm .three-md .four-lg .five-xl.sm-1
.sm-2
.lg-2 .md-3
.xl-3
.xs-3 .fill
<div class="row one two-sm three-md four-lg five-xl"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> <div class="row one two-sm three-md four-lg five-xl"> <div class="sm-1">.sm-1</div> <div class="sm-2">.sm-2</div> <div class="lg-2 md-3">.lg-2 .md-3</div> <div class="xl-3">.xl-3</div> <div class="xs-3 fill">.xs-3 .fill</div> </div>
# Navbar
Horizontal navbar
Navbar
# Typography
Hey font, you're so unique. why keeping we you restricted, feel free to explore or add external font. just put your font class on the body tag then you're done
Displays
Captivate your user with huge fonts
Display 1 .display-1 60px
Display 2 .display-2 54px
Display 3 .display-3 48px
<p class="display-1">Display 1</p> <p class="display-2">Display 2</p> <p class="display-3">Display 3</p>
Headings
Daily h1 to H6 style
Heading 1 H1 .h1 40px
Heading 2 H2 .h2 32px
Heading 3 H3 .h3 28px
Heading 4 H4 .h4 24px
Heading 5 H5 .h5 20px
Heading 6 H6 .h6 16px
<h1>Heading 1</h1> or <p class="h1">Heading 1</p> <h2>Heading 2</h2> or <p class="h2">Heading 2</p> <h3>Heading 3</h3> or <p class="h3">Heading 3</p> <h4>Heading 4</h4> or <p class="h4">Heading 4</p> <h5>Heading 5</h5> or <p class="h5">Heading 5</p> <h6>Heading 6</h6> or <p class="h6">Heading 6</p>
Paragraph
Enough with heading, lets try paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. p .extra-large 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. p .large 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. p .medium 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. small .small 80%
<p class="extra-large"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. </p> <p class="large"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. </p> <p class="medium"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. </p> <p class="small"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. </p>
Semantic Text
Another bunch of quote code
I18N abbr
Bold b
Citation cite
Hello world! codeAnother hello!pre
Emphasis em
Italic i
Inserted ins
Ctrl + S kbd
Highlighted mark
Sample samp
Text Subscripted sub
Text Supscripted sup
time
Underline u
x = y + 2 var
<abbr title="Internationalization">I18N</abbr> <b>Bold</b> <cite>Citation</cite> <code>Hello world!</code> <pre class="inline">Another hello!</pre> <del>Delete</del> <em>Emphasis</em> <i>Italic</i> <ins>Inserted</ins> <kbd>Ctrl + S</kbd> <mark>Highlighted</mark> <s>Strikethrough</s> <samp>Sample</samp> Text <sub>Subscripted</sub> Text <sup>Supscripted</sup> <time>20:00</time> <u>Underline</u> <var>x = y + 2 </var>
Blockquote
This is quote blockquote
from bla
<blockquote> <p>This is quote <span class="text-info">blockquote</span></p> <cite>from bla</cite> </blockquote>
Lists
All list available
- list item 1
- list item 2
- list item 2.1
- list item 2.2
- list item 2.3
- list item 3
- list item 1
- list item 2
- list item 2.1
- list item 2.2
- list item 2.3
- list item 3
- description list term 1
- description list description 1
- description list term 2
- description list description 2
- description list term 3
- description list description 3
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2.1</li>
<li>list item 2.2</li>
<li>list item 2.3</li>
</ul>
</li>
<li>list item 3</li>
</ul>
<ol>
<li>list item 1</li>
<li>list item 2
<ol>
<li>list item 2.1</li>
<li>list item 2.2</li>
<li>list item 2.3</li>
</ol>
</li>
<li>list item 3</li>
</ol>
<dl>
<dt>description list term 1</dt>
<dd>description list description 1</dd>
<dt>description list term 2</dt>
<dd>description list description 2</dd>
<dt>description list term 3</dt>
<dd>description list description 3</dd>
</dl> # Colors
Looking for background colors, lets try it.
Components Colors
.primary .secondary .info .success .warning .error
<span class="primary">.primary</span> <span class="secondary">.secondary</span> <span class="info">.info</span> <span class="success">.success</span> <span class="warning">.warning</span> <span class="error">.error</span>
All Background Colors
Not enough? Here the complete set of background colors
.primary or .blue
.secondary or .purple
.info or .teal
.success or .green
.warning or .yellow
.error or .red
.muted or .gray
.navy
.aqua
.olive
.orange
.pink
.maroon
.white
.silver
.black
.secondary or .purple
.info or .teal
.success or .green
.warning or .yellow
.error or .red
.muted or .gray
.navy
.aqua
.olive
.orange
.pink
.maroon
.white
.silver
.black
<span class="primary">.primary</span> or <span class="blue">.blue</span> <span class="secondary">.secondary</span> or <span class="purple">.purple</span> <span class="info">.info</span> or <span class="teal">.teal</span> <span class="success">.success</span> or <span class="green">.green</span> <span class="warning">.warning</span> or <span class="yellow">.yellow</span> <span class="error">.error</span> or <span class="red">.red</span> <span class="muted">.muted</span> or <span class="gray">.gray</span> <span class="navy">.navy</span> <span class="aqua">.aqua</span> <span class="olive">.olive</span> <span class="orange">.orange</span> <span class="pink">.pink</span> <span class="maroon">.maroon</span> <span class="white text-black">.white</span> <span class="silver text-black">.silver</span> <span class="black">.black</span>
All Text Color Classes
Don't worry, we have the sets of text colors classes too.
.text-primary or .text-blue
.text-secondary or .text-purple
.text-info or .text-teal
.text-success or .text-green
.text-warning or .text-yellow
.text-error or .text-red
.text-muted or .text-gray
.text-navy
.text-aqua
.text-olive
.text-orange
.text-pink
.text-maroon
.text-white
.text-silver
.text-black
.text-secondary or .text-purple
.text-info or .text-teal
.text-success or .text-green
.text-warning or .text-yellow
.text-error or .text-red
.text-muted or .text-gray
.text-navy
.text-aqua
.text-olive
.text-orange
.text-pink
.text-maroon
.text-white
.text-silver
.text-black
<span class="text-primary">.text-primary</span> or <span class="text-blue">.text-blue</span> <span class="text-secondary">.text-secondary</span> or <span class="text-purple">.text-purple</span> <span class="text-info">.text-info</span> or <span class="text-teal">.text-teal</span> <span class="text-success">.text-success</span> or <span class="text-green">.text-green</span> <span class="text-warning">.text-warning</span> or <span class="text-yellow">.text-yellow</span> <span class="text-error">.text-error</span> or <span class="text-red">.text-red</span> <span class="text-muted">.text-muted</span> or <span class="text-gray">.text-gray</span> <span class="text-navy">.text-navy</span> <span class="text-aqua">.text-aqua</span> <span class="text-olive">.text-olive</span> <span class="text-orange">.text-orange</span> <span class="text-pink">.text-pink</span> <span class="text-maroon">.text-maroon</span> <span class="text-white gray">.text-white</span> <span class="text-silver">.text-silver</span> <span class="text-black">.text-black</span>
# Labels
Label is inline class to inform something more captivate to look inside any element.
Label default classes
To use label put class .label inside any inline elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. label .primary Duis quis sodales risus. Etiam euismod ornare consequat.
- list item 1 .label .success
- list item 2
- list item 2.1 .label .secondary
- list item 2.2 .label .info
- list item 2.3
- list item 3
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
<span class="label">label .primary</span> Duis quis sodales risus. Etiam euismod ornare consequat.
</p>
<ul>
<li>list item 1 <span class="label success">.label .success</span> </li>
<li>list item 2
<ul>
<li>list item 2.1 <span class="label secondary">.label .secondary</span> </li>
<li>list item 2.2 <span class="label info">.label .info</span> </li>
<li>list item 2.3</li>
</ul>
</li>
<li>list item 3</li>
</ul> # Tables
Tables include default styles for tables and data sets.
Default Table Styles
Default table are .condensed and .hovered.
| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
<table>
<thead>
<tr>
<th>Name</th>
<th>Genre</th>
<th>Release date</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Shawshank Redemption</td>
<td>Crime, Drama</td>
<td>14 October 1994</td>
</tr>
<tr>
<td>The Godfather</td>
<td>Crime, Drama</td>
<td>24 March 1972</td>
</tr>
<tr>
<td>Schindler`s List</td>
<td>Biography, Drama, History</td>
<td>4 February 1994</td>
</tr>
<tr>
<td>Se7en</td>
<td>Crime, Drama, Mystery</td>
<td>22 September 1995</td>
</tr>
</tbody>
</table> Customize Table Styles
To increase table padding size, use .table-lg or .table-xl .
.table-lg
| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
.table-xl
| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
To turn hover off put .nohover on the table tag.
| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
Add striped background with .striped.
| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
# Forms
Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
Form Input
<label>Input Text</label> <input type="text" placeholder="Input Text"> <label>Input Password</label> <input type="password" placeholder="Input Password"> <label>Input Email</label> <input type="email" placeholder="Input Email"> <label>Input Number</label> <input type="number" placeholder="Input Number"> <label>Input Color</label> <input type="color"/> <label>Input Date</label> <input type="date"/> <label>Input Range</label> <input type="range"/> <label>Input File</label> <input type="file"/>
Form Textarea
<label>Textarea</label> <textarea placeholder="Textarea Message"></textarea>
Form Radio
<label> <input type="radio" name="radiodemo"> <span class="checkable">Select me</span> </label> <br> <label> <input type="radio" name="radiodemo" checked> <span class="checkable">Or me</span> </label>
Form Checkbox
<label> <input type="checkbox" name=""> <span class="checkable">Select me</span> </label> <br> <label> <input type="checkbox" checked> <span class="checkable">Select me too</span> </label>
Form Select
<label>Select an option</label>
<select>
<optgroup label="Select one">
<option>Select A</option>
<option>Select B</option>
<option>Select C</option>
<option>Select D</option>
</optgroup>
</select>
<label>Select multiple options</label>
<select multiple>
<option>Select A</option>
<option>Select B</option>
<option>Select C</option>
<option>Select D</option>
<option>Select D</option>
</select> Form Search
<label>Select an option</label>
<div class="input" contenteditable>
<div class="label maroon" contenteditable="false">
<img alt=""> Selected <span class="close">×</span>
</div>
<div class="label maroon" contenteditable="false">
<img alt=""> Selected <span class="close">×</span>
</div>
<div class="label maroon" contenteditable="false">
<img alt=""> Selected <span class="close">×</span>
</div>
</div> Form Example
Contact Form box
<form class="row gap one two-md">
<div>
<label>Fullname</label>
<input placeholder="Full name">
<label>Email</label>
<input type="email" placeholder="Email">
<label>Upload file</label>
<input type="file">
<label>Select an option</label>
<select>
<optgroup label="Select one">
<option>Select A</option>
<option>Select B</option>
<option>Select C</option>
<option>Select D</option>
</optgroup>
</select>
</div>
<div class="md-2 p-0">
<label>Message</label>
<textarea placeholder="Message"></textarea>
</div>
<div>
<label>
<input type="checkbox" checked>
<span class="checkable">Agree</span>
</label>
<br>
<input type="reset" value="Clear" class="silver text-black">
<input type="submit" value="Submit">
</div>
</form> # Accordion
Bla bla
Pure CSS Accordion
Yes, it is possible to enable accordion effect using only pure CSS script with radio inputs hack. However the markup will not look so pretty, but it works. Just try it ;D
Accordion Content A
Accordion Content B
Accordion Content C
HTML Markup
<div class="accordion">.
<div>
<input type="radio" name="accordion" id="accordion-1" checked>
<label for="accordion-1" class="text-maroon">Accordion A</label>
<section>
<p>
Accordion Content A
</p>
</section>
</div>
<div>
<input type="radio" name="accordion" id="accordion-2">
<label for="accordion-2" class="text-maroon">Accordion B</label>
<section>
<p>
Accordion Content B
</p>
</section>
</div>
<div>
<input type="radio" name="accordion" id="accordion-3">
<label for="accordion-3" class="text-maroon">Accordion C</label>
<section>
<p>
Accordion Content C
</p>
</section>
</div>
</div> JS Accordion
Too lazy setting each ids in label form? If javascript is possible for you, all it need only put .active class inside direct children from accordion class. See example script below.
HTML Markup
<div class="accordion">
<div class="active">
<a class="text-maroon" data-accordion>Accordion A</a>
<section>
<p>
Accordion Content A
</p>
</section>
</div>
<div>
<a class="text-maroon" data-accordion>Accordion B</a>
<section>
<p>
Accordion Content B
</p>
</section>
</div>
<div>
<a class="text-maroon" data-accordion>Accordion C</a>
<section>
<p>
Accordion Content C
</p>
</section>
</div>
</div> Vanilla JS
var accordions=document.querySelectorAll('[data-accordion]');
for(var i=accordions.length; i-- > 0;){
// Add click listener each element that has data-accordion
accordions[i].addEventListener('click',function(ev){
var target=this.parentNode,
siblings=target.parentNode.children;
// Set all inactive
for(var i=siblings.length;i-->0;){
siblings[i].classList.remove('active')
}
// Set current as active
target.classList.add('active')
})
} # Avatar
Bla bla
Basic Avatar
Avatar circling the image, resize this using font class as well .small, .large, .extra-large.
.avatar.small
.avatar
.avatar.large
.avatar.extra-large
HTML Markup <img src="/src/img/avatar.png" class="avatar small"> <img src="/src/img/avatar.png" class="avatar"> <img src="/src/img/avatar.png" class="avatar large"> <img src="/src/img/avatar.png" class="avatar extra-large">
# Badge
Bla bla
Basic Badge
Add small pointing labels over top-right element using .badge class.
Notification
HTML Markup <span class="badge" data-badge=""> Notification </span> <br> <button class="badge" data-badge="50"> Badge </button> <br> <span class="badge avatar extra-large" data-badge="80"> <img src="/src/img/avatar.png"> </span> <span class="badge avatar large" data-badge="80"> <img src="/src/img/avatar.png"> </span> <span class="badge avatar" data-badge="80"> <img src="/src/img/avatar.png"> </span> <span class="badge avatar small" data-badge="80"> <img src="/src/img/avatar.png"> </span>
# Cards
Cards are flexible content containers.
Basic Card
Add a container element with the card class. Child element is semantic html tags, header, section and footer. The image can be placed in any position.
Header
Can be collapsed too..
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...
HTML Markup
<article class="card">
<img src="/src/img/forest.jpg">
<p>This is a nice forest. What do you want to do with it?</p>
</article>
<article class="card">
<header>
<h3>Header</h3>
</header>
<section>Content.. Lorem ipsum dolor sit amet, consectetur adipiscing elit</section>
<footer>
Footer!
</footer>
</article>
<input type="checkbox" id="cardtoggle">
<article class="card">
<p>Can be collapsed too..<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
<label for="cardtoggle" class="close">×</label>
</article> # Carousel
Pure CSS Carousel
HTML Markup <div class="carousel"> <input id="slide-1" type="radio" name="carousel" checked> <input id="slide-2" type="radio" name="carousel"> <input id="slide-3" type="radio" name="carousel"> <input id="slide-4" type="radio" name="carousel"> <section> <div> <img src="/src/img/forest.jpg"> </div> <div> <img src="/src/img/space.jpg"> </div> <div> <img src="/src/img/forest.jpg"> </div> <div> <img src="/src/img/space.jpg"> </div> </section> <div class="indicators"> <label for="slide-1">1</label> <label for="slide-2">2</label> <label for="slide-3">3</label> <label for="slide-4">4</label> </div> </div>
JS Carousel
HTML Markup <div class="carousel"> <section> <div class="active"> <img src="/src/img/forest.jpg"> </div> <div> <img src="/src/img/space.jpg"> </div> <div> <img src="/src/img/forest.jpg"> </div> <div> <img src="/src/img/space.jpg"> </div> </section> <div class="indicators"> <a data-carousel class="active">1</a> <a data-carousel>2</a> <a data-carousel>3</a> <a data-carousel>4</a> </div> </div>
Vanilla JS
var carousel=document.querySelectorAll('[data-carousel]');
for(var i=carousel.length;i-->0;){
// Add click listener each element that has data-carousel
carousel[i].addEventListener('click',function(ev){
var target=this.parentNode,
indicators=target.children,
index=Array.prototype.indexOf.call(indicators,this),
contents=target.parentNode.querySelector('section').children;
// Set all indicator and content as inactive
for(var i=0;i<contents.length;i++){
indicators[i].classList.remove('active')
contents[i].classList.remove('active')
}
// Set current target index as active
indicators[index].classList.add('active')
contents[index].classList.add('active')
})
} # Collapse
# Dropdowns
Pure CSS Dropdowns
# Lightbox
Lightbox is a modal specifically for image gallery
Pure CSS Lightbox
HTML Markup
<label for="lightbox-forest" class="lightbox-indicator">
<img src="/src/img/forest.jpg">
</label>
<label for="lightbox-space" class="lightbox-indicator">
<img src="/src/img/space.jpg">
</label>
<div class="lightbox">
<input id="lightbox-forest" type="checkbox"/>
<label for="lightbox-forest" class="overlay"></label>
<article>
<img src="/src/img/forest.jpg">
</article>
</div>
<div class="lightbox">
<input id="lightbox-space" type="checkbox"/>
<label for="lightbox-space" class="overlay"></label>
<article>
<img src="/src/img/space.jpg">
</article>
</div> JS lightbox
JS Lightbox is using signature data-lightbox followed with element id as target
HTML Markup
<img src="/src/img/forest.jpg" data-lightbox="#lightbox-forest-js">
<img src="/src/img/space.jpg" data-lightbox="#lightbox-space-js">
<div class="lightbox" id="lightbox-forest-js">
<article>
<img src="/src/img/forest.jpg">
</article>
</div>
<div class="lightbox" id="lightbox-space-js">
<article>
<img src="/src/img/space.jpg">
</article>
</div> Vanilla JS
var lightbox=document.querySelectorAll('[data-lightbox]');
for(var i=lightbox.length; i-- > 0;){
// Add click listener each element that has data-lightbox
lightbox[i].addEventListener('click',function(ev){
var box=document.querySelector(this.dataset.lightbox)
box.classList.add('active')
// Add click event listener overlay background
box.addEventListener('click',function resetbox(ev){
if(ev.target.classList.contains('lightbox')){
box.classList.remove('active')
// Prevent adding same event listener
box.removeEventListener('click',resetbox)
}
})
})
} # Modal
Bla bla
Pure CSS Modal
Great offer
HTML Markup
<label for="modal-popup" class="button">Open Modal</label>
<div class="modal">
<input id="modal-popup" type="checkbox"/>
<label for="modal-popup" class="overlay"></label>
<article>
<header>
<h3>Great offer</h3>
<label for="modal-popup" class="close">×</label>
</header>
<section class="content">
We have a special offer for you. I am sure you will love it! However this does look spammy...
</section>
<footer>
<a class="button" href="#">See offer</a>
<label for="modal-popup" class="button error">
Cancel
</label>
</footer>
</article>
</div>JS Modal
Great offer
×HTML Markup
<button data-modal="#modal-popup-js">Open Modal</button>
<div class="modal" id="modal-popup-js">
<article>
<header>
<h3>Great offer</h3>
<a class="close">×</a>
</header>
<section class="content">
We have a special offer for you. I am sure you will love it!
</section>
<footer>
<a class="button" href="#">See offer</a>
<button class="error close">
Cancel
</button>
</footer>
</article>
</div> Vanilla JS
var modals=document.querySelectorAll('[data-modal]');
for(var i=modals.length; i-- > 0;){
// Add click listener each element that has data-lightbox
modals[i].addEventListener('click',function(ev){
var box=document.querySelector(this.dataset.modal)
box.classList.add('active')
// Add click event listener overlay background
box.addEventListener('click',function resetbox(ev){
// Listen if overlay background or close button
if(ev.target.classList.contains('modal') || ev.target.classList.contains('close')){
box.classList.remove('active')
// Prevent adding same event listener
box.removeEventListener('click',resetbox)
}
})
})
} # Steps
Steps are progress indicators of a sequence of task steps.
Basic Steps
HTML Markup
# Tabs
Bla bla
Pure CSS Tabs
Just like Accordion did, tabs are radioable. You can put button toggle anywhere outside tabs container using label for but the indicator wont show up nicely there.
This is content Tab 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
This is content Tab 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
This is content Tab 3.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
HTML Markup
<div class="tabs">
<input type="radio" name="tab" id="tab-1" checked>
<input type="radio" name="tab" id="tab-2">
<input type="radio" name="tab" id="tab-3">
<div class="indicators">
<label for="tab-1">Tab1</label>
<label for="tab-2">Tab2</label>
<label for="tab-3">Tab3</label>
</div>
<section>
<article>
<p>This is content Tab 1. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
</article>
<article>
<p>This is content Tab 2. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
</article>
<article>
<p>This is content Tab 3. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
</article>
</section>
</div> JS Tabs
This framework mainly focuses on how well it looks on any frontend JS framework without adding complex dependency of external JS. If you like to use simple JS to toggle anything just use .active. Again, see example below.
This is content Tab 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
This is content Tab 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
This is content Tab 3.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
HTML Markup
<div class="tabs">
<div class="indicators">
<a data-tab class="active">Tab1</a>
<a data-tab>Tab2</a>
<a data-tab>Tab3</a>
</div>
<section>
<article class="active">
<p>This is content Tab 1. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
</article>
<article>
<p>This is content Tab 2. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
</article>
<article>
<p>This is content Tab 3. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
</article>
</section>
</div> Vanilla JS
var tabs=document.querySelectorAll('[data-tab]');
for(var i=tabs.length;i-->0;){
// Add click listener each element that has data-tab
tabs[i].addEventListener('click',function(ev){
var target=this.parentNode,
indicators=target.children,
index=Array.prototype.indexOf.call(indicators,this),
contents=target.parentNode.querySelector('section').children;
// Set all indicator and content as inactive
for(var i=0;i<contents.length;i++){
indicators[i].classList.remove('active')
contents[i].classList.remove('active')
}
// Set current target index as active
indicators[index].classList.add('active')
contents[index].classList.add('active')
})
} # Tiles
Bla bla
Basic Tile
Title of the current tile
This is a nice forest. What do you want to do with it?Compact version of tile using class .tile.compact
This is a nice forest. What do you want to do with it?
Description
HTML Markup
<article class="tile">
<img src="/src/img/avatar.png" class="avatar small">
<section>
<h4>Title of the current tile</h4>
This is a nice forest. What do you want to do with it?
</section>
<div class="action small nowrap">
<button class="p-1">Join</button>
<button class="p-1 info">Contact</button>
</div>
</article>
<article class="tile compact">
<img src="/src/img/avatar.png" class="avatar small">
<section>
<p>
This is a nice forest. What do you want to do with it?
<br>
<span class="text-muted">Description</span>
</p>
</section>
<div class="action">
<button class="p-0 px-1 m-0 link">⋮</button>
</div>
</article> Complex Tiles
Title
This is a nice forest. What do you want to do with it?
Title
This is a nice forest. What do you want to do with it? Title
This is a nice forest. What do you want to do with it?HTML Markup
<article class="tile">
<img src="/src/img/avatar.png" class="avatar small">
<section>
<h4>Title</h4>
<p>This is a nice forest. What do you want to do with it?</p>
<footer class="small">
<button>Reply</button>
<button class="info">Rate</button>
</footer>
<article class="tile">
<img src="/src/img/avatar.png" class="avatar small">
<section>
<h4>Title</h4>
This is a nice forest. What do you want to do with it?
</section>
</article>
<article class="tile">
<div>
<img src="/src/img/avatar.png" class="avatar small">
</div>
<section>
<h4>Title</h4>
This is a nice forest. What do you want to do with it?
</section>
</article>
</section>
</article> # Toasts
Basic Toasts
Default Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Primary Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Info Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Success Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Warning Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Error Toast.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
# Tooltip
Tooltip
HTML Markup <button data-tooltip="This is a great tooltip" class="tooltip-top"> Top </button> <button data-tooltip="This is a great tooltip"> Bottom (default) </button> <button data-tooltip="This is a great tooltip" class="tooltip-left"> Left </button> <button data-tooltip="This is a great tooltip" class="tooltip-right"> Right </button>
# Tree
Pure CSS Trees
HTML Markup
<nav>
<ul class="tree">
<li>
<input type="checkbox" id="list-1">
<label for="list-1">List 1</label>
<ul>
<li>List 1.1</li>
<li>List 1.1</li>
<li>List 1.1</li>
</ul>
</li>
<li>
<input type="checkbox" id="list-2">
<label for="list-2">List 2</label>
<ul>
<li>
<input type="checkbox" id="list-2-1">
<label for="list-2-1">List 2</label>
<ul>
<li>List 2.1.1</li>
<li>List 2.1.1</li>
<li>List 2.1.1</li>
</ul>
</li>
<li>List 2.1</li>
<li>List 2.1</li>
</ul>
</li>
<li>
<input type="checkbox" id="list-3">
<label for="list-3">List 3</label>
<ul>
<li>List 3.1</li>
<li>List 3.1</li>
<li>List 3.1</li>
</ul>
</li>
</ul>
</nav> JS Trees
HTML Markup
<nav>
<ul class="tree">
<li class="active">
<a data-tree>List 1</a>
<ul>
<li>List 1.1</li>
<li>List 1.1</li>
<li>List 1.1</li>
</ul>
</li>
<li>
<a data-tree>List 2</a>
<ul>
<li>
<a data-tree>List 2</a>
<ul>
<li>List 2.1.1</li>
<li>List 2.1.1</li>
<li>List 2.1.1</li>
</ul>
</li>
<li>List 2.1</li>
<li>List 2.1</li>
</ul>
</li>
<li>
<a data-tree>List 3</a>
<ul>
<li>List 3.1</li>
<li>List 3.1</li>
<li>List 3.1</li>
</ul>
</li>
</ul>
</nav> Vanilla JS
var trees=document.querySelectorAll('[data-tree]');
for(var i=trees.length;i-->0;){
// Add click listener each element that has data-accordion
trees[i].addEventListener('click',function(ev){
var target=this.parentNode,
siblings=target.parentNode.children;
// Toggle class element active
target.classList.toggle('active')
})
}