diff --git a/public/template/default.html b/public/template/default.html new file mode 100644 index 0000000..fcbff3c --- /dev/null +++ b/public/template/default.html @@ -0,0 +1,117 @@ + + + + + + + + $for(author-meta)$ + + $endfor$ + $if(date-meta)$ + + $endif$ + $if(title-prefix)$$title-prefix$ - $endif$$pagetitle$ + + + $if(quotes)$ + + $endif$ + $for(css)$ + + $endfor$ + $for(header-includes)$ + $header-includes$ + $endfor$ + + +
+
+ $if(qrcode)$ + + $endif$ +

+ $firstname$ + $lastname$ +

+

$description$

+
+ $if(photo)$ + + $endif$ + +
+ $for(include-before)$ + $include-before$ + $endfor$ + $body$ + $for(include-after)$ + $include-after$ + $endfor$ + + + \ No newline at end of file diff --git a/public/template/home.html b/public/template/home.html new file mode 100644 index 0000000..e3f7052 --- /dev/null +++ b/public/template/home.html @@ -0,0 +1,139 @@ + + + Helcel-OTM + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ +
+

Open Tourism Map

+

Collaborative Holiday Planner

+
+

+ Get started +

+
+
+
+ +
+
+
+
+
+ Lightweight
+

Lightweight
+ Powered By
Fastify & Sierra

+
+
+ +
+
+ Customizable
+

Customizable
+ Many Templates
to choose from +

+
+
+
+
+

+ Open Source
+ FOSS
+ + :-) +

+
+
+
+
+
+
+

Your journey

+

Browse hotels, restaurants and attractions,....
Select and plan the varying elements of your journey

+
+
+ +
+ +
+
+ +
+
+
+

Developed entirely with Sierra library selectors

+

Just define your custom SCSS variables and compile

+

+

Documentation View code

+

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ Visit Github Page +
+
+ +
+ + + + + \ No newline at end of file diff --git a/public/template/journey.html b/public/template/journey.html new file mode 100644 index 0000000..551a56c --- /dev/null +++ b/public/template/journey.html @@ -0,0 +1,320 @@ + + + Helcel-OTM + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+ +
    +
    +
    +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + +
+ + +
+ Hotel: {{item.hotel.display_name}} +
+ + + + + + +
+ + +
+ Food: {{place.display_name}} +
+ + + + +
+ + +
+ Activity: {{place.display_name}} +
+ + + +
+
+
+
+
+ +
+
+
+
+ +
+
+
+ + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+

Add new section

+

Got an other flight and/or hotel ? Add a new section to register it

+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + +
+ + +
+ Hotel: {{journey_data.main[journey_step_data.section].hotel.display_name}} +
+ + + + + +
+ + +
+ Activity: {{place.display_name}} +
+ + + +
+
+
+
+
+ Flights + + +
+
+
+ Select Daily Activities +
+
+ +
+ {{ element.display_name.split(",")[0] }} +
+ +
+
+ +
+
+ +
{{ element.display_name.split(",")[0] }}
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/public/template/templates.html b/public/template/templates.html new file mode 100644 index 0000000..8a88e0e --- /dev/null +++ b/public/template/templates.html @@ -0,0 +1,1446 @@ + + + Helcel-OTM + + + + + + + + + + + + + +
+
+
+
+
+ Lightweight
+

Lightweight
+ 37 kB (8.9 kB gzipped).

+
+
+ +
+
+ Customizable
+

Customizable
+ Fonts, colors, sizes... +

+
+
+
+
+

+ Open Source
+ Open Source
+ + To nerds, by nerds. +

+
+
+
+
+
+
+ + + + +
+

Quick install

+

1.- Get the files via NPM

+ 
npm install sierra-library --save-dev
+

2.- Import the library from your SCSS files

+ 
@import 'sierra-library/lib/index';
+

3.- Ready to compile!

+

Need help about that? take a look at our example page and its code.

+ +
+ +
+

Download

+

Download ready-to-use compiled CSS or minified CSS files, and include it in your HTML file: +

+ 
<link rel="stylesheet" type="text/css" media="all" href="css/styles.min.css">
+ +

Otherwise you can compile Sierra Library with your own tools by downloading our source SCSS files.

+ +
+ +
+

Theme customization

+

If you want to customize Sierra library's theme settings, including fonts, margins, paddings and/or colors, create your own custom-settings file and add it just before importing Sierra files:

