Various components

Documentation of various components

  1. Home
  2. Components
  3. Components

Icons

Examples

Extra large icons

Large icons

Medium icons

Small icons

Extra small icons

Extra large icons

Large icons

Medium icons

Small icons

Extra small icons

Extra large icons

Large icons

Medium icons

Small icons

Extra small icons

Extra large icons

Large icons

Medium icons

Small icons

Extra small icons

Extra large icons

Large icons

Medium icons

Small icons

Extra small icons

Extra large icons

Large icons

Medium icons

Small icons

Extra small icons

Extra large icons

Large icons

Medium icons

Small icons

Extra small icons

Icon box

Extra large icon box

Large icon box

Medium icon box

Small icon box

Extra small icon box

Extra large icon box

Large icon box

Medium icon box

Small icon box

Extra small icon box

Left icon box

Lorem ipsum dolore

Lorem ipsum dolore

Lorem ipsum dolore

Lorem ipsum dolore

Right icon box

Lorem ipsum dolore

Lorem ipsum dolore

Lorem ipsum dolore

Lorem ipsum dolore

Top icon box

Lorem ipsum dolore dolor

Lorem ipsum dolore dolor

Lorem ipsum dolore dolor

Lorem ipsum dolore dolor

Bottom icon box

Lorem ipsum dolore dolor

Lorem ipsum dolore dolor

Lorem ipsum dolore dolor

Lorem ipsum dolore dolor

Installation

<!-- FONT AWESOME -->
<link rel="stylesheet" href="../HTWF/scripts/iconsmind/line-icons.min.css">
<!-- ICONS MIND LINE ICONS-->
<link rel="stylesheet" href="../HTWF/scripts/iconsmind/line-icons.min.css">
<!-- ICONS MIND SOLID ICONS -->
<link rel="stylesheet" href="../HTWF/scripts/iconsmind/solid-icons.min.css">

Usage

<!-- Extra large -->
<i class="im-add-window text-xl"></i>
<!-- Large -->
<i class="im-add-window text-l"></i>
<!-- Medium -->
<i class="im-add-window text-m"></i>
<!-- Small -->
<i class="im-add-window text-s"></i>
<!-- Extra small -->
<i class="im-add-window text-xs"></i>

<!-- DEFAULT -->
<i class="im-add-window text-m"></i>
<!-- CIRCLE ICONS -->
<i class="im-add-window text-m circle"></i>
<!-- CIRCLE IMAGES -->
<i class="fa text-m circle onlycover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>
<!-- CIRCLE IMAGES ICONS -->
<i class="fa fa-gears text-xl circle cover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>
<!-- SQUARE ICONS -->
<i class="im-add-window text-m square"></i>
<!-- SQUARE IMAGES -->
<i class="fa text-m square onlycover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>
<!-- SQUARE IMAGES ICONS  -->
<i class="fa fa-gears text-xl square cover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>

<!-- Large icon box -->
<div class="icon-box">
    <i class="im-timer-2 text-xl"></i><label class="text-l">Be Happy</label>
</div> 
<!-- Medium icon box -->
<div class="icon-box">
<i class="im-flash text-m"></i><label class="text-s">Be Happy</label>
</div>
<!-- Small icon box -->
<div class="icon-box">
    <i class="im-flash text-s"></i><label class="text-xs">Be Happy</label>
</div>
<!-- Extra small icon box -->
<div class="icon-box">
<i class="im-flash text-xs"></i><label class="text-xs">Be Happy</label>
</div>

<!-- LEFT ICON SUBTITLE BOX -->
<div class="icon-box">
    <div class="icon-box-cell">
        <i class="im-timer-2 text-xl"></i>
    </div>
    <div class="icon-box-cell">
        <label class="text-m">Be Happy</label>
        <p class="text-s">L'orem ipsum</p>
    </div>
</div>  
<!-- RIGHT ICON SUBTITLE BOX -->
<div class="icon-box icon-box-right">
    <div class="icon-box-cell">
        <label class="text-m">Be Happy</label>
        <p class="text-s">L'orem ipsum</p>
    </div>
    <div class="icon-box-cell">
        <i class="im-add-window text-xl"></i>
    </div>
</div>
<!-- TOP ICON SUBTITLE BOX -->
<div class="icon-box icon-box-top-bottom">
    <div class="icon-box-cell">
        <i class="im-home text-xl"></i>
    </div>
    <div class="icon-box-cell">
        <label class="text-m">Be Happy</label>
        <p class="text-s">L'orem ipsum dolor</p>
    </div>
</div>
<!-- BOTTOM ICON SUBTITLE BOX -->
<div class="icon-box icon-box-top-bottom">
    <div class="icon-box-cell">
        <label class="text-m">Be Happy</label>
        <p class="text-s">L'orem ipsum dolor</p>
    </div>
    <div class="icon-box-cell">
        <i class="im-flash text-xl"></i>
    </div>
</div>

Main settings

Name Type Description
Default icon HTML Use code <i class="fa fa-icon-name"></i> to show a FontAwesome icon. You can found complete icons list here. To change a icon replace class fa-icon-name with the class of choosen icon. There are 5 icon sizes: extra large text-xl, large text-l, medium text-m, small text-s, extra small text-xs.
Circle icon CSS class Add class circle to icon object. Example: <i class="im-add-window text-m circle"></i>.
Circle image CSS class Add classes circle and onlycover to icon object and set the image to show with CSS style. Example: <i class="fa text-m circle onlycover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>.
Circle image icon CSS class Add class circle and cover to icon object and set the image to show. Example: <i class="fa text-m circle cover" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>.
Square icon CSS class Add class square to icon object. Example: <i class="im-add-window text-m square"></i>.
Horizontal icon list position CSS class You can set 4 icon list positions:
Position Description
Right Insert the icon after the label text. Example: ... <label class="text-s">Item text</label><i class="im-book text-m circle"></i> ... .
Left Insert the icon before the label text. Example: ... <i class="im-book text-m circle"></i><label class="text-s">Item text</label> ... .
Top Insert the icon before the label text and add class icon-list-top-bottom to icon list code.
Example: <div class="icon-list icon-list-top-bottom"><div class="list-item"><i class="im-book text-m circle"></i><label class="text-s">Item text</label></div></div>.
Bottom Insert the icon after the label text and add class icon-list-top-bottom to icon list code.
Example: <div class="icon-list icon-list-top-bottom"><div class="list-item"><label class="text-s">Item text</label><i class="im-book text-m circle"></i></div></div>.
Horizontal icon list alignment CSS class You can set 3 icon list alignments:
Alignment Description
Center Add class text-center to icon list object. Example <div class="icon-list text-center"> ... </div>.
Right Add class text-right to icon list object. Example: <div class="icon-list text-right"> ... </div>.
Left This is default alignment. Example: <div class="icon-list"> ... </div>.
Vertical icon list alignment CSS class You can set 3 icon list alignments:
Alignment Description
Center Add class text-center to fa-ul code. Example: <ul class="fa-ul text-center"> ... </ul>.
Right Add class text-right to fa-ul code. Example: <ul class="fa-ul text-right"> ... </ul>.
Left This is default alignment. Example: <ul class="fa-ul"> ... </ul>.
Vertical icon list CSS class You can convert horizontal icon list into vertical icon list by add class vertical-icon-list to list object. Example: <div class="icon-list vertical-icon-list"> ... </div>.
Default lists CSS class For use the deafult decimal, dots, and squares lists add class ul-dots or ul-squares or ul-decimal to list object. Example: <><ul class="ul-decimal"> ... </ul>.

