Documents

Title
GridTab
Description
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
Category
Navigation
Library
GridTab
jQuery
Include Files
<!-- Add jQuery and GridTab -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="libs/gridtab/gridtab.min.js"></script>
<link rel="stylesheet" href="libs/gridtab/gridtab.min.css">

* No CDN distribution, so need to download.

Basic markup

        <script>
            $(function () {
                $('.gridtab').gridtab({
                    option
                });
            });
        </script>        
        <dl class="gridtab">
            <dt>Tab 1</dt>
            <dd>Tab Content 1</dd>
            <dt>Tab 2</dt>
            <dd>Tab Content 2</dd>  
            ...  
        </dl>
    
Attachment Table

GridTab Options

PropertyTypeDefaultDescription
gridinteger4Number of grids or tabs per row
borderWidthinteger2Width of the borders.
tabBorderColorstring'#ddd'border color of the tabs (Hex Color Code).
tabPaddinginteger25padding/spacing around the tabs.
contentBorderColorstring'#ddd'border color of the content section (Hex Color Code).
contentPaddinginteger25padding/spacing around content section.
contentBackgroundstring'#fff'Background color for the content section (Hex Color Code).
activeTabBackgroundstring'#fff'Background color for the active tab (Hex Color Code).
responsiveArraynullArray of objects having breakpoints and settings object which is enabled at a given breakpoint.
selectorsObjectsee table belowObject with options to set custom selectors.
configObjectsee table belowObject with options to enable features like, setting initially active tab, next/prev controls, close button, transition speed etc.
callbacksObjectopen:false, close:falseCallbacks for the open and close states of the content section.

GridTab Selectors

selectorsTypeDefaultDescription
tabstring'> dt'By default, the click event is triggered on the entire tab ('dt'). This can be replaced with any custom selector within the dt. For example: '.readmore'.
closeButtonstring'.gridtab__close'Custom class for the close button, if 'showClose' is set to true.
nextArrowstring'.gridtab__next.gridtab__arrow'Custom class for the next button, if 'showArrows' is set to true.
prevArrowstring'.gridtab__prev.gridtab__arrow'Custom class for the prev button, if 'showArrows' is set to true.
disabledArrowstring'.is-disabled'Custom class for the disabled state of next/prev buttons, if 'showArrows' is set to true.

GridTab Configuration

configTypeDefaultDescription
layoutstring'grid'Change the value to 'tab' for a tab layout. By default, the layout is 'grid' based.
keepOpenBooleanfalseIf set to true keeps the active tab open (Disables toggle).
speedinteger500Transition speed in milliseconds.
activeTabinteger0Initially active tab. For example, 1 enables the first tab.
showCloseBooleanfalseShows the close button if set to true.
showArrowsBooleanfalseShows the next/prev buttons if set to true.
scrollToTabBooleanfalseScrolls to the active tab on click
rtlBooleanfalseConverts tab to RTL
Related