+ 
@import 'custom-settings';
+      @import 'sierra-library/lib/index';
+

This custom-settings.scss file should contain all those SCSS variables you want to overwrite. Check all settings you can customize in the settings library file.

+

However, we recommend to duplicate all variables in order to make sure your styles are not being compromised in eventual library updates.

+

Having troubles? take a look at this theme customization examples:

+ +
+
+ + example1
+ + View page + + or + view code +
+
+ + example2
+ + + View page + + or + view code +
+
+ +
+ +
+
+ +
+

Components

+

Badges

+

Colors

+
+
+
    +
  • + default +
    • +
  • + primary +
    • +
  • + secondary +
    • +
  • + dark +
    • +
  • + success +
    • +
  • + warning +
    • +
  • + error +
    • +
+
+
+ 
<ul>
+                <li class="badge">default</li>
+                <li class="badge badge--primary">primary</li>
+                <li class="badge badge--secondary">secondary</li>
+                <li class="badge badge--dark">dark</li>
+                <li class="badge badge--success">success</li>
+                <li class="badge badge--warning">warning</li>
+                <li class="badge badge--error">error</li>
+                </ul>
+
+
+

Badges color settings

+

Sizes

+
+
+
    +
  • + small badge +
    • +
  • + default badge +
    • +
  • + big badge +
    • +
+
+
+ 
<ul>
+                  <li class="badge badge--small">small badge</li>
+                  <li class="badge">default badge</li>
+                  <li class="badge badge--big">big badge</li>
+                  </ul>
+
+
+

Badges settings

+
+ +
+

Buttons

+
+
+ +
+
+ 
<button class="button button--primary">Button</button>
+
+
+

Buttons settings

+ +

Button colors

+
+
+ + + + + + +
+
+ 
<button class="button button--small button--primary">primary</button>
+                    <button class="button button--small button--secondary">secondary</button>
+                    <button class="button button--small button--green">green</button>
+                    <button class="button button--small button--red">red</button>
+                    <button class="button button--small button--outlined">outlined</button>
+                    <button class="button button--small button--transparent">transparent</button>
+
+
+ +

Mobile full size

+
+
+ +
+
+ 
<button class="button button--primary button--mobileFull">Button</button>
+
+
+ +

Button sizes

+
+
+ + + +
+
+ 
<button class="button button--big">Button big</button>
+                      <button class="button">Button default</button>
+                      <button class="button button--small">Button small</button>
+
+
+
+ +
+

Forms

+

Input

+
+
+ +
+ +
+
+
+ 
<label class="label" for="test10">Input</label>
+                        <div class="input input-fullWidth">
+                        <input id="test10" placeholder="Input" type="text">
+                        </div>
+
+
+

Forms settings

+ +

Inputs with icon

+
+
+ +
+ + +
+
+
+ 
<label class="label" for="test10">Input</label>
+                          <div class="input input-withIcon input-fullWidth">
+                          <input id="test1" placeholder="Your name" type="text">
+                          <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><path d="M257,474.1c-62.5,0-125,0-187.5,0c-17.9,0-29.6-11.2-29.9-29c-0.2-12.7-0.3-25.3,0.2-38c0.6-15,7.9-26.5,20.9-33.6   c42.7-23.3,85.6-46.1,128.3-69.3c3.1-1.7,5-0.1,7.3,1.1c36.5,19.1,73.7,20.7,111.7,4.8c1.1-0.4,2.3-0.7,3.2-1.5   c7.9-6.7,15-4,23.2,0.5c38.3,21.1,76.9,41.8,115.5,62.4c16.7,8.9,24.9,22.3,24.6,41.2c-0.2,10.7,0,21.3,0,32   c-0.1,17.7-11.9,29.4-29.5,29.4C382.3,474.1,319.6,474.1,257,474.1z"></path><path d="M253.9,295.2c-35.2-1.2-64.4-18.6-85.9-49.5C132.8,195,137,123,177.3,76.8c43.8-50.1,116.4-49.8,159.8,0.6   c46.1,53.6,43.2,138.2-6.7,186.8C310,284.1,285.6,294.8,253.9,295.2z"></path></g></svg>
+                          </div>
+
+
+

Input with error

+
+
+ +
+ +
+

Error message

+
+
+ 
<label class="label" for="test10">Input</label>
+                            <div class="input input-fullWidth">
+                            <input id="test10" placeholder="Input" type="text">
+                            </div>
+                            <p class="text-error text-small">Error message</p>
+
+
+