Complete documentation and external resources

Font Awesome Icons Mind

Lists

Horizontal icons list

Extra large icons list

Large icons list

Medium icons list

Small icons list

Extra small icons list

Extra large icons list

Large icons list

Medium icons list

Small icons list

Extra small icons list

Extra large icons list

Large icons list

Medium icons list

Small icons list

Extra small icons list

Right icons list

Left icons list

Top icons list

Bottom icons list

Left alignment

Right alignment

Center alignment

ALL RightS RESERVED FRAMEWORK Y HTWF SOME TEXT OTHER WORDS ENVATO STUDIOS
ALL RightS RESERVED FRAMEWORK Y HTWF SOME TEXT OTHER WORDS ENVATO STUDIOS
ALL RightS RESERVED FRAMEWORK Y HTWF SOME TEXT OTHER WORDS ENVATO STUDIOS

Vertical icons list

Large icons list

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

Medium icons list

  • List item text
  • List item text
  • List item text
  • List item text
  • List item text
  • List item text
  • List item text

Small icons list

  • List item text
  • List item text
  • List item text
  • List item text
  • List item text
  • List item text
  • List item text

Extra small icons list

  • List item text
  • List item text
  • List item text
  • List item text
  • List item text
  • List item text
  • List item text

Left alignment

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

Right alignment

  • List item text
  • List item text
  • List item text
  • List item text
  • List item text
  • List item text
  • List item text

Center alignment

  • List item text one
  • List item text two
  • List item text three
  • List item text four
  • List item text five
  • List item text six
  • List item text seven

Usage

<!-- Extra large icons list -->
<ul class="fa-ul text-xl">
    <li><i class="fa-li im-timer-2"></i> List item</li>
    <li><i class="fa-li im-alarm-clock"></i> List item</li>
</ul>
<!-- Large icons list -->
<ul class="fa-ul text-l">
    <li><i class="fa-li im-timer-2"></i> List item</li>
    <li><i class="fa-li im-alarm-clock"></i> List item</li>
</ul>
<!-- Medium icons list -->
<ul class="fa-ul text-m">
    <li><i class="fa-li im-timer-2"></i> List item text</li>
    <li><i class="fa-li im-alarm-clock"></i> List item text</li>
</ul>
<!-- Small icons list -->
<ul class="fa-ul text-s">
    <li><i class="fa-li im-timer-2"></i> List item text</li>
    <li><i class="fa-li im-alarm-clock"></i> List item text</li>
</ul>
<!-- Extra small icons list -->
<ul class="fa-ul text-xs">
    <li><i class="fa-li im-timer-2"></i> List item text</li>
    <li><i class="fa-li im-alarm-clock"></i> List item text</li>
</ul>

<!-- Left alignment -->
<ul class="fa-ul text-s">
    <li><i class="fa-li im-timer-2"></i> List item</li>
    <li><i class="fa-li im-alarm-clock"></i> List item</li>
</ul>
<!-- Right alignment -->
<ul class="fa-ul text-right text-s">
    <li><i class="fa-li im-timer-2"></i> List item text</li>
    <li><i class="fa-li im-alarm-clock"></i> List item text</li>
</ul>
<!-- Center alignment -->
<ul class="fa-ul text-s text-center">
    <li><i class="fa-li im-timer-2"></i> List item text one</li>
    <li><i class="fa-li im-alarm-clock"></i> List item text two</li>
</ul>

<!-- Extra large icons list -->
<div class="icon-list text-center">
    <div class="list-item">
        <label class="text-m">Item text</label><i class="im-book text-xl"></i>
    </div>
    <div class="list-item">
        <label class="text-m">Item text</label><i class="im-add-window text-xl"></i>
    </div>
</div> 
<!-- Large icons list -->
<div class="icon-list text-center">
    <div class="list-item">
        <label class="text-m">Item text</label><i class="im-book text-l"></i>
    </div>
    <div class="list-item">
        <label class="text-m">Item text</label><i class="im-add-window text-l"></i>
    </div>
</div> 

<div class="text-center">
    <!-- Right icons list -->
    <div class="icon-list text-center">
        <div class="list-item">
            <label class="text-s">Item text</label><i class="im-book text-m circle"></i>
        </div>
        <div class="list-item">
            <label class="text-s">Item text</label><i class="im-add-window text-m circle"></i>
        </div>
    </div>
    <!-- Left icons list -->
    <div class="icon-list text-center">
        <div class="list-item">
            <i class="im-book text-m circle"></i><label class="text-s">Item text</label>
        </div>
        <div class="list-item">
            <i class="im-add-window text-m circle"></i><label class="text-s">Item text</label>
        </div>
    </div>
    <!-- Top icons list -->
    <div class="icon-list icon-list-top-bottom text-center">
        <div class="list-item">
            <i class="im-book text-m circle"></i><label class="text-s">Item text</label>
        </div>
        <div class="list-item">
            <i class="im-add-window text-m circle"></i><label class="text-s">Item text</label>
        </div>
    </div>
    <!-- Bottom icons list -->
    <div class="icon-list icon-list-top-bottom text-center">
        <div class="list-item">
            <i class="im-book text-m circle"></i><label class="text-s">Item text</label>
        </div>
        <div class="list-item">
            <i class="im-add-window text-m circle"></i><label class="text-s">Item text</label>
        </div>
    </div>
