Typography

Font Family

# You can use .tf-font-raleway to set elements to Raleway font.
entire page uses Raleway as the main font by default.

# Daisy Script .tf-font-daisy
Jour 1 Jour 2
Lorem ipsum dolor sit amet consectetur adipisicing elit.
* Font-size in example is set to 32px

Font Size

Font Weight

.weight-300
Lorem ipsum dolor sit, amet consectetur adipisicing elit.

.weight-400
Lorem ipsum dolor sit, amet consectetur adipisicing elit.

.weight-500 (default)
Lorem ipsum dolor sit, amet consectetur adipisicing elit.

.weight-600
Lorem ipsum dolor sit, amet consectetur adipisicing elit.

.weight-700 or .font-weight-bold (bootstrap weight 700 equivalent)
Lorem ipsum dolor sit, amet consectetur adipisicing elit.

.weight-800
Lorem ipsum dolor sit, amet consectetur adipisicing elit.

.weight-900
Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Colors

Opacity

Background Opacity

Background Hover

Cursors

Elevation

Borders

Sizing

.min-(w,h)-100
Min width/height 100%

.h-0
Height 0px

Spacing

.z-index-n1
.z-index-(1..10)
Z-index

.translate-(l,t,r,b)-50pc
Move (translate) node to specific direction for 50% of its size

.text-elipsis
For long texts...

Interaction

.pointer-events-none
Z-index

Responsiveness

Support for
* .text-sm-darkblue - .bg-sm-blue - all border-sm-red types and .elevation-sm-1 etc...
* all types of bootstrap padding and margin in this format: .p-sm-1 .m-sm-auto etc...
* font sizes from 8 to 50 in this format: font-sm-42 etc...
* and width sizing in this format: w-sm-100, w-sm-50 etc...
Resize your window to see effects: .text-sm-orange - .text-md-orange - .text-lg-orange

How to make images fit in container
.tf-img-fit

Icons

Text Decoration

Buttons

                <button class="tf-btn--blue">Blue</button>
<button class="tf-btn--blue tf-btn--round">Round</button>
<button class="tf-btn--blue tf-btn--round tf-btn--outline">Outline</button>

<button class="tf-btn--green">Green</button>
<button class="tf-btn--green tf-btn--round">Round</button>
<button class="tf-btn--green tf-btn--round tf-btn--outline">Outline</button>

<button class="tf-btn--red">Red</button>
<button class="tf-btn--red tf-btn--round">Round</button>
<button class="tf-btn--red tf-btn--round tf-btn--outline">Outline</button>

<button class="tf-btn--circle-1">C1</button>
<button class="tf-btn--circle-2">C2</button>
<button class="tf-btn--circle-3">C3</button>

<button class=" tf-btn--elevated text-blue">Elevated</button>
<button class="tf-btn--circle-2 tf-btn--elevated text-blue bg-white">
<span class="tf-icon-website font-20"></span>
</button>

            

Dropdowns & Inputs

                <div class="tf-dropdown">
Hoverable Dropdown 1
<div class="tf-dropdown-content tf-menu-dropdown"></div>
</div>

<div class="tf-dropdown">
Hoverable Dropdown 2
<div class="tf-dropdown-content tf-menu-dropdown--2"></div>
</div>

<div class="tf-dropdown tf-icon-info">
<div class="tf-dropdown-content tf-menu-dropdown--3"></div>
</div>

<div class="dropdown tf-select">
<span class="tf-icon tf-icon-agenda text-light-blue"></span>
<button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

        <div class="tf-select">
<select>
    <option></option>
</select>
<i class="tf-icon-caret"></i>
</div>

    

                <div class="tf-text-dropdown">
<div class="dropdown-content">
    <p>After their first full lineup was realized...</p>
</div>
<div id="collapse-1" class="collapse dropdown-content">
    <p>Lorem ipsum dolor sit amet</p>
</div>
<div class="collapsed dropdown-toggle" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false">
    Lire plus 
</div>
</div>

            

                <label class="tf-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
</label>

            

Cards

Plagne 1800

Adrenaline Shot

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo a inventore repellat ipsa, aspernatur saepe exercitationem quae, et numquam blanditiis accusantium. Vitae rerum, est repudiandae expedita repellendus eius similique facere!