Select

+
+
+ +
+ +
+
+
+ 
<label class="label" for="country-code">Select</label>
+                              <div class="select select-fullWidth">
+                              <select>
+                              <option>Option 1</option>
+                              <option>Option 2</option>
+                              <option>Option 3</option>
+                              <option>Option 4</option>
+                              </select>
+                              </div>
+
+
+

Select with error

+
+
+ +
+ +
+

Error message

+
+
+ 
<label class="label" for="country-code">Select</label>
+                                <div class="select select-fullWidth has-error">
+                                <select>
+                                <option>Option 1</option>
+                                <option>Option 2</option>
+                                <option>Option 3</option>
+                                <option>Option 4</option>
+                                </select>
+                                </div>
+                                <p class="text-error text-small">Error message</p>
+
+
+

Textarea

+
+
+ +
+ +
+
+
+ 
<label class="label" for="message">Textarea</label>
+                                  <div class="textarea  textarea-fullWidth">
+                                  <textarea id="message"></textarea>
+                                  </div>
+
+
+

Textarea with error

+
+
+ +
+ +
+

Error message

+
+
+ 
<label class="label" for="message">Textarea</label>
+                                    <div class="textarea  textarea-fullWidth has-error">
+                                    <textarea id="message"></textarea>
+                                    </div>
+                                    <p class="text-error text-small">Error message</p>
+
+
+

Radio buttons

+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ 
<div class="radio">
+                                      <input id="radio1" name="radio" value="" type="radio">
+                                      <label for="radio1">Radio button 1</label>
+                                      </div>
+                                      <div class="radio">
+                                      <input id="radio2" name="radio" value="" type="radio">
+                                      <label for="radio2">Radio button 2</label>
+                                      </div>
+                                      <div class="radio">
+                                      <input id="radio3" name="radio" value="" type="radio">
+                                      <label for="radio3">Radio button 3</label>
+                                      </div>
+
+
+

Checkboxes

+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ 
<div class="checkbox">
+                                        <input id="one" name="#" value="" type="checkbox">
+                                        <label for="one">Checkbox 1</label>
+                                        </div>
+                                        <div class="checkbox">
+                                        <input id="two" name="#" value="" type="checkbox">
+                                        <label for="two">Checkbox 2</label>
+                                        </div>
+                                        <div class="checkbox">
+                                        <input id="three" name="#" value="" type="checkbox">
+                                        <label for="three">Checkbox 3</label>
+                                        </div>
+
+
+
+ +
+

Forms collapsed

+
+
+
+
+ +
+ +
+
+
+ 
<div class="formCollapsed">
+                                          <div class="input formCollapsed-item formCollapsed-itemPrimary">
+                                          <input id="test8" placeholder="Search" type="text">
+                                          </div>
+                                          <button class="formCollapsed-item button button-primary">
+                                          Search
+                                          </button>
+                                          </div>
+
+
+

Forms settings

+
+
+
+
+ +
+
+ +
+ +
+
+
+ 
<div class="formCollapsed">
+                                            <div class="input formCollapsed-item formCollapsed-itemPrimary">
+                                            <input id="test7" placeholder="Search" type="text">
+                                            </div>
+                                            <div class="select formCollapsed-item">
+                                            <select name="country-code" id="country-code">
+                                            <option>One</option>
+                                            <option>Two</option>
+                                            <option>Three</option>
+                                            <option>Four</option>
+                                            </select>
+                                            </div>
+                                            <button class="formCollapsed-item button button-primary">
+                                            Search
+                                            </button>
+                                            </div>
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ 
<div class="formCollapsed">
+                                              <div class="select formCollapsed-item formCollapsed-itemPrimary">
+                                              <select name="country-code" id="country-code">
+                                              <option>Vincent</option>
+                                              <option>Jules</option>
+                                              <option>Mia </option>
+                                              <option>Butch</option>
+                                              </select>
+                                              </div>
+                                              <div class="select formCollapsed-item formCollapsed-itemPrimary">
+                                              <select name="country-code" id="country-code">
+                                              <option>Mr. White</option>
+                                              <option>Mr. Orange</option>
+                                              <option>Mr. Pink</option>
+                                              <option>Mr. Blonde</option>
+                                              </select>
+                                              </div>
+                                              <div class="select formCollapsed-item formCollapsed-itemPrimary">
+                                              <select name="country-code" id="country-code">
+                                              <option>Shaw </option>
+                                              <option>Kelly</option>
+                                              <option>Doyle </option>
+                                              <option>Lt. William</option>
+                                              </select>
+                                              </div>
+                                              </div>
+
+
+
+ +
+

