Components

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

Examples horizontal icon lists

EXTRA LARGE ICON LIST

LARGE ICON LIST

MEDIUM ICON LIST

SMALL ICON LIST

EXTRA SMALL ICON LIST
EXTRA LARGE ICON LIST

LARGE ICON LIST

MEDIUM ICON LIST

SMALL ICON LIST

EXTRA SMALL ICON LIST
EXTRA LARGE ICON LIST

LARGE ICON LIST

MEDIUM ICON LIST

SMALL ICON LIST

EXTRA SMALL ICON LIST
RIGHT ICON LIST

LEFT ICON LIST

TOP ICON LIST

BOTTOM ICON LIST
LEFT ALIGNMENT

RIGHT ALIGNMENT

CENTER ALIGNMENT
ALL RIGHTS RESERVED FRAMEWORK Y ENVATO MARKETPLACE SOME TEXT OTHER WORDS ENVATO STUDIOS

ALL RIGHTS RESERVED FRAMEWORK Y ENVATO MARKETPLACE SOME TEXT OTHER WORDS ENVATO STUDIOS

ALL RIGHTS RESERVED FRAMEWORK Y ENVATO MARKETPLACE SOME TEXT OTHER WORDS ENVATO STUDIOS

Examples vertical icon lists

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

Single 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

L'orem ipsum

L'orem ipsum

L'orem ipsum

L'orem ipsum


RIGHT ICON BOX

L'orem ipsum

L'orem ipsum

L'orem ipsum

L'orem ipsum


TOP ICON BOX

L'orem ipsum dolor

L'orem ipsum dolor

L'orem ipsum dolor

L'orem ipsum dolor


BOTTOM ICON BOX

L'orem ipsum dolor

L'orem ipsum dolor

L'orem ipsum dolor

L'orem ipsum dolor


Examples background icons

Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.
Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.

Installation

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

Usage

<!-- EXTRA LARGE -->
<i class="fa fa-anchor text-xl"></i>
<!-- LARGE -->
<i class="fa fa-anchor text-l"></i>
<!-- MEDIUM -->
<i class="fa fa-anchor text-m"></i>
<!-- SMALL -->
<i class="fa fa-anchor text-s"></i>
<!-- EXTRA SMALL -->
<i class="fa fa-anchor text-xs"></i>
<!-- DEFAULT -->
<i class="fa fa-anchor text-m"></i>
<!-- CIRCLE ICONS -->
<i class="fa fa-anchor 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="fa fa-anchor 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>
<!-- EXTRA LARGE ICON LIST -->
<div class="icon-list text-center">
    <div class="list-item">
        <label class="text-m">Item text</label><i class="fa fa-binoculars text-xl"></i>
    </div>
    <div class="list-item">
        <label class="text-m">Item text</label><i class="fa fa-anchor text-xl"></i>
    </div>
</div> 
<!-- LARGE ICON LIST -->
<div class="icon-list text-center">
    <div class="list-item">
        <label class="text-m">Item text</label><i class="fa fa-binoculars text-l"></i>
    </div>
    <div class="list-item">
        <label class="text-m">Item text</label><i class="fa fa-anchor text-l"></i>
    </div>
</div> 
<div class="col-md-12 text-center">
    <!-- RIGHT ICON LIST -->
    <div class="icon-list text-center">
        <div class="list-item">
            <label class="text-s">Item text</label><i class="fa fa-binoculars text-m circle"></i>
        </div>
        <div class="list-item">
            <label class="text-s">Item text</label><i class="fa fa-anchor text-m circle"></i>
        </div>
    </div>
    <!-- LEFT ICON LIST -->
    <div class="icon-list text-center">
        <div class="list-item">
            <i class="fa fa-binoculars text-m circle"></i><label class="text-s">Item text</label>
        </div>
        <div class="list-item">
            <i class="fa fa-anchor text-m circle"></i><label class="text-s">Item text</label>
        </div>
    </div>
    <!-- TOP ICON LIST -->
    <div class="icon-list icon-list-top-bottom text-center">
        <div class="list-item">
            <i class="fa fa-binoculars text-m circle"></i><label class="text-s">Item text</label>
        </div>
        <div class="list-item">
            <i class="fa fa-anchor text-m circle"></i><label class="text-s">Item text</label>
        </div>
    </div>
    <!-- BOTTOM ICON LIST -->
    <div class="icon-list icon-list-top-bottom text-center">
        <div class="list-item">
            <i class="fa fa-binoculars text-m circle"></i><label class="text-s">Item text</label>
        </div>
        <div class="list-item">
            <i class="fa fa-anchor 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="fa fa-binoculars text-m circle"></i>
    </div>
    <div class="list-item">
        <label class="text-s">Item text</label><i class="fa fa-anchor text-m circle"></i>
    </div>