</div> 

<!-- Left alignment -->
<div class="icon-list">
    <div class="list-item">
        <label class="text-s">Item text</label><i class="im-book text-m circle"></i>
    </div>
    <div class="list-item">
        <label class="text-s">Item text</label><i class="im-add-window text-m circle"></i>
    </div>
</div>
<!-- Right alignment -->
<div class="icon-list text-right">
    <div class="list-item">
        <i class="im-book text-m circle"></i><label class="text-s">Item text</label>
    </div>
    <div class="list-item">
        <i class="im-add-window text-m circle"></i><label class="text-s">Item text</label>
    </div>
</div>
<!-- Center alignment -->
<div class="icon-list text-center">
    <div class="list-item">
        <label class="text-s">Item text</label><i class="im-book text-m circle"></i>
    </div>
    <div class="list-item">
        <label class="text-s">Item text</label><i class="im-add-window text-m circle"></i>
    </div>
</div>

<!-- EXAMPLE 1 -->
<div class="tag-row">
    <span>ALL RightS RESERVED</span>
    <span>FRAMEWORK Y</span>
    <span>HTWF</span>
</div>
<!-- EXAMPLE 2 -->
<div class="tag-row icon-row">
    <span>ALL RightS RESERVED</span>
    <span>FRAMEWORK Y</span>
    <span>HTWF</span>
</div>
<!-- EXAMPLE 3 -->
<div class="tag-row icon-row icon-row-square">
    <span>ALL RightS RESERVED</span>
    <span>FRAMEWORK Y</span>
    <span>HTWF</span>
</div>
<!-- EXAMPLE 4 -->
<div class="tag-row icon-row icon-row-circle">
    <span>ALL RightS RESERVED</span>
    <span>FRAMEWORK Y</span>
    <span>HTWF</span>
</div>

Text lists

Good list title here

Text of secondary area

21$

Good list title here

Text of secondary area

21$

Good list title here

Text of secondary area

21$

Steamed king crab

Duis aute irure dolo irure dolor in reprehenderit in voluptate velito esse cillume.

9$

Roast partridge

Duis aute irure dolo irure dolor in reprehenderit in voluptate velito esse cillume.

9$

Slow roasted white

Duis aute irure dolo irure dolor in reprehenderit in voluptate velito esse cillume.

9.5$

Good list title here

Placeat orci commodo, amet quo rem architecto possimus, accumsan non faucibus conubia quisquam mauris facere, laoreet nihil est exercitationem elementum blandit consequuntur, distinctio nulla excepteur cursus nonummy? Ullam eiusmod aliquet ullam ducimus iusto, voluptas, numquam tellus pharetra nesciunt habitasse enim? Cubilia est deserunt ante. Modi nullam, doloribus alias! Maxime fringilla.

Good list title here

Placeat orci commodo, amet quo rem architecto possimus, accumsan non faucibus conubia quisquam mauris facere, laoreet nihil est exercitationem elementum blandit consequuntur, distinctio nulla excepteur cursus nonummy? Ullam eiusmod aliquet ullam ducimus iusto, voluptas, numquam tellus pharetra nesciunt habitasse enim? Cubilia est deserunt ante. Modi nullam, doloribus alias! Maxime fringilla.

Good list title here

Placeat orci commodo, amet quo rem architecto possimus, accumsan non faucibus conubia quisquam mauris facere, laoreet nihil est exercitationem elementum blandit consequuntur, distinctio nulla excepteur cursus nonummy? Ullam eiusmod aliquet ullam ducimus iusto, voluptas, numquam tellus pharetra nesciunt habitasse enim? Cubilia est deserunt ante. Modi nullam, doloribus alias! Maxime fringilla.

  • Client: Awesome Company
  • Location: Mountain View CA 94043
  • Surface Area: 450,000 m2
  • Year Completed: 2014
  • Value: $250.000
  • Architect: Jason & Perry
  • Client: Awesome Company
  • Location: Mountain View CA 94043
  • Surface Area: 450,000 m2
  • Year Completed: 2014
  • Value: $250.000
  • Architect: Jason & Perry

Latest posts

Return to the future day
02.06.2015
We can do
02.06.2015
Hacking team 24 - The last match
02.06.2015
Hacking team 24 - The last match
02.06.2015

Latest posts

26.05.2015
Return to the future day

Lorem ipsum dolor sit amet, conse adipisicing elit, sed do eiusmod tempor incididunt ...

28.05.2015
The web 3.0 vision

Lorem ipsum dolor sit amet, conse adipisicing elit, sed do eiusmod tempor incididunt ...

30.05.2015
Bitcoin and the banks

Lorem ipsum dolor sit amet, conse adipisicing elit, sed do eiusmod ...

Usage

<div class="list-items">
    <div class="list-item">
        <div class="row">
            <div class="col-md-9">
                <h3>Good list title here</h3>
                <p>Text of secondary area</p>
            </div>
            <div class="col-md-3">
                <span>21$</span>
            </div>
        </div>
    </div>
    <div class="list-item">
        <div class="row">
            <div class="col-md-9">
                <h3>Good list title here</h3>
                <p>Text of secondary area</p>
            </div>
            <div class="col-md-3">
                <span>21$</span>
            </div>
        </div>
    </div>
</div>

<div class="list-items">
    <div class="list-item list-item-img">
        <div class="row">
            <div class="col-md-9">
                <i class="onlycover circle icon" style="background-image:url(http://www.framework-y.com/images/thumb.png)"></i>
                <h3>Steamed king crab</h3>
                <p>
                    Duis aute irure dolo irure dolor in reprehenderit in voluptate velito esse cillume.
                </p>
            </div>
            <div class="col-md-3">
                <span>9$</span>
            </div>
        </div>
    </div>
    <div class="list-item list-item-img">
        <div class="row">
            <div class="col-md-9">
                <i class="onlycover circle icon" style="background-image:url(http://www.framework-y.com/images/thumb.png)"></i>
                <h3>Roast partridge</h3>
                <p>
                    Duis aute irure dolo irure dolor in reprehenderit in voluptate velito esse cillume.
                </p>
            </div>
            <div class="col-md-3">
                <span>9$</span>
            </div>
        </div>
    </div>
</div>