Loaders

+

Loading bar

+
+
+
+
+
+ 
<!-- By default it's fixed at the top of the page -->
+                                                <div class="loadingBar"></div>
+
+
+
+

Loading bar settings

+ +

Loading spinner

+
+
+
+
+ + + + +
+
+
+ 
<!-- By default it's located at the center of the page -->
+                                                <div class="loadingSpinner">
+                                                <span class="loadingSpinner-inner"></span>
+                                                <span class="loadingSpinner-inner"></span>
+                                                <span class="loadingSpinner-inner"></span>
+                                                <span class="loadingSpinner-inner"></span>
+                                                </div>
+
+
+
+

Loading spinner settings

+
+ +
+

Notifications

+
+
+

Success message

+

Info message

+

Warning message

+

Error message

+
+
+ 
<div class="notification notification--success"><p>Success message</p></div>
+                                                <div class="notification notification--info"><p>Info message</p></div>
+                                                <div class="notification notification--warning"><p>Warning message</p></div>
+                                                <div class="notification notification--error"><p>Error message</p></div>
+
+
+
+

Notifications settings

+
+ + +
+

Pagination

+
+
+ +
+
+ 
<ul class="paginator">
+                                                <li class="paginator-item">
+                                                <a href="#" class="paginator-itemLink">Prev</a>
+                                                </li>
+                                                <li class="paginator-item">
+                                                <a href="#" class="paginator-itemLink">1</a>
+                                                </li>
+                                                <li class="paginator-item">
+                                                <a href="#" class="paginator-itemLink is-active">2</a>
+                                                </li>
+                                                <li class="paginator-item">
+                                                <a href="#" class="paginator-itemLink">Next</a>
+                                                </li>
+                                                </ul>
+
+
+

Pagination settings

+
+ +
+

Tables

+

Standard

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header 1Header 2Header 3
LemonOrangeKiwi
SugarSaltPepper
ForkKnifeSpoon
CupGlassPitcher
+
+
+ 
<table class="table">
+                                                  <thead>
+                                                  <tr class="text-small text-left">
+                                                  <th>Header 1</th>
+                                                  <th>Header 2</th>
+                                                  <th>Header 3</th>
+                                                  </tr>
+                                                  </thead>
+                                                  <tbody>
+                                                  <tr>
+                                                  <td>Lemon</td>
+                                                  <td>Orange</td>
+                                                  <td>Kiwi</td>
+                                                  </tr>
+                                                  <tr>
+                                                  <td>Sugar</td>
+                                                  <td>Salt</td>
+                                                  <td>Pepper</td>
+                                                  </tr>
+                                                  <tr>
+                                                  <td>Fork</td>
+                                                  <td>Knife</td>
+                                                  <td>Spoon</td>
+                                                  </tr>
+                                                  <tr>
+                                                  <td>Cup</td>
+                                                  <td>Glass</td>
+                                                  <td>Pitcher</td>
+                                                  </tr>
+                                                  </tbody>
+                                                  </table>
+
+
+

Table settings

+ +

Responsive

+
+
+ + + + + + + + + + + + + + + + + + + + + +
First columnSecond columnThird column
BlueOneMy life fades
GreenTwoWhen the world was powered by the black fuel... and the desert sprouted great cities of pipe and steel.
YellowThreeA whirlwind of looting, a firestorm of fear. Men began to feed on men. A whirlwind of looting, a firestorm of fear. Men began to feed on men.
+
+
+ 
<table class="table table--responsive">
+                                                    <thead>
+                                                    <tr class="text-small">
+                                                    <th>First column</th>
+                                                    <th>Second column</th>
+                                                    <th>Third column</th>
+                                                    </tr>
+                                                    </thead>
+                                                    <tbody>
+                                                    <tr>
+                                                    <td data-th="First column">Blue</td>
+                                                    <td data-th="Second column">One</td>
+                                                    <td data-th="Third column">My life fades</td>
+                                                    </tr>
+                                                    <tr>
+                                                    <td data-th="First column">Green</td>
+                                                    <td data-th="Second column">Two</td>
+                                                    <td data-th="Third column">When the world was powered by the black fuel... and the desert sprouted great cities of pipe and steel. </td>
+                                                    </tr>
+                                                    <tr>
+                                                    <td data-th="First column">Yellow</td>
+                                                    <td data-th="Second column">Three</td>
+                                                    <td data-th="Third column">A whirlwind of looting, a firestorm of fear. Men began to feed on men. A whirlwind of looting, a firestorm of fear. Men began to feed on men. </td>
+                                                    </tr>
+                                                    </tbody>
+                                                    </table>
+
+
+
+ +
+