Source Code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Add jQuery and GridTab -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="libs/gridtab/gridtab.min.js"></script>
    <link rel="stylesheet" href="libs/gridtab/gridtab.min.css">
    <title>GridTab</title>
    <style>
        .grid-wrapper{
            padding: 20px;
            background: #fff;
        }
        [class^='gridtab-']{
            margin: 15px;
            background: #fff;
        }
        [class^='gridtab-'] > dt{
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1 class="dlw-title">GridTab</h1>
        <p class="dlw-description">GridTab is a lightweight jQuery plugin to create grid based responsive tabs.</p>
    </header>
    <section>
        <h2 class="dlw-subtitle">[1] Basic Grid Layout</h2>
        <p>Click the tab surrounded by a border to show the content below.</p>
        <script>
            $(function () {
                $('.gridtab-1').gridtab({
                    // Number of grids.
                    grid: 4,
                    // Padding around the tabs.
                    tabPadding: 15,
                    // Width of the borders.
                    borderWidth: 3,
                    // Padding around tab content.
                    contentPadding: 15
                });
            });
        </script>
        <div class="grid-wrapper">
            <dl class="gridtab-1">
                <dt>Tab 1</dt>
                <dd>
                    <h4>Tab Content 1</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                </dd>
                <dt>Tab 2</dt>
                <dd>
                    <h4>Tab Content 2</h4>
                    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                        In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
                        pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                </dd>
                <dt>Tab 3</dt>
                <dd>
                    <h4>Tab Content 3</h4>
                    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
                        enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
                        ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                </dd>
                <dt>Tab 4</dt>
                <dd>
                    <h4>Tab Content 4</h4>
                    <p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
                        Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
                        sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </dd>
                <dt>Tab 5</dt>
                <dd>
                    <h4>Tab Content 5</h4>
                    <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam
                        quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit
                        amet nibh. Donec sodales sagittis magna.</p>
                </dd>
                <dt>Tab 6</dt>
                <dd>
                    <h4>Tab Content 6</h4>
                    <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
                        Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
                        metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
                </dd>
                <dt>Tab 7</dt>
                <dd>
                    <h4>Tab Content 7</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui
                        quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
                        nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>
                </dd>
                <dt>Tab 8</dt>
                <dd>
                    <h4>Tab Content 8</h4>
                    <p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus
                        ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id
                        dui. Aenean ut eros et nisl sagittis vestibulum.</p>
                </dd>
                <dt>Tab 9</dt>
                <dd>
                    <h4>Tab Content 9</h4>
                    <p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis
                        hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet
                        orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
                </dd>
                <dt>Tab 10</dt>
                <dd>
                    <h4>Tab Content 10</h4>
                    <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada.
                        Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.
                        Phasellus accumsan cursus velit.</p>
                </dd>
                <dt>Tab 11</dt>
                <dd>
                    <h4>Tab Content 11</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam,
                        nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
                        consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                        Vestibulum fringilla pede sit amet augue.</p>
                </dd>
                <dt>Tab 12</dt>
                <dd>
                    <h4>Tab Content 12</h4>
                    <p>In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc
                        augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec,
                        volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
                        sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
                </dd>
            </dl>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[2] Tab Layout</h2>
        <p>When the tab is expanded, the border at the bottom of the tab disappears.</p>
        <script>
            $(function () {
                $('.gridtab-2').gridtab({
                    grid: 4,
                    tabPadding: 15,
                    borderWidth: 3,
                    contentPadding: 15,
                    config: {
                        // Change to tab layout.
                        layout: 'tab'
                    }
                });
            });
        </script>
        <div class="grid-wrapper">
            <dl class="gridtab-2">
                <dt>Tab 1</dt>
                <dd>
                    <h4>Tab Content 1</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                </dd>
                <dt>Tab 2</dt>
                <dd>
                    <h4>Tab Content 2</h4>
                    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                        In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
                        pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                </dd>
                <dt>Tab 3</dt>
                <dd>
                    <h4>Tab Content 3</h4>
                    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
                        enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
                        ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                </dd>
                <dt>Tab 4</dt>
                <dd>
                    <h4>Tab Content 4</h4>
                    <p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
                        Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
                        sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </dd>
                <dt>Tab 5</dt>
                <dd>
                    <h4>Tab Content 5</h4>
                    <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam
                        quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit
                        amet nibh. Donec sodales sagittis magna.</p>
                </dd>
                <dt>Tab 6</dt>
                <dd>
                    <h4>Tab Content 6</h4>
                    <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
                        Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
                        metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
                </dd>
                <dt>Tab 7</dt>
                <dd>
                    <h4>Tab Content 7</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui
                        quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
                        nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>
                </dd>
                <dt>Tab 8</dt>
                <dd>
                    <h4>Tab Content 8</h4>
                    <p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus
                        ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id
                        dui. Aenean ut eros et nisl sagittis vestibulum.</p>
                </dd>
                <dt>Tab 9</dt>
                <dd>
                    <h4>Tab Content 9</h4>
                    <p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis
                        hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet
                        orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
                </dd>
                <dt>Tab 10</dt>
                <dd>
                    <h4>Tab Content 10</h4>
                    <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada.
                        Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.
                        Phasellus accumsan cursus velit.</p>
                </dd>
                <dt>Tab 11</dt>
                <dd>
                    <h4>Tab Content 11</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam,
                        nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
                        consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                        Vestibulum fringilla pede sit amet augue.</p>
                </dd>
                <dt>Tab 12</dt>
                <dd>
                    <h4>Tab Content 12</h4>
                    <p>In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc
                        augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec,
                        volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
                        sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
                </dd>
            </dl>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[3] Active Tab</h2>
        <p>Activate the specified tab.</p>
        <script>
            $(function () {
                $('.gridtab-3').gridtab({
                    grid: 4,
                    tabPadding: 15,
                    borderWidth: 3,
                    contentPadding: 15,
                    config: {
                        layout: 'tab',
                        // Initially active tab.
                        activeTab: 2,
                        // Keeps the active tab open.            
                        keepOpen: true
                    }
                });
            });
        </script>
        <div class="grid-wrapper">
            <dl class="gridtab-3">
                <dt>Tab 1</dt>
                <dd>
                    <h4>Tab Content 1</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                </dd>
                <dt>Tab 2</dt>
                <dd>
                    <h4>Tab Content 2</h4>
                    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                        In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
                        pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                </dd>
                <dt>Tab 3</dt>
                <dd>
                    <h4>Tab Content 3</h4>
                    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
                        enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
                        ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                </dd>
                <dt>Tab 4</dt>
                <dd>
                    <h4>Tab Content 4</h4>
                    <p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
                        Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
                        sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </dd>
                <dt>Tab 5</dt>
                <dd>
                    <h4>Tab Content 5</h4>
                    <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam
                        quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit
                        amet nibh. Donec sodales sagittis magna.</p>
                </dd>
                <dt>Tab 6</dt>
                <dd>
                    <h4>Tab Content 6</h4>
                    <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
                        Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
                        metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
                </dd>
                <dt>Tab 7</dt>
                <dd>
                    <h4>Tab Content 7</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui
                        quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
                        nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>
                </dd>
                <dt>Tab 8</dt>
                <dd>
                    <h4>Tab Content 8</h4>
                    <p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus
                        ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id
                        dui. Aenean ut eros et nisl sagittis vestibulum.</p>
                </dd>
                <dt>Tab 9</dt>
                <dd>
                    <h4>Tab Content 9</h4>
                    <p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis
                        hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet
                        orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
                </dd>
                <dt>Tab 10</dt>
                <dd>
                    <h4>Tab Content 10</h4>
                    <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada.
                        Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.
                        Phasellus accumsan cursus velit.</p>
                </dd>
                <dt>Tab 11</dt>
                <dd>
                    <h4>Tab Content 11</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam,
                        nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
                        consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                        Vestibulum fringilla pede sit amet augue.</p>
                </dd>
                <dt>Tab 12</dt>
                <dd>
                    <h4>Tab Content 12</h4>
                    <p>In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc
                        augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec,
                        volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
                        sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
                </dd>
            </dl>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[4] Navigation Buttons</h2>
        <p>"Next/Previous" "Close" navigation buttons are showed.</p>
        <script>
            $(function () {
                $('.gridtab-4').gridtab({
                    grid: 4,
                    tabPadding: 15,
                    borderWidth: 3,
                    contentPadding: 15,
                    config: {
                        layout: 'tab',
                        // Shows the next/prev buttons.
                        showArrows: true,
                        // Shows the close button.
                        showClose: true
                    }
                });
            });
        </script>
        <div class="grid-wrapper">
            <dl class="gridtab-4">
                <dt>Tab 1</dt>
                <dd>
                    <h4>Tab Content 1</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                </dd>
                <dt>Tab 2</dt>
                <dd>
                    <h4>Tab Content 2</h4>
                    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                        In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
                        pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                </dd>
                <dt>Tab 3</dt>
                <dd>
                    <h4>Tab Content 3</h4>
                    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
                        enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
                        ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                </dd>
                <dt>Tab 4</dt>
                <dd>
                    <h4>Tab Content 4</h4>
                    <p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
                        Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
                        sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </dd>
                <dt>Tab 5</dt>
                <dd>
                    <h4>Tab Content 5</h4>
                    <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam
                        quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit
                        amet nibh. Donec sodales sagittis magna.</p>
                </dd>
                <dt>Tab 6</dt>
                <dd>
                    <h4>Tab Content 6</h4>
                    <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
                        Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
                        metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
                </dd>
                <dt>Tab 7</dt>
                <dd>
                    <h4>Tab Content 7</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui
                        quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
                        nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>
                </dd>
                <dt>Tab 8</dt>
                <dd>
                    <h4>Tab Content 8</h4>
                    <p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus
                        ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id
                        dui. Aenean ut eros et nisl sagittis vestibulum.</p>
                </dd>
                <dt>Tab 9</dt>
                <dd>
                    <h4>Tab Content 9</h4>
                    <p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis
                        hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet
                        orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
                </dd>
                <dt>Tab 10</dt>
                <dd>
                    <h4>Tab Content 10</h4>
                    <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada.
                        Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.
                        Phasellus accumsan cursus velit.</p>
                </dd>
                <dt>Tab 11</dt>
                <dd>
                    <h4>Tab Content 11</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam,
                        nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
                        consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                        Vestibulum fringilla pede sit amet augue.</p>
                </dd>
                <dt>Tab 12</dt>
                <dd>
                    <h4>Tab Content 12</h4>
                    <p>In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc
                        augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec,
                        volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
                        sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
                </dd>
            </dl>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[5] Scroll</h2>
        <p>Click to scroll to the active tab content.</p>
        <script>
            $(function () {
                $('.gridtab-5').gridtab({
                    grid: 4,
                    tabPadding: 15,
                    borderWidth: 3,
                    contentPadding: 15,
                    config: {
                        layout: 'tab',
                        // Scrolls to the active tab on click.
                        scrollToTab: true
                    }
                });
            });
        </script>
        <div class="grid-wrapper">
            <dl class="gridtab-5">
                <dt>Tab 1</dt>
                <dd>
                    <h4>Tab Content 1</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                </dd>
                <dt>Tab 2</dt>
                <dd>
                    <h4>Tab Content 2</h4>
                    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                        In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
                        pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                </dd>
                <dt>Tab 3</dt>
                <dd>
                    <h4>Tab Content 3</h4>
                    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
                        enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
                        ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                </dd>
                <dt>Tab 4</dt>
                <dd>
                    <h4>Tab Content 4</h4>
                    <p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
                        Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
                        sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </dd>
                <dt>Tab 5</dt>
                <dd>
                    <h4>Tab Content 5</h4>
                    <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam
                        quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit
                        amet nibh. Donec sodales sagittis magna.</p>
                </dd>
                <dt>Tab 6</dt>
                <dd>
                    <h4>Tab Content 6</h4>
                    <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
                        Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
                        metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
                </dd>
                <dt>Tab 7</dt>
                <dd>
                    <h4>Tab Content 7</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui
                        quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
                        nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>
                </dd>
                <dt>Tab 8</dt>
                <dd>
                    <h4>Tab Content 8</h4>
                    <p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus
                        ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id
                        dui. Aenean ut eros et nisl sagittis vestibulum.</p>
                </dd>
                <dt>Tab 9</dt>
                <dd>
                    <h4>Tab Content 9</h4>
                    <p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis
                        hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet
                        orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
                </dd>
                <dt>Tab 10</dt>
                <dd>
                    <h4>Tab Content 10</h4>
                    <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada.
                        Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.
                        Phasellus accumsan cursus velit.</p>
                </dd>
                <dt>Tab 11</dt>
                <dd>
                    <h4>Tab Content 11</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam,
                        nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
                        consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                        Vestibulum fringilla pede sit amet augue.</p>
                </dd>
                <dt>Tab 12</dt>
                <dd>
                    <h4>Tab Content 12</h4>
                    <p>In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc
                        augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec,
                        volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
                        sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
                </dd>
            </dl>
        </div>
    </section>
    <section>
        <h2 class="dlw-subtitle">[6] Responsive</h2>
        <p>Switch the grid number according to the window size.</p>
        <script>
            $(function () {
                $('.gridtab-6').gridtab({
                    grid: 4,
                    tabPadding: 15,
                    borderWidth: 3,
                    contentPadding: 15,
                    config: {
                        layout: 'tab'
                    },
                    responsive: [{
                            // Switch the number of grids to 3 with <992px.
                            breakpoint: 992,
                            settings: {
                                grid: 3
                            }
                        },
                        {
                            // Switch the number of grids to 2 with < 768px.
                            breakpoint: 768,
                            settings: {
                                grid: 2
                            }
                        },
                        {
                            // Switch the number of grids to 1 with < 576px.
                            breakpoint: 576,
                            settings: {
                                grid: 1
                            }
                        }
                    ]
                });
            });
        </script>
        <div class="grid-wrapper">
            <dl class="gridtab-6">
                <dt>Tab 1</dt>
                <dd>
                    <h4>Tab Content 1</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
                </dd>
                <dt>Tab 2</dt>
                <dd>
                    <h4>Tab Content 2</h4>
                    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                        In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
                        pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                </dd>
                <dt>Tab 3</dt>
                <dd>
                    <h4>Tab Content 3</h4>
                    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
                        enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
                        ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                </dd>
                <dt>Tab 4</dt>
                <dd>
                    <h4>Tab Content 4</h4>
                    <p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
                        Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
                        sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </dd>
                <dt>Tab 5</dt>
                <dd>
                    <h4>Tab Content 5</h4>
                    <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam
                        quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit
                        amet nibh. Donec sodales sagittis magna.</p>
                </dd>
                <dt>Tab 6</dt>
                <dd>
                    <h4>Tab Content 6</h4>
                    <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
                        Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
                        metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
                </dd>
                <dt>Tab 7</dt>
                <dd>
                    <h4>Tab Content 7</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui
                        quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
                        nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.</p>
                </dd>
                <dt>Tab 8</dt>
                <dd>
                    <h4>Tab Content 8</h4>
                    <p>Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus
                        ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id
                        dui. Aenean ut eros et nisl sagittis vestibulum.</p>
                </dd>
                <dt>Tab 9</dt>
                <dd>
                    <h4>Tab Content 9</h4>
                    <p>Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis
                        hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet
                        orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
                </dd>
                <dt>Tab 10</dt>
                <dd>
                    <h4>Tab Content 10</h4>
                    <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada.
                        Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.
                        Phasellus accumsan cursus velit.</p>
                </dd>
                <dt>Tab 11</dt>
                <dd>
                    <h4>Tab Content 11</h4>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam,
                        nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
                        consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                        Vestibulum fringilla pede sit amet augue.</p>
                </dd>
                <dt>Tab 12</dt>
                <dd>
                    <h4>Tab Content 12</h4>
                    <p>In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc
                        augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec,
                        volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
                        sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
                </dd>
            </dl>
        </div>
    </section>
</body>
</html>

Comment

Search

Style Design
Text Style DesignCSS

Here, design samples of various effects to text are posted.

Headline (Heading) Style DesignCSS

The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.

OL (Ordered List) Style DesignCSS

The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.

HR (Separator Line) Style DesignCSS

The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.

Box Shadow Style DesignCSS

The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.

Layout
How to specify a breakpoint and switch imagesJS

Using <picture> and srcset, it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE.

Grid LayoutCSS

Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.

FlexCSS

Flex is the value of the CSS display property.

Link & Button
Bootstrap ButtonCSS

It is a standard button design of Bootstrap Framework.

Hover.cssCSS

Hover.css is a style-sheet collection of hover effects.

Button.cssCSS

Button.css is collection of CSS3 button animations.

Card
Bootstrap CardCSS

It is a standard Card design of Bootstrap Framework.

Text
Arctext.jsjQuery

Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.

Lettering.jsjQuery

Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.

Textillate.jsjQuery

Textillate.js is a jQuery plugin that adds In / Out animation effects to text.

FitText.jsjQuery

FitText.js is jQuery plugin that fits the font size according to the width of the parent element.

Media
FeedEkjQuery

FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.

YouTube Embed

Introduction of various embedment methods of YouTube.

FitVids.jsjQuery

FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.

xZoomjQuery

xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.

Instagram.cssCSS

Instagram.css is a stylesheet set that filters photos like instagram.

Date
Moment.jsJS

Moment.js is a javascript that processes and displays date and time.

Bootstrap Material DatePickerjQuery

Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.

Table
MultifilterjQuery

Multifilter is jQuery Table Filtering Plugin.

Flex TableCSS

Responsive table using "display: flex;".
Not supported for rowspan.

Grid TableCSS

Responsive table using "display: grid;".
Not supported for rowspan.

Bootstrap TableCSS

It is a standard Table design of Bootstrap Framework.

Form
jQuery Mask PluginjQuery

jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.

Select2 #1. Basic SettingjQuery

Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.

jQuery SearcherjQuery

jQuery Searcher is jQuery search/filtering plugin that supports various markups.

Slider
Bootstrap CarouseljQuery

It is a standard Carousel of Bootstrap Framework.

FlexSlider #1. Single SliderjQuery

FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.

FlexSlider #2. Carousel SliderjQuery

FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.

slick #1. Single SliderjQuery

slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.

slick #2. Carousel SliderjQuery

slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.

Lightbox
fancyBox #1. basic image lightboxjQuery

fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.

fancyBox #2. media lightboxjQuery

fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.

Magnific Popup #1. basic image lightboxjQuery

Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.

Magnific Popup #2. media lightboxjQuery

Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.

Magnific Popup #3. CSS3-based animation effectsjQuery

Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.

Navigation
animsitionjQuery

animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.

GreedyNavjQuery

GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.

GridTabjQuery

GridTab is a lightweight jQuery plugin to create grid based responsive tabs.

jQuery.NiceScrolljQuery

jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.

metisMenujQuery

metisMenu is a jQuery plugin that expands vertical and vertical menus.

fullPage.js #1. basic fullscreen scrollingjQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.

fullPage.js #2. fullscreen scrolling with menujQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..

Offside.js #1. Basic Off-canvasJS

Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.

Offside.js #2. Multiple Off-canvasJS

Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.

Filterizr #1. Basic FilteringjQuery

Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.

Filterizr #2. Advanced FilteringjQuery

Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.

Animation
animsitionjQuery

animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.

Textillate.jsjQuery

Textillate.js is a jQuery plugin that adds In / Out animation effects to text.

ScrollajQuery

Scrolla is jQuery scroll animation plugin.

Hover.cssCSS

Hover.css is a style-sheet collection of hover effects.

Animate.cssCSS

Animate.css is a style-sheet collection of animation effects.

jQuery Easing PluginjQuery

jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.

Background
fullPage.js #1. basic fullscreen scrollingjQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.

fullPage.js #2. fullscreen scrolling with menujQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..

jquery.mb.YTPlayerjQuery

jQuery.mb.YTPlayer is jQuery Background player plugin.

Modal / Tooltip
Hint.cssCSS

Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.

ProtipjQuery

Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.

Social
Framework
Bootstrap CarouseljQuery

It is a standard Carousel of Bootstrap Framework.

Bootstrap CardCSS

It is a standard Card design of Bootstrap Framework.

Bootstrap ButtonCSS

It is a standard button design of Bootstrap Framework.

Bootstrap TableCSS

It is a standard Table design of Bootstrap Framework.

Cheat Sheet
HTML5 Cheat Sheet

HTML5 Cheat Sheet by Make A Website Hub

CSS3 Cheat Sheet

CSS3 Cheat Sheet by Smashing Magazine

Visual Studio Code Keyboard Shortcuts

This is the Visual Studio Code default keyboard shortcut list.

GreenSock Cheat Sheet

Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.

Other
Google Search

On this page you can search for codes collectively.

Design News

It is a news feed about design.