</div>
<!-- RIGHT ALIGNMENT -->
<div class="icon-list text-right">
    <div class="list-item">
        <i class="fa fa-binoculars text-m circle"></i><label class="text-s">Item text</label>
    </div>
    <div class="list-item">
        <i class="fa fa-anchor 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="fa fa-binoculars text-m circle"></i>
    </div>
    <div class="list-item">
        <label class="text-s">Item text</label><i class="fa fa-anchor text-m circle"></i>
    </div>
</div>
<!-- EXAMPLE 1 -->
<div class="tag-row">
    <span>ALL RIGHTS RESERVED</span>
    <span>FRAMEWORK Y</span>
    <span>ENVATO MARKETPLACE</span>
    <span>SOME TEXT</span>
    <span>OTHER WORDS</span>
    <span>ENVATO STUDIOS</span>
</div>
<!-- EXAMPLE 2 -->
<div class="tag-row icon-row">
    <span>ALL RIGHTS RESERVED</span>
    <span>FRAMEWORK Y</span>
    <span>ENVATO MARKETPLACE</span>
    <span>SOME TEXT</span>
    <span>OTHER WORDS</span>
    <span>ENVATO STUDIOS</span>
</div>
<!-- EXAMPLE 3 -->
<div class="tag-row icon-row icon-row-square">
    <span>ALL RIGHTS RESERVED</span>
    <span>FRAMEWORK Y</span>
    <span>ENVATO MARKETPLACE</span>
    <span>SOME TEXT</span>
    <span>OTHER WORDS</span>
    <span>ENVATO STUDIOS</span>
</div>

<!-- EXTRA LARGE ICONS LIST -->
<ul class="fa-ul text-xl">
    <li><i class="fa-li fa fa-language"></i> List item</li>
    <li><i class="fa-li fa fa-adjust"></i> List item</li>
</ul>
<!-- LARGE ICONS LIST -->
<ul class="fa-ul text-l">
    <li><i class="fa-li fa fa-language"></i> List item</li>
    <li><i class="fa-li fa fa-adjust"></i> List item</li>
</ul>
<!-- MEDIUM ICONS LIST -->
<ul class="fa-ul text-m">
    <li><i class="fa-li fa fa-language"></i> List item text</li>
    <li><i class="fa-li fa fa-adjust"></i> List item text</li>
</ul>
<!-- SMALL ICONS LIST -->
<ul class="fa-ul text-s">
    <li><i class="fa-li fa fa-language"></i> List item text</li>
    <li><i class="fa-li fa fa-adjust"></i> List item text</li>
</ul>
<!-- EXTRA SMALL ICONS LIST -->
<ul class="fa-ul text-xs">
    <li><i class="fa-li fa fa-language"></i> List item text</li>
    <li><i class="fa-li fa fa-adjust"></i> List item text</li>
</ul>
<!-- LEFT ALIGNMENT -->
<ul class="fa-ul text-s">
    <li><i class="fa-li fa fa-language"></i> List item</li>
    <li><i class="fa-li fa fa-adjust"></i> List item</li>
</ul>
<!-- RIGHT ALIGNMENT -->
<ul class="fa-ul text-right text-s">
    <li><i class="fa-li fa fa-language"></i> List item text</li>
    <li><i class="fa-li fa fa-adjust"></i> List item text</li>
</ul>
<!-- CENTER ALIGNMENT -->
<ul class="fa-ul text-s text-center">
    <li><i class="fa-li fa fa-language"></i> List item text one</li>
    <li><i class="fa-li fa fa-adjust"></i> List item text two</li>
</ul>
<div class="well icon-background">
    <div>
        ...
    </div>
    <i class="fa fa-heartbeat i-background" style="font-size: 135px; margin-top: 30px;"></i>
</div> 
<!-- LARGE ICON BOX -->
<div class="icon-box">
    <i class="fa fa-language text-xl"></i><label class="text-l">Be Happy</label>
</div> 
<!-- MEDIUM ICON BOX -->
<div class="icon-box">
<i class="fa fa-smile-o text-m"></i><label class="text-s">Be Happy</label>
</div>
<!-- SMALL ICON BOX -->
<div class="icon-box">
    <i class="fa fa-smile-o text-s"></i><label class="text-xs">Be Happy</label>
