Utilities

Classes to Quickly Tweak Elements
Margin and Padding Shortcuts

To quickly set an element's margin or padding, you can use shortcuts built into Frow. You can set margin and padding in ranges of 0 to 25 by 5 pixel increments and from 30 to 100 in 10 pixel increments. Margin shortcuts can also be set to auto.

// Margin shortcuts
<div class="m-0">      //   0px margin on all sides
<div class="mx-5">     //   5px margin on the left and right
<div class="my-10">    //  10px margin on the top and bottom
<div class="mt-15">    //  15px margin on the top
<div class="mr-20">    //  20px margin on the right
<div class="mb-25">    //  25px margin on the bottom
<div class="ml-30">    //  30px margin on the left
<div class="mx-auto">  //  margin:auto on the left and right

// Padding shortcuts
<div class="p-40">     //  40px padding on all sides
<div class="px-50">    //  50px padding on the left and right
<div class="py-60">    //  60px padding on the top and bottom
<div class="pt-70">    //  70px padding on the top
<div class="pr-80">    //  80px padding on the right
<div class="pb-90">    //  90px padding on the bottom
<div class="pl-100">   // 100px padding on the left

Full Width Shortcut

This class adds a quick width:100% rule to elements.

// .width-100

// A full width div
<html>
  <body>
    <div class="width-100"> // Without this class, the div wouldn't be full width
  </body>
</html>
Full Height Shortcut

This class adds a quick height:100% rule to elements. Super handy in certain cases, especially when wanting to do full-height webpages, where you have to make sure all elements are height:100% from <html> and <body> downwards.

// .height-100

// A full height div
<html class="height-100"> // Without this class, the div wouldn't be full height
  <body class="height-100"> // Without this class, the div wouldn't be full height
    <div class="height-100" style="background-color:#03A9F4;color:#fff;">
      Cool!
    </div>
  </body>
</html>
Auto Width and Height Shortcuts

These classes add quick width:auto and height:auto rules to elements.

// .width-auto and .height-auto

// To force width:auto
<div class="width-auto"></div>

// To force height:auto
<div class="height-auto"></div>
Box Shadow Shortcuts

Make items pop off the page with these box shadow classes.

// .shadow-light and .shadow-dark

// For light-colored backgrounds
<div class="shadow-light"></div>

// For dark-colored backgrounds
<div class="shadow-dark"></div>

Important Note: These classes only provide the drop shadow, nothing else. This makes it usable on any type of element, such as buttons, etc.

Text Align Shortcuts

Use these pre-made text align rules to avoid having to make specific classes for elements.

// Text Align Shortcuts

<p class="text-left"></p>     // Makes text left justified
<p class="text-center"></p>   // Makes text center justified
<p class="text-right"></p>    // Makes text right justified
<p class="text-justify"></p>  // Makes text justified
Text Transform Shortcuts

Use these pre-made text transform rules to avoid having to make specific classes for elements.

// Makes text uppercase
<p class="text-uppercase">Hello world</p>
// Displays as: HELLO WORLD

// Makes text lowercase
<p class="text-lowercase">Hello world</p>
// Displays as: hello world

// Makes text capitalized
<p class="text-capitalize">Hello world</p>
// Displays as: Hello World
Clickable/Not-Clickable Shortcuts

Two simple classes to change which cursor appears on an element. Clickable's rule is also automatically applied to any elements with the attribute of onclick.

// .clickable and .not-clickable

// These would all make the cursor change to a pointer on hover
<div class="clickable"></div>
<div onclick="function()"></div>

// This would force the cursor to not change to a pointer
<a href="http://frowcss.com" class="not-clickable"></a>
Customize