<div class="list-items list-items-justified">
    <div class="list-item">
        <div class="row">
            <div class="col-md-9">
                <h3>Good list title here</h3>
                <p>Text of secondary area</p>
            </div>
            <div class="col-md-3">
                <span>21$</span>
            </div>
        </div>
    </div>
    <div class="list-item">
        <div class="row">
            <div class="col-md-9">
                <h3>Good list title here</h3>
                <p>Text of secondary area</p>
            </div>
            <div class="col-md-3">
                <span>21$</span>
            </div>
        </div>
    </div>
</div>

<ul class="list-texts">
    <li><b>Client:</b>   Awesome Company</li>
    <li><b>Location:</b>   Mountain View CA 94043</li>
    <li><b>Surface Area:</b> 450,000 m2</li>
    <li><b>Year Completed:</b>   2014</li>
    <li><b>Value:</b> $250.000</li>
    <li><b>Architect:</b>   Jason & Perry</li>
</ul>

<ul class="list-texts list-texts-justified">
    <li><b>Client:</b> <span>Awesome Company</span></li>
    <li><b>Location:</b> <span>Mountain View CA 94043</span></li>
    <li><b>Surface Area:</b> <span>450,000 m2</span></li>
    <li><b>Year Completed:</b> <span>2014</span></li>
    <li><b>Value:</b> <span>$250.000</span></li>
    <li><b>Architect:</b> <span>Jason & Perry</span></li>
</ul>

<!--EXAMPLE 1--> 
<div class="list-group latest-post-list">
    <p class="list-group-item active">Latest posts</p>
    <div class="list-group-item">
        <div class="row">
            <div class="col-md-4">
                <a class="img-box">
                    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
                </a>
            </div>
            <div class="col-md-8">
                <a href="#">
                    <h5>Return to the future day</h5>
                </a>
                <div class="tag-row"><span><i class="fa fa-calendar"></i>02.06.2015</span></div>
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <div class="row">
            <div class="col-md-4">
                <a class="img-box">
                    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
                </a>
            </div>
            <div class="col-md-8">
                <a href="#">
                    <h5>We can do</h5>
                </a>
                <div class="tag-row"><span><i class="fa fa-calendar"></i>02.06.2015</span></div>
            </div>
        </div>
    </div>
</div>
<!--EXAMPLE 2--> 
<div class="list-group">
    <p class="list-group-item active">Latest posts</p>
    <div class="list-group-item">
        <div class="tag-row"><span><i class="fa fa-calendar"></i>26.05.2015</span></div>
        <a href="#">
            <h5>Return to the future day</h5>
        </a>
        <p>
            ...
        </p>
    </div>
    <div class="list-group-item">
        <div class="tag-row"><span><i class="fa fa-calendar"></i>28.05.2015</span></div>
        <a href="#">
            <h5>The web 3.0 vision</h5>
        </a>
        <p>
            ...
        </p>
    </div>
</div>

Google maps

Examples

Installation

<script src='../HTWF/scripts/google.maps.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?sensor=false&key=[YOUR_KEY]'></script>

Usage

<div class="google-map" data-address="New York, US"></div>

<div class="google-map" data-skin="gray" data-address="Tokyo, Japan"></div> 

<div class="google-map" data-marker="http://www.framework-y.com/images/marker-map.png" data-coords="28.6139391,77.20902120000005"></div>

Main settings

Name Type Description
HTML initialization CSS class 1 ) Add class google-map to target object.
2 ) Add attribute data-address="Address, City, State" or data-coords="latitude,longitude" to target object.
3 ) Replace [YOUR_KEY] of google maps script with your API key, you can get your key here: developers.google.com/maps
You can get coords from website gps-coordinates.net.
Javascript initialization Javascript 1 ) Set the target object as HTML initialization and add attribute data-trigger="manual" and others attributes you need like data-address="Address, City, State". Example: <div id="my-map" class="google-map" data-address="New York, US" data-trigger="manual"></div>.
2 ) Initialize the Google Map with function $('#my-map').googleMap();.
HTML settings Data attribute Full list of HTML attributes:

Data attribute Default Description Example
data-address -- Address of the map, with sintax: address, city, state. Google maps recognize many others address formats. data-address="251 Monroe Ave, Kenilworth, NJ 07033, USA"
data-coords -- GPS coordinates of the map. You can get its from gps-coordinates.net. data-coords="40.7127837,-74.00594130000002"
data-marker Google Marker image link of the map. data-marker="http://www.site.it/my-marker.png"
data-skin Google Skin style and color of the map. You can choose 3 built-in skins: gray, black, green. Delete this attribute for default google map skin. data-skin="black"
data-zoom 12 Zoom level of map. data-zoom="5"
Marker position -- Position of the marker on the map. You can set 4 different positions:
Data attribute Description
data-marker-pos="col-md-6-left" Marker is on half left part of map.
data-marker-pos="col-md-6-right" Marker is on half right part of map.
data-marker-pos="center-top" Marker is on top part of map.
data-marker-pos="center-bottom" Marker is on bottom part of map.
Marker position offset 0 Offset adjustment position of the marker on the map. You can set offset from top and from left:
Data attribute Description
data-marker-pos-top="123" Set the offset from top of the marker, replace 123 with offset in pixel
data-marker-pos-left="123" Set the offset from left of the marker, replace 123 with offset in pixel
Custom skin style Mixed You can create your skins from website snazzymaps.com.
1 ) Select a ready skin map or create your own skin.
2 ) Copy skin array JavaScript Style Array.
3 ) Open the script ../js/google.maps.min.js and go to last line, add a new skin on array arrSkins. Now you can use your skin like the others built-in skins.

Complete documentation and external resources

Documentation Plugin website

Advanced table

Examples

