Classes

CSS Utility Library for Flexbox Layout

Enhance your Bootstrap and Tailwind CSS projects with powerful flexbox utility classes.
Perfect for developers who need more layout control with responsive design support.

100+ CSS utility classes • Responsive breakpoints • Bootstrap & Tailwind compatible • Free & open source

GitHub

Quick Start Guide

Get started with Wide Classes in minutes. Simply download the wide-classes.min.css file and include it in your HTML.

Layout

Class structure: f{flexDirection}{justifyContent}{alignItems}

flex-direction:
r → row
c → column
justify-content:
c → center
s → start
e → end
b → between
a → around
ev → evenly
st → stretch
align-items:
c → center
s → start
e → end
b → baseline
st → stretch

Values ev and st are highlighted with dashes: fr-ev-c, fc-st

  • fccc
    display: flex flex-direction: column justify-content: center align-items: center
  • frcc
    display: flex flex-direction: row justify-content: center align-items: center
  • frsc
    display: flex flex-direction: row justify-content: start align-items: center
  • fcbc
    display: flex flex-direction: column justify-content: space-between align-items: center
  • frac
    display: flex flex-direction: row justify-content: space-around align-items: center
  • sm:frcc
    @media (min-width: 640px) display: flex flex-direction: row justify-content: center align-items: center
  • lg:fc-st
    @media (min-width: 1024px) display: flex flex-direction: column justify-content: stretch
  • All
    fc fr fca fcb fcc fce fcs fra frb frc fre frs fcab fcac fcae fcas fcbb fcbc fcbe fcbs fccb fccc fcce fccs fceb fcec fcee fces fcsb fcsc fcse fcss frab frac frae fras frbb frbc frbe frbs frcb frcc frce frcs freb frec free fres frsb frsc frse frss fc-ev fc-st fr-ev fr-st fca-st fcb-st fcc-st fce-st fcs-st fra-st frb-st frc-st fre-st frs-st fc-ev-b fc-ev-c fc-ev-e fc-ev-s fc-st-b fc-st-c fc-st-e fc-st-s fr-ev-b fr-ev-c fr-ev-e fr-ev-s fr-st-b fr-st-c fr-st-e fr-st-s fc-ev-st fc-st-st fr-ev-st fr-st-st

Responsive breakpoints:

Breakpoint:
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
Usage:
sm:frcc
md:fcbc
lg:frsc
xl:fc-st
2xl:fr-ev-c

All layout classes support responsive prefixes. Use breakpoint:class format.

Will need

  • no-scrollbar
    Does not disable scrolling, just hides the scrollbar.
  • disable-tap-select
    Disables touch highlighting and text selection.
  • enable-tap-select-text
    Enables touch highlighting and text selection.
  • enable-tap-select-all
    Enables touch highlighting and selection of all text. user-select: all
  • tdn
    text-decoration: none
  • rotate360anim
    360-degree rotation animation

Transform

  • invert-w
    transform: scaleX(-1)
  • invert-h
    transform: scaleY(-1)

Why Choose Wide Classes?

🚀 Performance

Lightweight CSS library with minimal impact on your project size.

📱 Responsive

Built-in responsive breakpoints for mobile-first design approach.

🔧 Easy Integration

Works seamlessly with Bootstrap, Tailwind CSS, and any CSS framework.

💻 Developer Friendly

Intuitive class naming system that's easy to remember and use.