</div>
<!-- EXTRA SMALL ICON BOX -->
<div class="icon-box">
<i class="fa fa-smile-o 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="fa fa-language 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="fa fa-anchor text-xl"></i>
    </div>
</div>
<!-- TOP ICON SUBTITLE BOX -->
<div class="icon-box icon-box-top-bottom">
    <div class="icon-box-cell">
        <i class="fa fa-cloud-download 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="fa fa-smile-o 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="fa fa-anchor 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="fa fa-anchor 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="fa fa-binoculars text-m circle"></i> ... .
Left Insert the icon before the label text. Example: ... <i class="fa fa-binoculars 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="fa fa-binoculars 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="fa fa-binoculars 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


BASE LISTS


Examples

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$

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

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 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>

GOOGLE MAPS


Examples


Installation

<script src='../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


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/large_wide_x.jpg,../images/user-x.jpg 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/large_wide_x.jpg,../images/user-x.jpg 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/large_wide_x.jpg,../images/user-x.jpg 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/large_wide_x.jpg,../images/user-x.jpg 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/large_wide_x.jpg,../images/user-x.jpg 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/large_wide_x.jpg,../images/user-x.jpg 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/large_wide_x.jpg,../images/user-x.jpg 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/large_wide_x.jpg,../images/user-x.jpg 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='../scripts/jquery.bootgrid.css'>
<script src='../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 (../scripts/jquery.magnific-popup.min.js) for lightbox image.

Lightbox documentation here
Grid table Information To hide borders remove class 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 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


COUNTER


Examples

SMILES
PIZZAS
MPH
KG

PIZZAS ORDERED

HAPPY CLIENTS

PROJECTS COMPLETED

COMMENTS RESERVED


Fans

Clients

KG of coffee

Peoples


Installation

<script src='../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="fa fa-language text-xl"></i>
    </div>
    <div class="icon-box-cell">
        <label class="counter text-l" data-speed="20000" data-to="850034">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-trigger="value" Set when to activate the counter. Default is when counter is visible on viewport. You can stop auto activation by add data-trigger="manual".

Complete documentation and external resources


COUNTDOWN


Examples

00 Days 00 Hours 00 Minutes 00 Seconds
STAY 00 : 00 : 00 : 00 DAYS TO FINISH

00 Days 00 Hours 00 Minutes 00 Seconds

00 Days 00 Hours 00 Minutes

-
00
Days
00
Hours
00
Mins
00
Secs
TIME

Installation

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

Usage

<!-- EXAMPLE 1 -->
<div class="countdown" data-time="02/21/2017 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/2016 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="fa fa-cloud-download text-xl"></i>
    </div>
    <div class="icon-box-cell">
        <p class="countdown text-s" data-time="02/21/2017 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/2017 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/2017 10:30:00" data-utc-offset="-5">
    <div>
        <span class="text-xl">-</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 class="text-xl"> TIME</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


PROGRESS BAR


Examples

Web Development

Design

75% Complete

UX design

60% Complete

Marketing and SEO

% Complete

Status

60% Complete

Status %


Installation

<script src='../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 class="sr-only">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


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='../css/components.css'>
<script src='../scripts/jquery.progress-counter.js'></script> 

Usage

<!-- EXAMPLE 1 --> 
<div class="progress-circle" data-progress="60"></div>
<!-- EXAMPLE 2 -->
<div class="progress-circle" 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-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-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-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-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-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-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-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-progress="60" data-options="lineCap:square">
    <div class="inner-circle">
        <div class="inner-center icon-background">
            <span class="counter-circle"></span>
            <i class="fa fa-soccer-ball-o i-background text-xl" style="margin-top: 45px;"></i>
        </div>
    </div>
</div>
<!-- EXAMPLE 4 -->
<div class="progress-circle" 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-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-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


TIMELINE


Examples

  • 2015

    25 febbruary 2015

    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 2015

    Mussum ipsum cacilds

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

  • 2015

    25 febbruary 2015

    Mussum ipsum cacilds

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

  • 2015

    25 febbruary 2015

    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 2015

    Mussum ipsum cacilds

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

  • 2015

    25 febbruary 2015

    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 2015

    Mussum ipsum cacilds

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


Installation

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

Usage

<ul class="timeline">
    <li>
        <div class="timeline-badge"></div>
        <div class="timeline-label"><h4>2015</h4><p>25 febbruary 2015</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 2015</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 2015</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>