ID Email Date
10253 eduardo@pingpong.com 29.10.2013
10252 robert@bingo.com 28.10.2013
10251 simon@yahoo.com 27.10.2013
10250 tim@microsoft.com 26.10.2013
10249 lila@google.com 25.10.2013
10248 eduardo@pingpong.com 24.10.2013
10247 robert@bingo.com 23.10.2013
10246 simon@yahoo.com 22.10.2013
10245 tim@microsoft.com 21.10.2013
10000 pierre@google.com 20.10.2013
200554 alex@pingpong.com 29.10.2013
458580 mat@bingo.com 28.10.2013
587888 lisa@yahoo.com 27.10.2013
52220774 sara@microsoft.com 26.10.2013
10249 nike@google.com 25.10.2013
885646345 mit@pingpong.com 24.10.2013
5654636 robert@bingo.com 23.10.2013
0024574 don@yahoo.com 22.10.2013
0788 tim@microsoft.com 21.10.2013
10244 alberto@google.com 20.10.2013
ID Name Logo More info Link Link
01 Walter White ../images/large/image-x.jpg,http://www.framework-y.com/images/thumb.png Read more,https://it.wikipedia.org/wiki/Walter_White Read more ...,https://it.wikipedia.org/wiki/Walter_White fa-external-link,https://it.wikipedia.org/wiki/Walter_White
02 Jesse Bruce Pinkman ../images/large/image-x.jpg,http://www.framework-y.com/images/thumb.png Read more,https://it.wikipedia.org/wiki/Jesse_Pinkman Read more ...,https://it.wikipedia.org/wiki/Jesse_Pinkman fa-external-link,https://it.wikipedia.org/wiki/Jesse_Pinkman
-1 Skyler White ../images/large/image-x.jpg,http://www.framework-y.com/images/thumb.png Read more,https://it.wikipedia.org/wiki/Skyler_White Read more ...,https://it.wikipedia.org/wiki/Skyler_White fa-external-link,https://it.wikipedia.org/wiki/Skyler_White
03 Hank Schrader ../images/large/image-x.jpg,http://www.framework-y.com/images/thumb.png Read more,https://it.wikipedia.org/wiki/Hank_Schrader Read more ...,https://it.wikipedia.org/wiki/Hank_Schrader fa-external-link,https://it.wikipedia.org/wiki/Hank_Schrader
21 Saul Goodman ../images/large/image-x.jpg,http://www.framework-y.com/images/thumb.png Read more,https://it.wikipedia.org/wiki/Saul_Goodman Read more ...,https://it.wikipedia.org/wiki/Saul_Goodman fa-external-link,https://it.wikipedia.org/wiki/Saul_Goodman
00 Gustavo "Gus" Fring ../images/large/image-x.jpg,http://www.framework-y.com/images/thumb.png Read more,https://it.wikipedia.org/wiki/Gus_Fring Read more ...,https://it.wikipedia.org/wiki/Gus_Fring fa-external-link,https://it.wikipedia.org/wiki/Gus_Fring
04 Mike Ehrmantraut ../images/large/image-x.jpg,http://www.framework-y.com/images/thumb.png Read more,https://it.wikipedia.org/wiki/Mike_Ehrmantraut Read more ...,https://it.wikipedia.org/wiki/Mike_Ehrmantraut fa-external-link,https://it.wikipedia.org/wiki/Mike_Ehrmantraut
11 Marie Schrader ../images/large/image-x.jpg,http://www.framework-y.com/images/thumb.png Read more,https://it.wikipedia.org/wiki/Marie_Schrader Read more ...,https://it.wikipedia.org/wiki/Marie_Schrader fa-external-link,https://it.wikipedia.org/wiki/Marie_Schrader
# Name Surname Extra
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Installation

<link rel="stylesheet" href='../HTWF/scripts/jquery.bootgrid.css'>
<script src='../HTWF/scripts/jquery.bootgrid.min.js'></script>

Usage

<table id="grid-basic" class="table table-condensed table-hover table-striped bootgrid-table">
    <thead>
        <tr>
            <th data-column-id="id">
                <a class="column-header-anchor sortable">
                    <span class="text">ID</span><span class="icon fa"></span>
                </a>
            </th>
            <th data-column-id="email">
                <a class="column-header-anchor sortable">
                    <span class="text">Email</span><span class="icon fa"></span>
                </a>
            </th>
            <th data-column-id="date">
                <a class="column-header-anchor sortable">
                    <span class="text">Date</span><span class="icon fa fa-sort-desc"></span>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr data-row-id="0">
            <td>10253</td>
            <td>eduardo@pingpong.com</td>
            <td>29.10.2013</td>
        </tr>
        <tr data-row-id="1">
            <td>45454</td>
            <td>info@pingpong.com</td>
            <td>15.10.2013</td>
        </tr>
    </tbody>
</table>

<table class="table table-condensed table-hover table-striped bootgrid-table">
    <thead>
        <tr>
            <th data-column-id="id" class="text-left">
                <a href="#" class="column-header-anchor sortable">
                    <span class="text">ID</span><span class="icon fa"></span>
                </a>
            </th>
            <th data-column-id="name" class="text-left" style="">
                <a href="#" class="column-header-anchor sortable">
                    <span class="text">Name</span><span class="icon fa"></span>
                </a>
            </th>
            <th data-column-id="logo" data-formatter="image">
                <a href="#" class="column-header-anchor">
                    <span class="text">Logo</span><span class="icon fa"></span>
                </a>
            </th>
            <th data-column-id="more-info" data-formatter="button">
                <a href="#" class="column-header-anchor">
                    <span class="text">More info</span><span class="icon fa"></span>
                </a>
            </th>
            <th data-column-id="link" data-formatter="link">
                <a href="#" class="column-header-anchor">
                    <span class="text">Link</span><span class="icon fa fa-sort-desc"></span>
                </a>
            </th>
            <th data-column-id="link-icon" data-formatter="link-icon">
                <a href="#" class="column-header-anchor">
                    <span class="text">Link</span><span class="icon fa fa-sort-desc"></span>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr data-row-id="0">
            <td>01</td>
            <td>Walter White</td>
            <td>http://www.framework-y.com/images/thumb-large.png,http://www.framework-y.com/images/thumb.png</td>
            <td>Read more,https://it.wikipedia.org/wiki/Walter_White</td>
            <td>Read more ...,https://it.wikipedia.org/wiki/Walter_White</td>
            <td>fa-external-link,https://it.wikipedia.org/wiki/Walter_White</td>
        </tr>
    </tbody>
 </table>

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Surname</th>
            <th>Extra</th>
         </tr>
    </thead>
    <tbody>
       <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
         </tr>
    </tbody>
</table>

<table class="grid-table border-table">
    <tbody>
        <tr>
            <td><img src="http://www.framework-y.com/images/thumb.png"></td>
            <td><img src="http://www.framework-y.com/images/thumb.png"></td>
            <td><img src="http://www.framework-y.com/images/thumb.png"></td>
            <td><img src="http://www.framework-y.com/images/thumb.png"></td>
        </tr>
        <tr>
            <td><img src="http://www.framework-y.com/images/thumb.png"></td>
            <td><img src="http://www.framework-y.com/images/thumb.png"></td>
            <td><img src="http://www.framework-y.com/images/thumb.png"></td>
            <td><img src="http://www.framework-y.com/images/thumb.png"></td>
        </tr>
    </tbody>
