Classes

Bootstrap add-on

Bootstrap often lacks the logic we need and we have to write it ourselves. Not now 2007 and saving kilobytes does not make sense.

GitHub

Usage

Just download wide-classes.css and include it in your html.

Library structure

There is a main file this wide-classes.css
The following files are imported into it:

  • layout.sass
  • bg.sass
  • text.sass
  • size.sass
  • position.sass
  • border.sass
  • filter.sass
  • hover.sass
  • transform.sass

I recommend checking out each of them. considering that they are very small and very simple.

Classes

Layout

  • 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
  • All
    fr fc fcc fcs frs fce fre fcb fca frc frb fra fccc fcbc fcac frcc frbc frac fcsc frsc fcss frss fccs frcs frce fcce fcse frse fcee free

Will need

  • no-scrollbar
    Doesn't prohibit scrolling, just hides the scrollbar.
  • ratio-1-1
    aspect-ratio: 1 / 1
  • disable-tap-select
    Disable tap highlighting and user select.
  • enable-tap-select-text
    Enable tap highlighting and user select.
  • enable-tap-select-all
    Enable tap highlighting and user select. user-select: all
  • Other
    pointer-events-none ratio-2-1 ratio-1-2

Size

  • h-min
    height: min-content
  • w-max
    width: max-content
  • w-0 w-5 w-10 w-15 ... w-100
    width: 0% to 100%
  • maxw-0px minw-0px maxw-50px minw-50px maxw-100px maxw-150px ... maxw-2000px minw-2000px
    max & min-width: 0px to 2000px
    maxw-10 maxw-15 maxw-20 ... maxw-100
    max-width: 10% to 100%
  • All, but just example
    w-0 ... w-100 h-0 ... h-100 minw-0px ... maxw-1000px maxh-0px ... minh-1000px maxw-10 ... minw-100 maxh-10 ... minh-100 minw-100vw maxh-100vh w-max w-min h-max h-min

Text

  • fw-1 ... fw-10
    font-weight: 100 to 1000
  • text-white-30 ... text-white-95
    Text color from rgb(242, 242, 242) to rgb(88, 88, 88) in relative values.
  • Other
    text-left text-center text-right color-inherit

Position

  • top-0 ... top-5 bottom-0 ... bottom-5 left-0 ... left-5 right-0 ... right-5
    Positioning at 0 to 2rem

Transform

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

Hover

  • hover-scale-20
    On hover: scale 1.2
  • hover-scale-10
    On hover: scale 1.1
  • hover-scale-5
    On hover: scale 1.05
  • All
    hover-scale-20 hover-scale-10 hover-scale-5 hover-scale-4 hover-scale-3 hover-scale-2

Border

  • border-black-10 ... border-black-45
    Border color from rgba(#000, .1) to rgba(#000, .45)

Background

  • bg-black-10 ... bg-black-45
    Background color from rgba(#000, .1) to rgba(#000, .45)
  • bg-clip-padding
    Background padding: padding-box

Filter

  • invert-10 ... invert-100
    Invert color from 0.1 to 1

Transition

  • transition-d-50 ... transition-d-5000
    Transition duration 50, 100, 150, 200, 300, 400, 500, 1000, 2000, 5000 ms
  • transition-tf-l transition-tf-e transition-tf-ei transition-tf-eo transition-tf-eio
    Transition timing funcs: linear, ease, ease-in, ease-out, ease-in-out
  • transition-all
    transition-property: all