<div class="tf-card-image tf-border-rounded">
<img class="tf-border-rounded" src="images/pic-1.png">
<div class="card-content">
    <p class="font-27 font-weight-bold">Plagne 1800</p>
</div>
</div>

<div class="tf-card-image-hover">
<img src="images/pic-2.png">
<div class="card-content">
    <div class="card-title">
        <p class="font-24 font-weight-bold">Adrenaline Shot</p>
    </div>
    <p class="hidden-content font-14 font-weight-bold">Lorem ipsum dolor sit amet</p>
</div>
</div>

<div class="tf-card"">
<div class="card-body">
    <div class="card-title">Domaine</div>
    <div class="card-content">
        <div class="row">
            <div class="col-6">
                Un toboggan aquatique de plus de mille
                milliards de kilomètres
            </div>
            <div class="col-6">
                Un toboggan aquatique de plus de mille
                milliards de kilomètres
            </div>
        </div>
    </div>
</div>
</div>

<div class="tf-collapse">
<div class="card-header">
    <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
    </button>
    <span class="tf-icon-caret"></span>
</div>

<div id="collapseOne" class="collapse show">
    <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
    </div>
</div>
</div>

<div class="position-relative">
<div class="tf-ribbon">                    
    <div class="tf-promo">-60%</div>
</div>
</div>

    

Timeline

<div class="tf-timeline">
<span class="tf-timeline__item tf-timeline__item--active">
    Devis
</span>
<span class="tf-timeline__item tf-timeline__item--active">
    Option
</span>
<span class="tf-timeline__item">
    Réservation enregistrée
</span>
<span class="tf-timeline__item">
    Paiement du solde J-30
</span>
<span class="tf-timeline__item">
    Réception documents de voyage J-7
</span>
<span class="tf-timeline__item">
    Départ
</span>
</div>

Containers

.tf-scroll-container--50vh
Container with max height 50vh and overflow auto. Can be used dropdowns with long content.

.tf-layer
Container that takes full width and height of the closest absolute positioned ansestor. Can be used for loading layers.

Transitions

• .tf-transition-all-250
• .tf-transition-all-500
• .tf-transition-all-750
• .tf-transition-all-1000

Tabs

Start by giving your wrapper element a nav-tabs attriute data-nav-tabs="mainNavTab" and a .nav-tabs class to your element.

Each child of your wrapper acts as a toggler of tab-panes, give it a data-tab-pane="pane-1" attribute.

Each tab that you want to hide/show, must have both the data-nav-tabs and data-tab-pane attributes with the corresponding values to hide and show themselves.

Toggle

Toggle between any class with data-toggle-class="myClass" and a selector data-toggle-class-target="#toggleMe" attribute.

id="toggleMe"

Hide-show

Needed dependency tf.libs.scroll-tester.js

Consider you have an element with a data-on-inside-screen-class="bg-red" attribute.
This element will toggle the class *bg-red every time the target attribute is on our screen.
Now let's specify our target attribute now which will be affected data-on-inside-screen-class-target=".mySelector"

*on-outside attributes data-on-outside-screen-class and data-on-outside-screen-class-target

Scroll-to

Scroll-to is a replacement for the native anchoring system, simply add this attribute data-scroll-to="#mySelector" to your element.

Modal iframe

Inject iframe into boostrap modal, using custom data attribute, wrap and basic jquery event listener

Just follow html exemple bellow, jquery code is there only for undesrtanding

                      
                        <div data-modal-iframe-target="my-iframe" data-modal-iframe-url="https://...">
                            Btn
                        </div>
                        <div class="modal ..." data-modal-iframe="my-iframe">
                            ...
                            iframe
                            ...
                        </div>
                        
                        $('body').on('click', '[data-modal-iframe-target]', function(){
                            const obj = $(this);
                            const id = obj.attr('data-modal-iframe-target');
                            const url = obj.attr('data-modal-iframe-url');
                            const modalObj = $('[data-modal-iframe="'+id+'"]');
                            modalObj.find('iframe').attr('src', url);
                            modalObj.modal('show');
                        });