</table>

Main settings

Name Type Description
HTML initialization CSS class Add class bootgrid-table to html table. Example: <table class="bootgrid-table">.
HTML settings Data attribute Most of table settings can be passed through attribute data-options="option:value,option:value, ...">. Example: <table class="bootgrid-table" data-options="navigation:0, sorting:false, multiSort:false">. Full options here
Javascript initialization Javascript Add the table's HTML without class bootgrid-table and initialize the table:

$(document).ready(function () {
    $("#table-id").bootgrid({
        navigation:0,
        sorting:false
    });
});
Cell types HTML Default cell type accept only strings but you can use others 4 built-in cell types: lightbox image, button link, link, link icon. Set cell types by add data-formatter="type" to correct column of table header. Example: <th data-formatter="link-icon"> ... </th>.

After the cell type is setted insert the correct string values into table contents. The string must be correctly formatted, see below documentation.

Data formatter String
image [Thumb image] , [Full size image] thumb-image.jpg,fullsize-image.jpg
button [Button text] , [Link] Read more,https://www.google.com
link [Link text] , [Link] Read more,https://www.google.com
link-icon [fa-icon-name] , [Link] fa-external-link,https://www.google.com<
Plugin dependency

Images lightbox of table rows require Magnific Popup Plugin (../HTWF/scripts/jquery.magnific-popup.min.js) for lightbox image.

Lightbox documentation here
Grid table Information To hide borders remove class border-table. To show a full border around the table add the class full-border-table. This table not need any external .css file or .js script. Use class white for light borders. Example: <table class="grid-table border-table full-border-table white"> ... <table>.
You can use this web service to generate table in seconds: tablesgenerator.com.
Table styles CSS class You can use 4 styles: table-striped, table-bordered, table-hover, table-condensed.
Responsive CSS class To show set full width cells on mobile add class grid-table-sm-12 or grid-table-xs-12 to grid-table obejct.

Complete documentation and external resources

Documentation Plugin website Github page

Counter

Examples

SMILES
PIZZAS
MPH
KG

PIZZAS ORDERED

HAPPY CLIENTS

PROJECTS COMPLETED

COMMENTS RESERVED

Fans

Clients

KG of coffee

Peoples

Installation

<script src='../HTWF/scripts/jquery.progress-counter.js'></script>

Usage

<!-- EXAMPLE 1 -->
<div class="counter-box-simple"><span class="counter text-l" data-to="12358"></span><span class="text-s">SMILES</span></div>
<!-- EXAMPLE 2 -->
<div class="counter-box-simple"><span class="counter text-l" data-speed="5000" data-to="1500354" data-refresh-interval="100"></span></div>
<!-- EXAMPLE ICON COUNTER -->
<div class="icon-box icon-box-top-bottom counter-box-icon">
    <div class="icon-box-cell">
        <i class="fa fa-comments text-xl"></i>
    </div>
    <div class="icon-box-cell">
        <b><label class="counter text-l" data-speed="20000" data-to="850034"></label></b>
        <p class="text-s">COMMENTS RESERVED</p>
    </div>
</div>
<!-- EXAMPLE ICON COUNTER HORIZONTAL -->
<div class="icon-box counter-box-icon">
    <div class="icon-box-cell">
        <i class="im-timer-2 text-xl"></i>
    </div>
    <div class="icon-box-cell">
        <label class="counter text-l" data-speed="20000" data-to="850034" data-separator=",">850.034</label>
        <p class="text-s">Lorem ipsum</p>
    </div>
</div>

Main settings

Name Type Description
Initialization Mixed Add class counter and attribute data-to="123" to target object, replace 123 with your counter number.
Javascript initialization Javascript $('#target').countTo(); or $('#target').countTo({option:value, option:value, ...}); Full options here.
Settings Data attribute
Data attribute Description
data-from="0" Starting number of the counter.
data-to="100" Finish number of the counter.
data-speed="5000" Counter progress speed, in milliseconds.
data-refresh-interval="500" Counter refresh interval for update the displayed value, in milliseconds.
data-from="0" Starting number of the counter.
data-separator="." Set the char inserted between the numbers.

Complete documentation and external resources

Documentation Github page

Countdown

Examples

00 Days 00 Hours 00 Minutes 00 Seconds
Expire in 00 : 00 : 00 : 00 days

00 Days 00 Hours 00 Minutes 00 Seconds

00 Days 00 Hours 00 Minutes

00
Days
00
Hours
00
Mins
00
Secs

Installation

<link rel="stylesheet" href='../HTWF/css/components.css'>
<script src='../HTWF/scripts/jquery.progress-counter.js'></script>

Usage

<!-- EXAMPLE 1 -->
<div class="countdown" data-time="02/21/2018 10:30:00" data-utc-offset="-5">
    <i class="fa fa-clock-o  text-l" style="margin-right:15px;"></i>
    <span class="days countdown-values text-l">00</span><span class="countdown-label"> Days</span>
    <span class="hours countdown-values text-l">00</span><span class="countdown-label"> Hours</span>
    <span class="minutes countdown-values text-l">00</span><span class="countdown-label"> Minutes</span>
    <span class="seconds countdown-values text-l">00</span><span class="countdown-label"> Seconds</span>
</div>
<!-- EXAMPLE 2 -->
<div id="js-countdown" class="countdown">
    <span class="text-l" style="font-weight:300">STAY</span>
    <span class="days countdown-values text-l">00</span> :
    <span class="hours countdown-values text-l">00</span> :
    <span class="minutes countdown-values text-l">00</span> :
    <span class="seconds countdown-values text-l">00</span> <span class="text-l" style="font-weight:300">DAYS TO FINISH</span>
</div>
<script>
    $(document).ready(function () {
        $('#js-countdown').downCount({
            date: '08/27/2018 12:00:00',
            offset: -5
        });
    });
</script>

<!-- EXAMPLE 1 -->
<div class="icon-box icon-box-top-bottom col-center">
    <div class="icon-box-cell">
        <label class="text-m">ESTIMATED DEADLINE</label>
        <i class="im-home text-xl"></i>
    </div>
    <div class="icon-box-cell">
        <p class="countdown text-s" data-time="02/21/2018 10:30:00" data-utc-offset="-5">
            <span class="days countdown-values text-m">00</span><span class="countdown-label"> Days</span>
            <span class="hours countdown-values text-m">00</span><span class="countdown-label"> Hours</span>
            <span class="minutes countdown-values text-m">00</span><span class="countdown-label"> Minutes</span>
            <span class="seconds countdown-values text-m">00</span><span class="countdown-label"> Seconds</span>
        </p>
    </div>