Tabs

+
+
+
+ Tab 1 + Tab 2 + Tab 3 +
+
+
+ 
<div class="tabs">
+                                                      <a href="#" class="tabs-item">Tab 1</a>
+                                                      <a href="#" class="tabs-item is-selected">Tab 2</a>
+                                                      <a href="#" class="tabs-item">Tab 3</a>
+                                                      </div>
+
+
+
+

Tabs settings

+
+ +
+

Tags

+
+
+ +
+
+ 
<ul>
+                                                      <li class="tag">
+                                                      <a href="#">fantasy</a>
+                                                      </li>
+                                                      <li class="tag">
+                                                      <a href="#">fiction</a>
+                                                      </li>
+                                                      <li class="tag">
+                                                      <a href="#">contemporary</a>
+                                                      </li>
+                                                      <li class="tag">
+                                                      <a href="#">horror</a>
+                                                      </li>
+                                                      </ul>
+
+
+
+

Tags settings

+ +
+ +
+

Utilities

+

Aligners

+

Space between

+
+
+
+
Image 4
+
Image 2
+
+
+
+ 
<div class="aligner aligner--spaceBetween">
+                                                      <div><img src="img/img4.jpg" width="50"></div>
+                                                      <div><img src="img/img2.jpg" width="50"></div>
+                                                      </div>
+
+
+

Space around

+
+
+
+
Image 4
+
Image 3
+
+
+
+ 
<div class="aligner aligner--spaceAround">
+                                                        <div><img src="img/img2.jpg" width="50"></div>
+                                                        <div><img src="img/img1.jpg" width="50"></div>
+                                                        </div>
+
+
+

Content start

+
+
+
+
Image 4
+
+
+
+ 
<div class="aligner aligner--contentStart">
+                                                          <div><img src="img/img6.jpg" width="50"></div>
+                                                          </div>
+
+
+

Content end

+
+
+
+
Image 2
+
+
+
+ 
<div class="aligner aligner--contentEnd">
+                                                            <div><img src="img/img2.jpg" width="50"></div>
+                                                            </div>
+
+
+

Center vertical

+
+
+
+
Image 4
+
+
+
+ 
<div class="aligner aligner--centerVertical">
+                                                              <div><img src="img/img3.jpg" width="50"></div>
+                                                              </div>
+
+
+

Center vertical and horizontal

+
+
+
+
Image 4
+
+
+
+ 
<div class="aligner aligner--centerHoritzontal aligner--centerVertical">
+                                                                <div><img src="img/img1.jpg" width="50"></div>
+                                                                </div>
+
+
+

Align to bottom

+
+
+
+
Image 4
+
+
+
+ 
<div class="aligner">
+                                                                  <div class="aligner--itemBottom">
+                                                                  <img src="img/img4.jpg" alt="Image 4" width="50">
+                                                                  </div>
+                                                                  </div>
+
+
+
+
+ +
+

Borders

+

Top bottom

+
+
+

+
+
+ 
<div class="border-top border-bottom"><br></div>
+
+
+

Left right

+
+
+

+
+
+ 
<div class="border-left border-right"><br></div>
+
+
+

Bordered

+
+
+

+
+
+ 
<div class="border"><br></div>
+
+
+
+ +
+

Colors

+

Primary / secondary

+
+
+
+


+


+
+ +
+
+ 
<div class="aligner aligner--spaceAround">
+                                                                  <div class="flex-grow bg-primary"><br><br></div>
+                                                                  <div class="flex-grow bg-secondary"><br><br></div>
+                                                                  </div>
+
+
+

Customize all colors overwriting color settings variables

+

Success / info / error / warning

+
+
+
+


+


+


+


