ro:Kit Breakpoints

ro:Kit uses breakpoints to adapt elements to varying screen sizes. Breakpoint sizes were taken from Bootstrap's documentation.

Breakpoints can be modified, added or removed in components/_breakpoints.scss

Breakpoint sizes

  • xs - extra small - max-width 576px
  • sm - small - min-width 576px
  • md - medium - min-width 768px
  • lg - large - min-width 992px
  • xl - extra large - min-width 1200px
  • xxl - extra extra large - min-width 1200px

Comprehensive List of ro:Kit Responsive Elements

Margin & Padding
Class Description
.children-p-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of padding to all child elements when passing breakpoint
.children-m-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of margin to all child elements when passing breakpoint
.children-p-x-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of horizontal padding to all child elements when passing breakpoint
.children-m-x-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of horizontal margin to all child elements when passing breakpoint
.children-p-y-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of vertical padding to all child elements when passing breakpoint
.children-m-y-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of vertical margin to all child elements when passing breakpoint
.p-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of padding to element when passing breakpoint
.m-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of margin to element when passing breakpoint
.p-x-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of horizontal padding to element when passing breakpoint
.m-x-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of horizontal margin to element when passing breakpoint
.p-y-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of vertical padding to element when passing breakpoint
.m-y-[breakpoint:text]-[unit:number: 1 through 10] Applies [unit] amount of vertical margin to element when passing breakpoint
.p-[breakpoint:text]-[side:letter: t|b|l|r]-[unit:number: 1 through 10] Applies [unit] amount of padding to specified side (top, bottom, left, right) of an element when passing breakpoint
.m-[breakpoint:text]-[side:letter: t|b|l|r]-[unit:number: 1 through 10] Applies [unit] amount of margin to specified side (top, bottom, left, right) of an element when passing breakpoint
Layout & Visibility
Class Description
.max-width-center-[breakpoint:text] Limits max width of an element to a size of a breakpoint and centers it with auto margin on left and right
.[breakpoint:text]-hide Hides element after passing breakpoint
.[breakpoint:text]-show Shows element after passing breakpoint
.fixed-[breakpoint:text] Applies fixed position after passing breakpoint
.grid-[breakpoint:text]-col-span-[span:number = 1 through 10] Applies column [span] to all child elements after passing breakpoint
.col-[breakpoint:text]-span-[span:number = 1 through 10] Applies column [span] to an element after passing breakpoint
nav.nav-[breakpoint:text] Shows inline navigation after passing breakpoint. Nested lists turn into dropdowns.
btn.btn-[breakpoint:text]-[size:text = xs | sm | md | lg | xl | xxl] Applies button size after passing breakpoint
.fixed-[breakpoint:text] Sets elements postion to fixed after passing breakpoint
.hide-[breakpoint:text] Sets elements display to block after passing breakpoint
.show-[breakpoint:text] Sets elements display to none after passing breakpoint
Typography
Class Description
.typescale-[breakpoint:text]-[scale-name:text] Applies [scale-name] after passing breakpoint. See Type scales
.text-[breakpoint:text]-[alignment:text = left|right|center|justify] Applies text [alignment] after passing breakpoint
Colors & Gradients
Class Description
.[color:text]-[breakpoint:text] Applies [color] background after passing breakpoint. See colors
.text-[color:text]-[breakpoint:text] Applies [color] to text after passing breakpoint. See colors
.gradient-[breakpoint:text]-[color1:text]-[color2:text] Applies [color1:text]-[color2:text] gradient background after passing breakpoint. See gradients
Shadows
Class Description
.children-[breakpoint:name]-shadow-[level:number = 1 through 10] adds box-shadow on all child elements of element after passing breakpoint.
.shadow-[breakpoint:name]-[level:number = 1 through 10] adds box-shadow on block elemen after passing breakpoint

ro:Kit Grid & CSS Box Model

ro:Kit's layout engine uses CSS grid. Default number of columns is set to 12. Simply add .grid class to get started.

Default size unit in ro:Kit is defined as 0.75rem. Units are used in paddings, grid gaps, and margins.

Classes

  • .grid - turns element into a grid
  • .grid-col-span-[span:number = 1 through 12] - sets col span for child elements. Should be added to element which also has .grid class
  • .grid-[breakpoint:text]-col-span-[span:number = 1 through 12] - sets col span for child elements after passing breakpoint. Should be added to element which also has .grid class
  • .col-span-[columns:number] - sets col span of an element
  • .col-[breakpoint:text]-span-[span:number = 1 through 12] - sets col span of an element after passing breakpoint
  • .gap-[unit:number = 1 through 10] - sets grid gap of size of [unit] units
  • .gap-[breakpoint:text]-[gap-width-in-unit] - sets grid gap of size of [unit] units after passing breakpoint

SASS Variables

Variable Description Default Value Location
$unit Size unit used in ro:Kit's layout paddings, margins, size scales etc 0.75rem _variables.scss
$layout-margin default element margin 0 _variables.scss
$layout-padding default element padding $unit = 0.75rem _variables.scss
$grid-column-count Amount of columns in a grid 12 _variables.scss

Grid Examples

.col-md-span-2
.col-md-span-6
.col-md-span-4
.col-md-span-7
.col-md-span-5
.col-md-span-1
.col-md-span-3
.col-md-span-8
.col-md-span-10
.col-md-span-2
.col-md-span-11
.col-md-span-1
.col-md-span-12