Breakpoints

This library uses a set of breakpoints to work with the responsiveness.

  • xxl: Breakpoint for screens with a witdh over 1600px
  • xl Breakpoint for screens with a witdh over 1200px
  • lg Breakpoint for screens with a witdh over 992px
  • md Breakpoint for screens with a witdh over 768px
  • sm Breakpoint for screens with a witdh over 576px
  • xs Breakpoint for screens with a witdh over 300px

Displays

There are several classes to help you with the display of elements. Their use is pretty simple, just add a class to an element. They also work with the responsive breakpoints of Grid Row CSS

  • .d-block: Sets the element to display as a block
  • .d-inline-block: Sets the element to display as an inline-block
  • .d-flex: Sets the element to display as a flex
  • .d-inline-flex: Sets the element to display as an inline-flex element
  • .d-grid: Sets the element to display as a grid
  • .d-none: Sets the display propertie to none

Use with breakpoints

You can use breakpoints to decide wether or not to apply a style to the element based on the viewport width.

  • .d-{breakpoint}-block: Sets the element to display as a block
  • .d-{breakpoint}-inline-block: Sets the element to display as an inline-block
  • .d-{breakpoint}-flex: Sets the element to display as a flex
  • .d-{breakpoint}-inline-flex: Sets the element to display as an inline-flex element
  • .d-{breakpoint}-grid: Sets the element to display as a grid
  • .d-{breakpoint}-none: Sets the display propertie to none

Examples

              
<div class="d-block">Block Element</div>
<div class="d-inline-block">Inline block Element</div>
<div class="d-flex">Flex Element</div>
<div class="d-inline-flex">inline flex Element</div>
<div class="d-grid">Grid Element</div>
<div class="d-none">Not showing Element</div>
<div class="d-xs-none d-sm-block">
Element that only appears on +576px screens (Rezise your
brwoser to see it)
</div>
Block Element
Inline block Element
Flex Element
inline flex Element
Grid Element
Not showing Element
Element that only appears on +576px screens (Rezise your brwoser to see it)

Sizes

There are a few classes to help with the height and width of the elements, these classes are:

  • .is-fullwidth: Sets the width to 100%
  • .is-fullheight: Sets the height to 100%
  • .is-half-vh: Sets the height to 50vh
  • .is-full-vh: Sets the height to 100vh
  • .is-full-size: Sets the height to auto and width to 100%
  • .is-full-size-vh: Sets the height to 100vh and the width to 100%
  • .is-half-size-vh: Sets the height to 50vh and the width to 100%

Examples

              
<div class="is-fullwidth">Full width Element</div>
<div class="is-fullheight">Full height Element</div>
<div class="is-half-vh">Half viewport height Element</div>
<div class="is-full-vh">Full viewport height Element</div>
<div class="is-full-size">Full height and width Element</div>
<div class="is-half-size-vh">
  Half viewport height and full width Element
</div>
<div class="is-full-size-vh">
  Full viewport height and full width Element
</div>
Full width Element
Full height Element
Half viewport height Element
Full viewport height Element
Full height and width Element
Half viewport height and full width Element
Full viewport height and full width Element

Flexbox

Flexbox is a pretty neat and useful technology to align elements in one direction, when combined with a grid system it becomes extremely powerful and it is often enough to make any type of layout with little CSS. Grid Row CSS comes with a bunch of flex based classes to make your life easier. Note: These classes need to be applied to a parent element with its display propertie set as Flex. (You can do this easily by adding a ".d-flex" class to the element).

  • .f-wrap: Sets the flex-wrap propertie of the element to "wrap"
  • .f-nowrap: Sets the flex-wrap propertie of the element to "nowrap"
  • .f-row: Sets the direction of the flex element to be a row
  • .f-column: Sets the direction of the flex element to be a column

Horizontal Alignment

The following classes can help you to align your elements on the X axis while the flex direction is set to row. Or the Y axis if the flex direction is set to column

  • .f-justify-start: Aligns the elements to the start
  • .f-justify-center: Aligns the elements to the center
  • .f-justify-end: Aligns the elements to the end
  • .f-justify-stretch: Aligns the elements to be stretched
  • .f-justify-between: Aligns the elements to be spaced by the amount of free space available between them
  • .f-justify-evenly: Aligns the elements to be spaced evenly
  • .f-justify-around: Aligns the elements to be spaced based on the space around them