+
+ +
+
+ 
<div class="aligner aligner--spaceAround">
+                                                                    <div class="flex-grow bg-success"><br><br></div>
+                                                                    <div class="flex-grow bg-info"><br><br></div>
+                                                                    <div class="flex-grow bg-warning"><br><br></div>
+                                                                    <div class="flex-grow bg-error"><br><br></div>
+                                                                    </div>
+
+
+

Others

+
+
+
+


+


+


+


+
+ +
+
+ 
<div class="aligner aligner--spaceAround">
+                                                                      <div class="flex-grow bg-white"><br><br></div>
+                                                                      <div class="flex-grow bg-gray-light"><br><br></div>
+                                                                      <div class="flex-grow bg-gray"><br><br></div>
+                                                                      <div class="flex-grow bg-dark"><br><br></div>
+                                                                      </div>
+
+
+
+ +
+

Containers

+

Standard

+
+
+ 
<div class="container"></div>
+
+
+

Medium

+
+
+ 
<div class="container-medium"></div>
+
+
+

Small

+
+
+ 
<div class="container-small"></div>
+
+
+
+ +
+

Grid

+

Equal width columns

+
+
+
+
+


+


+


+


+
+
+
+
+ 
<div class="container">
+                                                                        <div class="row">
+                                                                        <div class="col bg-gray-light"><br><br></div>
+                                                                        <div class="col bg-gray"><br><br></div>
+                                                                        <div class="col bg-gray-light"><br><br></div>
+                                                                        <div class="col bg-gray"><br><br></div>
+                                                                        </div>
+                                                                        </div>
+
+
+

Equal width, responsive columns

+
+
+
+
+
3/12
+
3/12
+
3/12
+
3/12
+
+
+
+
+ 
<div class="container">
+                                                                          <div class="row">
+                                                                          <div class="col-sm bg-gray-light p-medium text-gray">3/12</div>
+                                                                          <div class="col-sm bg-gray p-medium text-white">3/12</div>
+                                                                          <div class="col-sm bg-gray-light p-medium text-gray">3/12</div>
+                                                                          <div class="col-sm bg-gray p-medium text-white">3/12</div>
+                                                                          </div>
+                                                                          </div>
+
+                                                                          Available responsive classes:
+
+                                                                          col-sm <!-- Equal width on small, medium, large and extra large devices -->
+                                                                          col-md <!-- Equal width on medium, large, and extra large devices -->
+                                                                          col-lg <!-- Equal width on large, and extra large devices -->
+                                                                          col-xl <!-- Equal width on extra large devices -->
+
+
+
+

Variable width

+
+
+
+
+
4/12
+
2/12
+
4/12
+
2/12
+
+
+
+
+ 
<div class="container">
+                                                                          <div class="row">
+                                                                          <div class="col-sm-4 bg-gray-light p-medium text-gray">4/12</div>
+                                                                          <div class="col-sm-2 bg-gray p-medium text-white">2/12</div>
+                                                                          <div class="col-sm-4 bg-gray-light p-medium text-gray">4/12</div>
+                                                                          <div class="col-sm-2 bg-gray p-medium text-white">2/12</div>
+                                                                          </div>
+                                                                          </div>
+
+
+

Nesting

+
+
+
+
+
+

Col

+
+
+
Nested col
+
Nested col
+
+
+
+

Col

+
+
+
+
+ 
<div class="container">
+                                                                            <div class="row"> <!-- First level row -->
+                                                                            <div class="col bg-gray-light p-medium text-gray">
+                                                                            <p class="mb-small">Col</p>
+                                                                            <div class="container">
+                                                                            <div class="row"> <!-- Nested row -->
+                                                                            <div class="col bg-gray p-medium text-white">Nested col</div>
+                                                                            <div class="col bg-white p-medium ">Nested col</div>
+                                                                            </div>
+                                                                            </div>
+                                                                            </div>
+                                                                            <div class="col bg-gray p-medium text-white">
+                                                                            <p class="mb-small">Col</p>
+                                                                            </div>
+                                                                            </div>
+                                                                            </div>
+
+
+
+ +
+

Image modifiers

+

Circle

+
+
+ Image 1 +
+
+ 
<img class="rounded" src="img/img1.jpg" alt="#" width="100">
+
+
+

Rouded corners

+
+
+ Image 1 +
+
+ 
<img class="rounded-corners" src="img/img6.jpg" alt="#" width="100">
+
+
+
+ +
+

Full width box

+
+
+
+
+

We can be heroes

+

just for one day

