Utilities
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
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 // For cutting text off with ellipsis, see: Text Overflow Shortcuts
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 reusable 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
Text Decoration/Font Style Shortcuts
Use these reusable text rules to avoid having to make specific classes for elements.
// Makes text underlined <p class="text-underline">Hello world</p> // Makes text strikethrough <p class="text-line-through">Hello world</p> // Makes text italicized <p class="text-italic">Hello world</p>
Text Overflow Shortcut
Use this reusable text rule to avoid having to make specific classes for elements.
// Makes text overflow into ellipsis <p class="text-ellipsis">Text that might be too long for its container</p> // Displays as:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin, justo a vestibulum tincidunt, lorem turpis porta erat, ut dapibus orci purus vitae lacus. Vivamus luctus neque non aliquam posuere. Suspendisse at metus vehicula arcu volutpat accumsan ac eu odio. Aenean congue suscipit nisi, eget bibendum felis ullamcorper ac. Praesent ultrices molestie pulvinar. Suspendisse eleifend convallis risus, a porttitor velit auctor sed. Vestibulum at bibendum ex.
Opacity Shortcuts
Reusable classes to quickly set the opacity of an element.
<div class="opacity-0"></div> // Makes element transparent <div class="opacity-100"></div> // Makes element opaque
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>
Accessibility Shortcuts
Use these pre-made rules to create elements that only screenreader users can see.
// .visible-sr and .visible-sr-focusable // Visually hidden element which is still accessible to users with a screenreader // This can be used to give context to elements, such as a "Read more" button <a>Read more <span class="visible-sr">about this news article</span></a> // Similiar to .visible-sr, but this element will become visible when it receives focus from the user // This can be used for things like "Skip to content" links at the top of the page <a class="visible-sr-focusable">Skip to main content</a>