Vertical Alignment

The following classes can help you to align your elements on the Y axis while the flex direction is set to row. Or the X axis if the flex direction is set to column

  • .f-align-start: Aligns the elements to the start
  • .f-align-center: Aligns the elements to the center
  • .f-align-end: Aligns the elements to the end
  • .f-align-stretch: Aligns the elements to be stretched (The elements will expand over all the available space)

Vertical and Horizontal centering

One of the most common needs in web developement its to center elements. The next class can help you to do so.

  • .f-center: Aligns the elements to the center, both horizontally and vertically

Self alignment

While using flexbox you can set an element to justfiy or align itself based on the align-self and justify-self properties. The following classes will do the job. Note: These classes need to be applied to a child element.

  • .f-justify-self-start: Aligns itself to the start
  • .f-justify-self-center: Aligns itself to the center
  • .f-justify-self-end: Aligns itself to the end
  • .f-justify-self-stretch: Aligns itself to be stretched
  • .f-align-self-start: Aligns itself to the start
  • .f-align-self-center: Aligns itself to the center
  • .f-align-self-end: Aligns itself to the end
  • .f-align-self-stretch: Aligns itself to be stretched

Examples

              
<div class="f-wrap d-flex wrap">
  <div>Item wrap 1</div>
  <div>Item wrap 2</div>
  <div>Item wrap 3</div>
  <div>Item wrap 4</div>
  <div>Item wrap 5</div>
  <div>Item wrap 6</div>
</div>
<div class="f-nowrap d-flex nowrap">
  <div>Item nowrap 1</div>
  <div>Item nowrap 2</div>
  <div>Item nowrap 3</div>
  <div>Item nowrap 4</div>
  <div>Item nowrap 5</div>
  <div>Item nowrap 6</div>
</div>

<div class="d-flex f-row">
  <div>Item row 1</div>
  <div>Item row 2</div>
  <div>Item row 3</div>
</div>

<div class="d-flex f-column">
  <div>Item column 1</div>
  <div>Item column 2</div>
  <div>Item column 3</div>
</div>

<div class="d-flex f-justify-start">
  <div>Item justify start 1</div>
  <div>Item justify start 2</div>
  <div>Item justify start 3</div>
</div>
<div class="d-flex f-justify-center">
  <div>Item justify center 1</div>
  <div>Item justify center 2</div>
  <div>Item justify center 3</div>
</div>
<div class="d-flex f-justify-end">
  <div>Item justify end 1</div>
  <div>Item justify end 2</div>
  <div>Item justify end 3</div>
</div>
<div class="d-flex f-justify-stretch">
  <div>Item justify stretch 1</div>
  <div>Item justify stretch 2</div>
  <div>Item justify stretch 3</div>
</div>
<div class="d-flex f-justify-between">
  <div>Item justify between 1</div>
  <div>Item justify between 2</div>
  <div>Item justify between 3</div>
</div>
<div class="d-flex f-justify-evenly">
  <div>Item justify evenly 1</div>
  <div>Item justify evenly 2</div>
  <div>Item justify evenly 3</div>
</div>
<div class="d-flex f-justify-around">
  <div>Item justify around 1</div>
  <div>Item justify around 2</div>
  <div>Item justify around 3</div>
</div>

<div class="d-flex f-align-start">
  <div>Item align-start 1</div> 
</div>
<div class="d-flex f-align-center">
  <div>Item align-center 1</div>  
</div>
<div class="d-flex f-align-end">
  <div>Item align-end 1</div>
</div>
<div class="d-flex f-align-stretch">
  <div>Item align-stretch 1</div>
</div>
<div class="d-flex f-center">
  <div>Item vertically and horizontally centered</div>
</div>
Item wrap 1
Item wrap 2
Item wrap 3
Item wrap 4
Item wrap 5
Item wrap 6
Item nowrap 1
Item nowrap 2
Item nowrap 3
Item nowrap 4
Item nowrap 5
Item nowrap 6
Item row 1
Item row 2
Item row 3
Item column 1
Item column 2
Item column 3
Item justify start 1
Item justify start 2
Item justify start 3
Item justify center 1
Item justify center 2
Item justify center 3
Item justify end 1
Item justify end 2
Item justify end 3
Item justify stretch 1
Item justify stretch 2
Item justify stretch 3
Item justify between 1
Item justify between 2
Item justify between 3
Item justify evenly 1
Item justify evenly 2
Item justify evenly 3
Item justify around 1
Item justify around 2
Item justify around 3
Item align-start 1
Item align-center 1
Item align-end 1
Item align-stretch 1
Item vertically and horizontally centered