+
+
+ +
+
+ 
<div class="section bg-dark">
+                                                                              <div class="container text-center">
+                                                                              <h3 class="text-huge text-white text-withSubtitle">We can be heroes</h3>
+                                                                              <h4 class="text-big text-gray m-none">just for one day</h4>
+                                                                              </div>
+                                                                              </div>
+
+
+
+ +
+

Opacity low

+
+
+ Image 1 +
+
+ 
<img class="opacity-low" src="#" width="#">
+
+
+
+ +
+

Spacing

+

Margins

+
+
+
+ Image 1 +
+
+ 
<div class="bg-gray-light">
+                                                                              <img class="m-big" src="img/img3.jpg" alt="Image 1" width="75">
+                                                                              </div>
+
+                                                                              Available margin classes:
+
+                                                                              m-xsmall  <!-- Margin extra small -->
+                                                                              m-small   <!-- Margin small -->
+                                                                              m-medium  <!-- Margin medium -->
+                                                                              m-big     <!-- Margin big -->
+                                                                              m-huge    <!-- Margin huge -->
+
+                                                                              mb-xsmall <!-- Margin bottom extra small -->
+                                                                              mb-small  <!-- Margin bottom small -->
+                                                                              mb-medium <!-- Margin bottom medium -->
+                                                                              mb-big    <!-- Margin bottom big -->
+                                                                              mb-huge   <!-- Margin bottom huge -->
+
+                                                                              m-none    <!-- Margin none -->
+
+
+

Paddings

+
+
+
Lorem ipsum
+
+ 
<div class="p-huge bg-gray-light">
+                                                                              <span>Lorem ipsum</span>
+                                                                              </div>
+
+                                                                              Available padding classes:
+
+                                                                              p-small   <!-- Padding small -->
+                                                                              p-medium  <!-- Padding medium -->
+                                                                              p-big     <!-- Padding big -->
+                                                                              p-huge    <!-- Padding huge -->
+
+                                                                              pb-small  <!-- Padding bottom small -->
+                                                                              pb-medium <!-- Padding bottom medium -->
+                                                                              pb-big    <!-- Padding bottom big -->
+                                                                              pb-huge   <!-- Padding bottom huge -->
+
+
+
+ +
+

Typography

+

Sizes

+
+
+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet

+
+
+ 
<p class="text-huge">Lorem ipsum dolor sit amet</p>
+                                                                                <p class="text-big">Lorem ipsum dolor sit amet</p>
+                                                                                <p class="text-medium">Lorem ipsum dolor sit amet</p>
+                                                                                <p class="text-small">Lorem ipsum dolor sit amet</p>
+
+
+ +

Text with subtitle

+
+
+

Text medium

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit

+
+
+ 
<p class="text-big text-withSubtitle">Text medium</p>
+                                                                                  <p class="text-medium text-gray">Lorem ipsum dolor sit amet</p>
+
+
+ +

Default

+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat repellendus nostrum molestiae, nisi commodi eveniet! Veritatis omnis quas distinctio, possimus ratione. Facere iure ea laborum dicta, et aliquam, aspernatur modi.

+
+
+ 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat repellendus nostrum molestiae, nisi <a href="#">commodi eveniet</a>! Veritatis omnis quas distinctio, possimus ratione. Facere iure ea laborum dicta, et aliquam, aspernatur modi.</p>
+
+
+ +

Colors

+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

+
+
+ 
<p class="text-gray">Lorem ipsum dolor sit amet...</p>
+                                                                                    <p class="text-primary">Lorem ipsum dolor sit amet...</p>
+                                                                                    <p class="text-success">Lorem ipsum dolor sit amet...</p>
+                                                                                    <p class="text-error">Lorem ipsum dolor sit amet...</p>
+
+
+

Text aligners

+
+
+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet

+
+
+ 
<p class="text-center">Lorem ipsum dolor sit amet</p>
+                                                                                      <p class="text-right">Lorem ipsum dolor sit amet</p>
+
+
+
+

Modifiers

+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

+
+
+ 
<p class="text-uppercase">Lorem ipsum dolor sit amet...</p>
+                                                                                      <p class="text-lineThrough">Lorem ipsum dolor sit amet...</p>
+                                                                                      <p class="text-italic">Lorem ipsum dolor sit amet...</p>
+                                                                                      <p class="text-underline">Lorem ipsum dolor sit amet...</p>
+
+
+
+
+ +
+
+ + + + \ No newline at end of file