</div>
<!-- EXAMPLE 2 -->
<div class="icon-box icon-box-top-bottom col-center">
    <div class="icon-box-cell">
        <label class="text-m">START COUNTING</label>
        <i class="fa fa-calendar-o text-xl"></i>
    </div>
    <div class="icon-box-cell">
        <p class="countdown text-s" data-time="02/21/2018 10:30:00" data-utc-offset="-5">
            <span class="days countdown-values text-m">00</span><span class="countdown-label"> Days</span>
            <span class="hours countdown-values text-m">00</span><span class="countdown-label"> Hours</span>
            <span class="minutes countdown-values text-m">00</span><span class="countdown-label"> Minutes</span>
        </p>
    </div>
</div>

<div class="countdown text-s" data-time="02/21/2018 10:30:00" data-utc-offset="-5">
    <div>
        <span></span>
    </div>
    <div>
        <span class="days countdown-values text-m">00</span><br /><span class="countdown-label">Days</span>
    </div>
    <div>
        <span class="hours countdown-values text-m">00</span><br /><span class="countdown-label">Hours</span>
    </div>
    <div>
        <span class="minutes countdown-values text-m">00</span><br /><span class="countdown-label">Mins</span>
    </div>
    <div>
        <span class="seconds countdown-values text-m">00</span><br /><span class="countdown-label">Secs</span>
    </div>
    <div>
        <span></span>
    </div>
</div>

Main settings

Name Type Description
Initialization Mixed Add class countdown and attribute data-time="mm/dd/yyyy hh:mm:ss" to target object, insert into the target container the objects for days, hours, minutes, seconds by add classes days,hours,minutes,seconds. You not need to insert all data-time values.
Javascript initialization Mixed Add class countdown to target object and insert into it the objects for days, hours, minutes, seconds by add classes days,hours,minutes,seconds. You not need to insert all data-time values. $('#js-countdown').downCount({ date: 'mm/dd/yyyy hh:mm:ss', offset: number });
Settings Data attribute
Data attribute Description
date="mm/dd/yyyy hh:mm:ss" Date and time of countdown.
offset="-1" UTC Timezone offset. You can get your UTC here.

Complete documentation and external resources

Documentation

Progress bar

Examples

Web Development

Design

75% Complete

UX design

60% Complete

Marketing and SEO

% Complete

Status

60% Complete

Status %

Installation

<script src='../HTWF/scripts/jquery.progress-counter.js'></script>

Usage

<!-- EXAMPLE 1 -->
<p class="progress-label">Web Development</p>
<div class="progress">
    <div class="progress-bar" data-progress="60"></div>
</div>
<!-- EXAMPLE 2 -->
<div class="progress">
    <div class="progress-bar progress-bar-striped" data-progress="75">
        <span><span>75% Complete</span></span>
    </div>
</div>
<!-- EXAMPLE 3 -->
<div class="progress">
    <div class="progress-bar" data-progress="60">
        <span>60% Complete</span>
    </div>
</div>
<!-- EXAMPLE 4 -->
<div class="progress">
    <div class="progress-bar progress-bar-striped active" data-progress="75">
        <span><span class="counter" data-to="75"></span> % Complete</span>
    </div>
</div>
<!-- EXAMPLE 5 -->
<div class="row vertical-row">
    <div class="col-md-3">
        <p class="progress-label">Status</p>
    </div>
    <div class="col-md-9">
        <div class="progress">
            <div class="progress-bar" data-progress="60">
                60% Complete
            </div>
        </div>
    </div>
</div>
<!-- EXAMPLE 6 -->
<div class="row vertical-row">
    <div class="col-md-9">
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" data-progress="60"></div>
        </div>
    </div>
    <div class="col-md-3">
        Status <span class="counter" data-to="75"></span> %
    </div>
</div>

Main settings

Name Type Description
settings Data attribute
Data attribute Description
data-progress="60" Set the percentage of progress bar from 0 to 100.
data-trigger="value" Set when to activate the progress bar. Default is when progress bar is visible on viewport. You can stop auto activation by add data-trigger="manual".
Striped background CSS class Add class progress-bar-striped to progress bar.
Animated background CSS class Add classes progress-bar-striped and active to progress bar.
Animated percentage counter CSS class Insert into the target container the counter code. This feature require the counter component, you can use all its features. Counter documentation here.

Complete documentation and external resources

Bootstrap documentation Counter documentation

Circle progress bar

Examples

Dloremque laudantium, totam rem aperiam

The Framework Y

Great from any side

The Framework Y

Great from any side

The Framework Y

Great from any side

Installation

<link rel="stylesheet" href='../HTWF/css/components.css'>
<script src='../HTWF/scripts/jquery.progress-counter.js'></script>

Usage

<!-- EXAMPLE 1 --> 
<div class="progress-circle" data-color="#6f5499" data-progress="60"></div>
<!-- EXAMPLE 2 -->
<div class="progress-circle" data-color="#6f5499" data-progress="20">
    <div class="inner-circle">
        <div class="inner-center">
            <span class="counter-circle"></span>
        </div>
    </div>
</div>
<!-- EXAMPLE 3 -->
<div id="js-circle-demo" class="progress-circle" data-trigger="scroll">
    <div class="inner-circle" style="display: table;">
        <div class="inner-center">
            <span class="counter-circle"></span>
        </div>
    </div>
</div>
<script>
$(document).ready(function () {
    $(window).scroll(function () {
        if (isScrollView("#js-circle-demo")) {
            var tr = $('#js-circle-demo').attr("data-trigger");
            if (isEmpty(tr) || tr == "scroll") {
                $('#js-circle-demo').circleProgress({
                    value: 0.75,
                    thickness: 2,
                    size: $("#js-circle-demo").outerWidth(),
                    fill: {
                        gradient: ["#337AB7", "#337AB7"]
                    },
                    startAngle: -Math.PI / 2
                }).on('circle-animation-progress', function (event, progress, stepValue) {
                    $("#js-circle-demo .counter-circle").html(String(stepValue.toFixed(2)).substr(1));
                });
                $("#js-circle-demo").attr("data-trigger", "null");
            }
        }
    });
});
</script>
<!-- EXAMPLE 4 -->
<div class="progress-circle" data-color="#6f5499" data-progress="55">
    <div class="inner-circle">
        <div class="inner-center">
            <span class="counter-circle"></span>
        </div>
    </div>