Grid

Grid Row CSS provides a grid based on the CSS grid system, it is a 12 columns grid that supports nesting rows and it also has many classes to work with the responsiveness and the breakpoints. A grid consist of an element with the ".grid-row" class, and its children with the ".grid-column" class.

These are the following classes to work with the grid.

  • .grid-row: Sets an element to act as a 12 columns grid container
  • .grid-column: Sets an element to be a child of the grid container
  • .g-justify-start: Aligns the child elements to the start on the X axis
  • .g-justify-center: Aligns the child elements to the center on the X axis
  • .g-justify-end: Aligns the child elements to the end on the X axis
  • .g-center: Sets the elements inside the grid to be centered in bot X and Y axis

Grid Gap

By default, Grid Row CSS doesn't set any gap to the grid, so you won't have to overwrite those styles for you design. Instead, it provides classes to set the gap between columns and rows. Multiple classes were made to fit into any kind of design, for the gap the numbers go from 1 to 10.

e.g: ".g-gap-7" -> grid-gap: 7 * 0.5rem;

  • .g-col-gap-{$number}: Sets the gap bewteen columns
  • .g-row-gap-{$number}: Sets the gap bewteen rows
  • .g-gap-{$number}: Sets the gap between both rows and columns

Grid breakpoints and sizes

Grid Row CSS provides a lot of classes to set the size of the columns in the row, it also provides a responsive functionality to set these values for certain breakpoints They follow the boostrap grid style, in which you write the breakpoint followed by the number of columns,

eg: md-6, xs-12, xl-4, xxl-3, sm-6.

Note: in order for this to work, the element must have a ".grid-column" class.

  • .xs-{$number}: Sets the number of columns based on the xs breakpoint
  • .sm-{$number}: Sets the number of columns based on the sm breakpoint
  • .md-{$number}: Sets the number of columns based on the md breakpoint
  • .lg-{$number}: Sets the number of columns based on the lg breakpoint
  • .xl-{$number}: Sets the number of columns based on the xl breakpoint
  • .xxl-{$number}: Sets the number of columns based on the xxl breakpoint

Examples

            
<div class="grid-row mb-5 g-gap-2">
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 1</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 2</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 3</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column </div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 5</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 6</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 7</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 8</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 9</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 10</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 11</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">Grid column 12</div>
  </div>

  <div class="grid-row g-gap-4 mb-5">
    <div class="grid-column xs-12 md-6 lg-12 d-flex f-center">12 Columns</div>
    <div class="grid-column xs-12 md-6 lg-11 d-flex f-center">11 Columns</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">1  Column</div>
    <div class="grid-column xs-12 md-6 lg-10 d-flex f-center">10 Columns</div>
    <div class="grid-column xs-12 md-6 lg-2 d-flex f-center">2 Columns</div>
    <div class="grid-column xs-12 md-6 lg-9 d-flex f-center">9 Columns</div>
    <div class="grid-column xs-12 md-6 lg-3 d-flex f-center">3 Columns</div>
    <div class="grid-column xs-12 md-6 lg-8 d-flex f-center">8 Columns</div>
    <div class="grid-column xs-12 md-6 lg-4 d-flex f-center">4 Columns</div>
    <div class="grid-column xs-12 md-6 lg-7 d-flex f-center">7 Columns</div>
    <div class="grid-column xs-12 md-6 lg-5 d-flex f-center">5 Columns</div>
    <div class="grid-column xs-12 md-6 lg-6 d-flex f-center">6 Columns</div>
    <div class="grid-column xs-12 md-6 lg-6 d-flex f-center">6 Columns</div>
    <div class="grid-column xs-12 md-6 lg-5 d-flex f-center">5 Columns</div>
    <div class="grid-column xs-12 md-6 lg-7 d-flex f-center">7 Columns</div>
    <div class="grid-column xs-12 md-6 lg-4 d-flex f-center">4 Columns</div>
    <div class="grid-column xs-12 md-6 lg-8 d-flex f-center">8 Columns</div>
    <div class="grid-column xs-12 md-6 lg-3 d-flex f-center">3 Columns</div>
    <div class="grid-column xs-12 md-6 lg-9 d-flex f-center">9 Columns</div>
    <div class="grid-column xs-12 md-6 lg-2 d-flex f-center">2 Columns</div>
    <div class="grid-column xs-12 md-6 lg-10 d-flex f-center">10 Columns</div>
    <div class="grid-column xs-12 md-6 lg-1 d-flex f-center">1 Column</div>
    <div class="grid-column xs-12 md-6 lg-11 d-flex f-center">11 Columns</div>
    <div class="grid-column xs-12 md-6 lg-12 d-flex f-center">12 Columns</div>
  </div>

  <div class="grid-row g-gap-5 mb-5">
    <div class="grid-column xs-12 md-6 lg-4 d-flex f-center">Column gapped 1</div>
    <div class="grid-column xs-12 md-6 lg-4 d-flex f-center">Column gapped 2</div>
    <div class="grid-column xs-12 md-6 lg-4 d-flex f-center">Column gapped 3</div>
  </div>
