diff --git a/server.js b/server.js index 88fadde..8e983df 100644 --- a/server.js +++ b/server.js @@ -4,12 +4,10 @@ const crypto = require('crypto'); const csass = require("./compile_sass").compileSassMain(); -const static_opts = { +fastify.register(require('fastify-static'), { root: path.join(__dirname, 'public'), prefix: '/public/', -}; - -fastify.register(require('fastify-static'), static_opts); +}); fastify.register(require('fastify-leveldb'), { name: 'db' @@ -20,11 +18,11 @@ fastify.register(require('fastify-leveldb'), { fastify.get('/', (req, reply) => { - reply.view('/template/home.html'); + reply.sendFile('/template/home.html'); }); fastify.get('/dbg', (req, reply) => { - reply.view('/template/templates.html'); + reply.sendFile('/template/templates.html'); }); fastify.get('/:id', (req, reply) => { @@ -46,7 +44,7 @@ fastify.get('/:id', (req, reply) => { throw undefined; } }catch(e){ - reply.view('/template/journey.html'); + reply.sendFile('/template/journey.html'); } }); diff --git a/template/default.html b/template/default.html deleted file mode 100644 index fcbff3c..0000000 --- a/template/default.html +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - - - $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/template/home.html b/template/home.html deleted file mode 100644 index e3f7052..0000000 --- a/template/home.html +++ /dev/null @@ -1,139 +0,0 @@ - - - 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/template/journey.html b/template/journey.html deleted file mode 100644 index 551a56c..0000000 --- a/template/journey.html +++ /dev/null @@ -1,320 +0,0 @@ - - - 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/template/templates.html b/template/templates.html deleted file mode 100644 index 8a88e0e..0000000 --- a/template/templates.html +++ /dev/null @@ -1,1446 +0,0 @@ - - - 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