@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true, "plugin_animatecss": false, "plugin_wowjs": false, "plugin_photoswipe": false, "plugin_isotope": false, "plugin_videojs": false }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "css-helpers", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Helpers", "crumbs": "
  • Dashboard
  • CSS
  • Helpers
    • " })

    Height

    You can set custom height for blocks.
    Available sizes: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.

    .h-40
    .h-100 
    <div class="h-40">height: 40px;</div>
<div class="mh-100">max-height: 100px;</div>

    Width

    You can set custom width for blocks.
    Available sizes: 0, 10, 20, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300, 320, 360, 380, 400.
    To set width 100% use this classname .fluid-width.

    .w-40
    .w-120
    .fluid-width 
    <div class="w-40">width: 40px;</div>
<div class="w-120">width: 120px;</div>
<div class="fluid-width">width: 100%;</div>
    You can set custom max-width or min-width for blocks.
    Available sizes: 0, 10, 20, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180, 200, 240, 280, 320, 360, 400, 450, 500, 550, 600, 700, 800, 900, 1000, 1100, 1200. 
    <div class="mw-500">max-width: 500px;</div>
<div class="mw-1200">max-width: 1200px;</div>
<div class="mnw-200">min-width: 200px;</div>
<div class="mnw-400">min-width: 400px;</div>

    Font Weight

    You can set custom font weight for blocks.
    Available sizes: 100, 200, 300, 400, 500, 600, 700, 800, 900.

    weight 100
    weight 400
    weight 700
    weight 900 
    <div class="fw-100">font-weight: 100;</div>
<div class="fw-400">font-weight: 400;</div>
<div class="fw-700">font-weight: 700;</div>
<div class="fw-900">font-weight: 900;</div>

    Font Size

    You can set custom font size for blocks.
    Available sizes: 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 35, 40, 45, 50.

    size 5
    size 10
    size 15
    size 20 
    <div class="fs-5">font-size: 5px;</div>
<div class="fs-10">font-size: 10px;</div>
<div class="fs-15">font-size: 15px;</div>
<div class="fs-20">font-size: 20px;</div>

    Line Height

    You can set custom line height for blocks.
    Available sizes: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50. 
    <div class="lh-20">line-height: 20px;</div>

    Padding

    You can set custom padding for blocks.
    Available paddings: Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 35, 40, 45, 50.
    .p-10
    .pl-10
    .pt-10
    .pr-10
    .pb-10 
    <div class="p-10">padding: 10px;</div>
<div class="pl-10">padding-left: 10px;</div>
<div class="pt-10">padding-top: 10px;</div>
<div class="pr-10">padding-right: 10px;</div>
<div class="pb-10">padding-bottom: 10px;</div>

    Margin

    You can set custom margin for blocks.

    Available margins: Available negative margins: Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 35, 40, 45, 50.
    .m-10
    .ml-10
    .mt-10
    .mr-10
    .mb-10 
    <div class="m-10">margin: 10px;</div>
<div class="ml-10">margin-left: 10px;</div>
<div class="mt-10">margin-top: 10px;</div>
<div class="mr-10">margin-right: 10px;</div>
<div class="mb-10">margin-bottom: 10px;</div>

    Border Radius

    You can set custom border radius for blocks.
    Available sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 25, 30, 35.

    .br-5
    .br-18
    .br-35 
    <div class="br-5">border-radius: 5px;</div>
<div class="br-18">border-radius: 18px;</div>
<div class="br-35">border-radius: 35px;</div>

    Overflow

    You can set overflow.
    • overflow: auto - .of-a
    • overflow: hidden - .of-h
    • overflow: visible - .of-v
    • overflow-x: auto - .of-x-a
    • overflow-x: hidden - .of-x-h
    • overflow-x: visible - .of-x-v
    • overflow-y: auto - .of-y-a
    • overflow-y: hidden - .of-y-h
    • overflow-y: visible - .of-y-v
    <div class="of-a">overflow: auto;</div>
<div class="of-h">overflow: hidden;</div>
<div class="of-v">overflow: visible;</div>
<div class="of-x-a">overflow-x: auto;</div>
<div class="of-x-h">overflow-x: hidden;</div>
<div class="of-x-v">overflow-x: visible;</div>
<div class="of-y-a">overflow-y: auto;</div>
<div class="of-y-h">overflow-y: hidden;</div>
<div class="of-y-v">overflow-y: visible;</div>

    Vertical Align

    This should be vertically aligned
    <div class="valign-wrapper">
  <h5 class="valign">This should be vertically aligned</h5>
</div>

    Text Align

    These classes are for horizontally aligning content. We have .left-align, .right-align and .center-align
    This should be left aligned
    This should be right aligned
    This should be center aligned
    <div>
  <h5 class="left-align">This should be left aligned</h5>
</div>
<div>
  <h5 class="right-align">This should be right aligned</h5>
</div>
<div>
  <h5 class="center-align">This should be center aligned</h5>
</div>

    Quick Floats

    Quickly float things by adding the class left or right to the element. !important is used to avoid specificity issues. 
    <div class="left">...</div>
<div class="right">...</div>

    Hiding Content

    Screen Range
    .hide Hidden for all Devices
    .hide-on-small-only Hidden for Mobile Only
    .hide-on-med-only Hidden for Tablet Only
    .hide-on-med-and-down Hidden for Tablet and Below
    .hide-on-med-and-up Hidden for Tablet and Above
    .hide-on-large-only Hidden for Desktop Only 
    <div class="hide-on-small-only"></div>

    Other

    Text Uppercase
    .text-uppercase

    uppercase example 
    <span class="text-uppercase">uppercase example</span>
    Cursor Pointer
    .cursor

    Hover Over Me! 
    <span class="cursor">Hover Over Me!</span>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })