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

Classes to make elements scroll or cutoff rather than the default overflow spillover.

// Overflow (both x and y axis)
<div class="overflow-visible"></div> // The default behavior of spilling out of the container
<div class="overflow-hidden"></div> // Don't render the spillover
<div class="overflow-auto"></div> // Have the content scroll within the container

// You can specify single axis rules
<div class="overflow-x-hidden"></div>
<div class="overflow-y-auto"></div>

// No shortcut is provided for overflow: scroll as overflow: auto is more popular
Flexbox Grow and Shrink Shortcuts

These classes add quick grow and shrink rules to elements within a .frow or flexbox.

// For flex-shrink: 0
<div class="shrink-0"></div>
// Use .shrink-0 when an element is being squished within a .frow

// For flex-shrink: 1
<div class="shrink-1"></div>

// For flex-grow: 0
<div class="grow-0"></div>

// For flex-grow: 1
<div class="grow-1"></div>
// Use .grow-1 to have an element fill all remaining space within a .frow
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="https://frowcss.com" class="not-clickable"></a>
@Media Print Shortcuts

Classes to hide or show elements when a printer physically prints out the website.

// .hidden-print and .visible-print

// This element would not appear when printed out
<div class="hidden-print"></div>

// This element would only appear when printed out
<div class="visible-print"></div>
Customize