Grid column 1
Grid column 2
Grid column 3
Grid column 4
Grid column 5
Grid column 6
Grid column 7
Grid column 8
Grid column 9
Grid column 10
Grid column 11
Grid column 12
12 Columns
11 Columns
1 Column
10 Columns
2 Columns
9 Columns
3 Columns
8 Columns
4 Columns
7 Columns
5 Columns
6 Columns
6 Columns
5 Columns
7 Columns
4 Columns
8 Columns
3 Columns
9 Columns
2 Columns
10 Columns
1 Column
11 Columns
12 Columns
Column gapped 1
Column gapped 2
Column gapped 3

Utils

Utility classes are always needed, they can be used to rapidly modify the styles of an element with a class. Grid Row CSS provides these utility classes to help you make modular and reusable elements.

Paddings

padding classes are used to add padding to the elements based on the selected number. They go form 1 through 10, and can be set for any side.

E.g: p-5 -> padding: 5 * 0.5rem;

  • .p-{$number}: Sets the padding of the element
  • .pt-{$number}: Sets the padding top of the element
  • .pb-{$number}: Sets the padding bottom of the element
  • .pr-{$number}: Sets the padding right of the element
  • .pl-{$number}: Sets the padding left of the element

Margins

margin classes are used to add margin to the elements based on the selected number. They go form 1 through 10, and can be set for any side.

E.g: m-5 -> margin: 5 * 0.5rem;

  • .m-{$number}: Sets the margin of the element
  • .mt-{$number}: Sets the margin top of the element
  • .mb-{$number}: Sets the margin bottom of the element
  • .mr-{$number}: Sets the margin right of the element
  • .ml-{$number}: Sets the margin left of the element

Auto margins

Sometimes you need to move an element with a margin auto.

  • .ml-auto: Sets the margin left to auto
  • .mr-auto: Sets the margin right to auto

Vertical align

Inline-block elements often have issues with how they show on the browser, this class can help you that annoying white-space on those elements.

  • .vertical-a-top: Sets the vertical align to top

Positioning

The following are classes to define the position of elements.

  • .pos-absolute: Sets the position to absolute
  • .pos-relative: Sets the position to relative
  • .pos-fixed: Sets the position to fixed
  • .pos-sticky: Sets the position to sticky

Typography

Classes to set different useful aspects of typography

  • .text-white: Sets the text to color white
  • .text-black: Sets the text to color #333
  • .text-center: Sets the text to align center
  • .text-left: Sets the text to align left
  • .text-right: Sets the text to align right
  • .text-upper: Sets the text to uppercase
  • .text-lower: Sets the text to lowercase
  • .text-capital: Capitalize the text
  • .text-d-none: Sets the text decoration to none

Lists

This class can help you removing the default styling for lists.

  • .list-s-none: Sets the list-style to none

Examples

              
<a href="#" class="d-inline-block p-2 text-d-none text-white">Anchor element without text decoration and with padding

<div class="m-3">Div with margins</div>

<div class="pos-relative relative text-white text-center">
  Relative element
  <div class="pos-absolute absolute text-center text-black">
    Absolute box within a relative element
  </div>
</div>
Anchor element without text decoration and with padding
Div with margins
Relative element
Absolute box within a relative element