</div>

<!-- EXAMPLE 1 -->
<div class="progress-circle" data-color="#6f5499" data-progress="60" data-thickness="5" data-options="lineCap:square">
    <div class="inner-circle">
        <div class="inner-center">
            Dloremque laudantium, totam rem aperiam
        </div>
    </div>
</div>
<!-- EXAMPLE 2 -->
<div class="progress-circle" data-color="#6f5499" data-progress="60" data-thickness="5" data-options="lineCap:square">
    <div class="inner-circle">
        <div class="inner-center">
            <div class="subtitle c">
                <h2 class="main">The Framework Y</h2>
                <p class="sub">Great from any side</p>
                <hr class="d">
                <i class="fa fa-trophy text-m"></i> <span class="counter-circle"></span>
            </div>
        </div>
    </div>
</div>
<!-- EXAMPLE 3 -->
<div class="progress-circle" data-color="#6f5499" data-progress="60"  data-thickness="5" data-options="lineCap:square">
    <div class="inner-circle">
        <div class="inner-center">
            <div class="subtitle c">
                <h2 class="main">The Framework Y</h2>
                <p class="sub">Great from any side</p>
                <hr class="d">
                <span class="counter-circle"></span>
            </div>
        </div>
    </div>
</div>
<!-- EXAMPLE 4 -->
<div class="progress-circle" data-color="#6f5499" data-progress="60"  data-thickness="5" data-options="lineCap:square">
    <div class="inner-circle">
        <div class="inner-center">
            <div class="subtitle c icon line2">
                <h2 class="main">The Framework Y</h2>
                <p class="sub">Great from any side</p>
                <i class="fa fa-trophy"></i>
            </div>
        </div>
    </div>
</div>                           

<!-- EXAMPLE 1 -->
<div class="progress-circle" data-color="#6f5499" data-progress="60" data-options="lineCap:square">
    <div class="inner-circle">
        <div class="inner-center">
            <i class="fa fa-fighter-jet text-xl"></i>
        </div>
    </div>
</div>
<!-- EXAMPLE 2 -->
<div class="progress-circle" data-color="#6f5499" data-progress="60" data-options="lineCap:square">
    <div class="inner-circle">
        <div class="inner-center">
            <i class="fa fa-dashboard circle cover text-xl" style="background-image:url('http://www.framework-y.com/images/thumb.png')"></i>
        </div>
    </div>
</div>
<!-- EXAMPLE 3 -->
<div class="progress-circle" data-color="#6f5499" data-progress="60" data-options="lineCap:square">
    <div class="inner-circle">
        <div class="inner-center icon-background">
            <span class="counter-circle"></span>
        </div>
    </div>
</div>
<!-- EXAMPLE 4 -->
<div class="progress-circle" data-color="#6f5499" data-progress="60" data-options="lineCap:square">
    <div class="inner-circle">
        <div class="inner-center">
            <div class="circle bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb.png')">
                <span class="counter-circle"></span>
            </div>
        </div>
    </div>
</div>

Main settings

Name Type Description
Initialization Mixed Add class progress-circle and attribute data-color="#6f5499" data-progress="75" to target object.
Javascript initialization Mixed Add class progress-circle and attribute data-trigger="manual" to target object. Initialize the progress bar with function $('#circle').circleProgress({ option:value, option:value,...});. See example 2 and documentation for more details.
settings Data attribute Most of settings can be passed through data-options attribute: data-options="option-1:value,option-2:value, ...". Full options here. The main options are:
Data attribute Description
data-color="#6f5499" data-progress="75" Set the percentage of progress bar from 0 to 100.
data-thickness="5" Set the width of circle.
data-size="250" Set the width and height of progress bar, default value is same size of container.
data-color="#565656" Set the color of progress bar.
data-unit="%" The text after the number

Complete documentation and external resources

Documentation Plugin website Github page

Timeline

Examples

  • 2015

    25 febbruary 2018

    Mussum ipsum cacilds

    11 hours ago via Twitter

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis.

  • 2015

    25 febbruary 2018

    Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis.

  • 2015

    25 febbruary 2018

    Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis.

  • 2015

    25 febbruary 2018

    Mussum ipsum cacilds

    11 hours ago via Twitter

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis.

  • 2015

    25 febbruary 2018

    Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis.

  • 2015

    25 febbruary 2018

    Mussum ipsum cacilds

    11 hours ago via Twitter

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis.

  • 2015

    25 febbruary 2018

    Mussum ipsum cacilds

    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis.

Installation

<link rel="stylesheet" href='../HTWF/css/components.css'>

Usage

<ul class="timeline">
    <li>
        <div class="timeline-badge"></div>
        <div class="timeline-label"><h4>2015</h4><p>25 febbruary 2018</p></div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">Mussum ipsum cacilds</h4>
                <p><small class="text-muted"><i class="fa fa-clock"></i> 11 hours ago via Twitter</small></p>
            </div>
            <div class="timeline-body">
                <p>
                    ...
                </p>
            </div>
        </div>
    </li>
    <li class="timeline-inverted">
        <div class="timeline-badge"></div>
        <div class="timeline-label"><h4>2015</h4><p>25 febbruary 2018</p></div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">Mussum ipsum cacilds</h4>
            </div>
            <div class="timeline-body">
                <p>
                    ...
                </p>
            </div>
        </div>
    </li>
    <li>
        <div class="timeline-badge"></div>
        <div class="timeline-label"><h4>2015</h4><p>25 febbruary 2018</p></div>
        <div class="timeline-panel">
            <div class="timeline-heading">
                <h4 class="timeline-title">Mussum ipsum cacilds</h4>
            </div>
            <div class="timeline-body">
                <p>
                    ...
                </p>
            </div>
        </div>
    </li>
</ul>

Main settings

Name Type Description
Right timeline panel CSS class Add class timeline-inverted to panel code. Example: ... <li class="timeline-inverted"> ... </li> ... .
Right timeline CSS class Add class timeline-inverted to all panels. For left timeline remove class timeline-inverted from all panels.
Timeline subtitle HTML Add class <p><small class="text-muted"> your text </small></p> after title.
Example: 

 <div class="timeline-heading">
    <h4 class="timeline-title">Mussum ipsum cacilds</h4>
    <p><small class="text-muted"> your text </small></p>
</div>