Base Layout Helpers
Base Layout Helpers is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.
Table of contents
Overview
Base Layout Helpers contains styles for resetting margins, resetting paddings, resetting floats, setting position types and flex helpers for all breakpoints.
Installation
If you have an existing project and would like to include the Base layout helpers module, run the following command:
npm install --save @getbase/layout-helpersOnce you have the layout helpers module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:
CSS Import:
@import url("https://unpkg.com/@getbase/layout-helpers/index.css");SCSS Import:
/* Import Base Layout Helpers */
@import "~@getbase/layout-helpers/scss/index";
/* Your Other Styles */
@import "main"LESS Import:
/* Import Base Layout Helpers */
@import "~@getbase/layout-helpers/less/index";
/* Your Other Styles */
@import "main"Documentation
Base Layout Helpers includes styles for resetting margins, resetting paddings, resetting floats, setting position types and flex helpers for all breakpoints.
Helpers (Applies to SCSS/LESS)
| Helper Class | Purpose | Example | Outcome |
|---|---|---|---|
.no-margin |
Applies margin 0
|
<div class="no-margin">No margin</div> |
Applies a margin of 0 to a div element for all breakpoints |
.no-padding |
Applies padding 0
|
<div class="no-padding">No padding</div> |
Applies a padding of 0 to a div element for all breakpoints |
.no-float |
Applies float none
|
<div class="no-float">No float</div> |
Applies a float of none to a div element for all breakpoints |
.absolute |
Applies position absolute
|
<div class="absolute">Absolute</div> |
Applies a position of absolute to a div element for all breakpoints |
.static |
Applies position static
|
<div class="static">Static</div> |
Applies a position of static to a div element for all breakpoints |
.fixed |
Applies position fixed
|
<div class="fixed">Fixed</div> |
Applies a position of fixed to a div element for all breakpoints |
.none |
Applies display none
|
<div class="none">You won't see this text</div> |
Applies a display of none to a div element for all breakpoints |
.block |
Applies display block
|
<span class="block">This will be a block element</span> |
Applies a display of block to a span element for all breakpoints |
.inline-block |
Applies display inline-block
|
<div class="inline-block">This element will be inline-block</div> |
Applies a display of inline-block to a div element for all breakpoints |
.inline |
Applies display inline
|
<div class="inline">This element will be inline</div> |
Applies a display of inline to a div element for all breakpoints |
.flex |
Applies display flex
|
<div class="flex">This element will be flex</div> |
Applies a display of flex to a div element for all breakpoints |
.flex-row |
Applies flex direction row
|
<div class="flex flex-row">Flex direction will be row</div> |
Applies a flex direction of flex-row to a div element for all breakpoints |
.flex-row-reverse |
Applies flex direction row-reverse
|
<div class="flex flex-row-reverse">Flex direction will be row in reverse</div> |
Applies a flex direction of flex-row-reverse to a div element for all breakpoints |
.flex-column |
Applies flex direction column
|
<div class="flex flex-column">Flex direction will be column</div> |
Applies a flex direction of flex-column to a div element for all breakpoints |
.flex-column-reverse |
Applies flex direction column-reverse
|
<div class="flex flex-column-reverse">Flex direction will be column reverse</div> |
Applies a flex direction of flex-column-reverse to a div element for all breakpoints |
.flex-space-around |
Applies spacing around elements within a flex container | <div class="flex flex-space-around">Flex space around is applied</div> |
Applies spacing around elements within a div element for all breakpoints |
.flex-space-between |
Applies spacing between elements within a flex container | <div class="flex flex-space-between">Flex space between is applied</div> |
Applies spacing between elements within a div element for all breakpoints |
.flex-start |
Applies alignment of a flex item to the start | <div class="flex flex-start">This item will be aligned to the start</div> |
Aligns element within a div element to the start for all breakpoints |
.flex-center |
Applies alignment of a flex item to the center | <div class="flex flex-center">This item will be aligned to the center</div> |
Aligns element within a div element to the center for all breakpoints |
.flex-end |
Applies alignment of flex item to the end | <div class="flex flex-end">This item will be aligned to the end</div> |
Aligns element within a div element to the end for all breakpoints |
.flex-top |
Applies vertical alignment of a flex item to the top | <div class="flex flex-top">Items inside will be vertically aligned to the top</div> |
Aligns elements within a div element to the top for all breakpoints |
.flex-middle |
Applies vertical alignment of a flex item to the middle | <div class="flex flex-middle">Items inside will be vertically aligned to the middle</div> |
Aligns elements within a div element to the middle for all breakpoints |
.flex-bottom |
Applies vertical alignment of a flex item to the bottom | <div class="flex flex-bottom">Items inside will be vertically aligned to the bottom</div> |
Aligns elements within a div element to the bottom for all breakpoints |
.flex-wrap |
Applies flex items to wrap within a flex container | <div class="flex flex-wrap">Flex items will wrap within a flex container</div> |
div elements will wrap within a flex container for all breakpoints |
.flex-no-wrap |
Applies flex items to not wrap within a flex container | <div class="flex flex-no-wrap">Flex items will not wrap within a flex container</div> |
div elements will not wrap within a flex container for all breakpoints |
.left |
Applies float left
|
<div class="left">This element will float left</div> |
Applies a float left to a div element for all breakpoints |
.right |
Applies float right
|
<div class="right">This element will float right</div> |
Applies a float right to a div element for all breakpoints |
.no-margin-m |
Applies margin 0
|
<div class="no-margin-m">No margin</div> |
Applies a margin of 0 to a div element for medium devices and above |
.no-padding-m |
Applies padding 0
|
<div class="no-padding-m">No padding</div> |
Applies a padding of 0 to a div element for medium devices and above |
.no-float-m |
Applies float none
|
<div class="no-float-m">No float</div> |
Applies a float of none to a div element for medium devices and above |
.absolute-m |
Applies position absolute
|
<div class="absolute-m">Absolute</div> |
Applies a position of absolute to a div element for medium devices and above |
.static-m |
Applies position static
|
<div class="static-m">Static</div> |
Applies a position of static to a div element for medium devices and above |
.fixed-m |
Applies position fixed
|
<div class="fixed-m">Fixed</div> |
Applies a position of fixed to a div element for medium devices and above |
.none-m |
Applies display none
|
<div class="none-m">You won't see this text</div> |
Applies a display of none to a div element for medium devices and above |
.block-m |
Applies display block
|
<span class="block-m">This will be a block element</span> |
Applies a display of block to a span element for medium devices and above |
.inline-block-m |
Applies display inline-block
|
<div class="inline-block-m">This element will be inline-block</div> |
Applies a display of inline-block to a div element for medium devices and above |
.inline-m |
Applies display inline
|
<div class="inline-m">This element will be inline</div> |
Applies a display of inline to a div element for medium devices and above |
.flex-m |
Applies display flex
|
<div class="flex-m">This element will be flex</div> |
Applies a display of flex to a div element for medium devices and above |
.flex-row-m |
Applies flex direction row
|
<div class="flex-m flex-row-m">Flex direction will be row</div> |
Applies a flex direction of flex-row-m to a div element for medium devices and above |
.flex-row-reverse-m |
Applies flex direction row-reverse-m
|
<div class="flex-m flex-row-reverse-m">Flex direction will be row in reverse</div> |
Applies a flex direction of flex-row-reverse-m to a div element for medium devices and above |
.flex-column-m |
Applies flex direction column
|
<div class="flex-m flex-column-m">Flex direction will be column</div> |
Applies a flex direction of flex-column-m to a div element for medium devices and above |
.flex-column-reverse-m |
Applies flex direction column-reverse-m
|
<div class="flex-m flex-column-reverse-m">Flex direction will be column reverse</div> |
Applies a flex direction of flex-column-reverse-m to a div element for medium devices and above |
.flex-space-around-m |
Applies spacing around elements within a flex container | <div class="flex-m flex-space-around-m">Flex space around is applied</div> |
Applies spacing around elements within a div element for medium devices and above |
.flex-space-between-m |
Applies spacing between elements within a flex container | <div class="flex-m flex-space-between-m">Flex space between is applied</div> |
Applies spacing between elements within a div element for medium devices and above |
.flex-start-m |
Applies alignment of a flex item to the start | <div class="flex-m flex-start-m">This item will be aligned to the start</div> |
Aligns element within a div element to the start for medium devices and above |
.flex-center-m |
Applies alignment of a flex item to the center | <div class="flex-m flex-center-m">This item will be aligned to the center</div> |
Aligns element within a div element to the center for medium devices and above |
.flex-end-m |
Applies alignment of flex item to the end | <div class="flex-m flex-end-m">This item will be aligned to the end</div> |
Aligns element within a div element to the end for medium devices and above |
.flex-top-m |
Applies vertical alignment of a flex item to the top | <div class="flex flex-top-m">Items inside will be vertically aligned to the top</div> |
Aligns elements within a div element to the top for medium devices and above |
.flex-middle-m |
Applies vertical alignment of a flex item to the middle | <div class="flex flex-middle-m">Items inside will be vertically aligned to the middle</div> |
Aligns elements within a div element to the middle for medium devices and above |
.flex-bottom-m |
Applies vertical alignment of a flex item to the bottom | <div class="flex flex-bottom-m">Items inside will be vertically aligned to the bottom</div> |
Aligns elements within a div element to the bottom for medium devices and above |
.flex-wrap-m |
Applies flex items to wrap within a flex container | <div class="flex-m flex-wrap-m">Flex items will wrap within a flex container</div> |
div elements will wrap within a flex container for medium devices and above |
.flex-no-wrap-m |
Applies flex items to not wrap within a flex container | <div class="flex-m flex-no-wrap-m">Flex items will not wrap within a flex container</div> |
div elements will not wrap within a flex container for medium devices and above |
.left-m |
Applies float left
|
<div class="left-m">This element will float left</div> |
Applies a float left to a div element for medium devices and above |
.right-m |
Applies float right
|
<div class="right-m">This element will float right</div> |
Applies a float right to a div element for medium devices and above |
.no-margin-l |
Applies margin 0
|
<div class="no-margin-l">No margin</div> |
Applies a margin of 0 to a div element for large devices and above |
.no-padding-l |
Applies padding 0
|
<div class="no-padding-l">No padding</div> |
Applies a padding of 0 to a div element for large devices and above |
.no-float-l |
Applies float none
|
<div class="no-float-l">No float</div> |
Applies a float of none to a div element for large devices and above |
.absolute-l |
Applies position absolute
|
<div class="absolute-l">Absolute</div> |
Applies a position of absolute to a div element for large devices and above |
.static-l |
Applies position static
|
<div class="static-l">Static</div> |
Applies a position of static to a div element for large devices and above |
.fixed-l |
Applies position fixed
|
<div class="fixed-l">Fixed</div> |
Applies a position of fixed to a div element for large devices and above |
.none-l |
Applies display none
|
<div class="none-l">You won't see this text</div> |
Applies a display of none to a div element for large devices and above |
.block-l |
Applies display block
|
<span class="block-l">This will be a block element</span> |
Applies a display of block to a span element for large devices and above |
.inline-block-l |
Applies display inline-block
|
<div class="inline-block-l">This element will be inline-block</div> |
Applies a display of inline-block to a div element for large devices and above |
.inline-l |
Applies display inline
|
<div class="inline-l">This element will be inline</div> |
Applies a display of inline to a div element for large devices and above |
.flex-l |
Applies display flex
|
<div class="flex-l">This element will be flex</div> |
Applies a display of flex to a div element for large devices and above |
.flex-row-l |
Applies flex direction row
|
<div class="flex-l flex-row-l">Flex direction will be row</div> |
Applies a flex direction of flex-row-l to a div element for large devices and above |
.flex-row-reverse-l |
Applies flex direction row-reverse-l
|
<div class="flex-l flex-row-reverse-l">Flex direction will be row in reverse</div> |
Applies a flex direction of flex-row-reverse-l to a div element for large devices and above |
.flex-column-l |
Applies flex direction column
|
<div class="flex-l flex-column-l">Flex direction will be column</div> |
Applies a flex direction of flex-column-l to a div element for large devices and above |
.flex-column-reverse-l |
Applies flex direction column-reverse-l
|
<div class="flex-l flex-column-reverse-l">Flex direction will be column reverse</div> |
Applies a flex direction of flex-column-reverse-l to a div element for large devices and above |
.flex-space-around-l |
Applies spacing around elements within a flex container | <div class="flex-m flex-space-around-l">Flex space around is applied</div> |
Applies spacing around elements within a div element for large devices and above |
.flex-space-between-l |
Applies spacing between elements within a flex container | <div class="flex-m flex-space-between-l">Flex space between is applied</div> |
Applies spacing between elements within a div element for large devices and above |
.flex-start-l |
Applies alignment of a flex item to the start | <div class="flex-m flex-start-l">This item will be aligned to the start</div> |
Aligns element within a div element to the start for large devices and above |
.flex-center-l |
Applies alignment of a flex item to the center | <div class="flex-m flex-center-l">This item will be aligned to the center</div> |
Aligns element within a div element to the center for large devices and above |
.flex-end-l |
Applies alignment of flex item to the end | <div class="flex-m flex-end-l">This item will be aligned to the end</div> |
Aligns element within a div element to the end for large devices and above |
.flex-top-l |
Applies vertical alignment of a flex item to the top | <div class="flex flex-top-l">Items inside will be vertically aligned to the top</div> |
Aligns elements within a div element to the top for large devices and above |
.flex-middle-l |
Applies vertical alignment of a flex item to the middle | <div class="flex flex-middle-l">Items inside will be vertically aligned to the middle</div> |
Aligns elements within a div element to the middle for large devices and above |
.flex-bottom-l |
Applies vertical alignment of a flex item to the bottom | <div class="flex flex-bottom-l">Items inside will be vertically aligned to the bottom</div> |
Aligns elements within a div element to the bottom for large devices and above |
.flex-wrap-l |
Applies flex items to wrap within a flex container | <div class="flex-m flex-wrap-l">Flex items will wrap within a flex container</div> |
div elements will wrap within a flex container for large devices and above |
.flex-no-wrap-l |
Applies flex items to not wrap within a flex container | <div class="flex-m flex-no-wrap-l">Flex items will not wrap within a flex container</div> |
div elements will not wrap within a flex container for large devices and above |
.left-l |
Applies float left
|
<div class="left-l">This element will float left</div> |
Applies a float left to a div element for large devices and above |
.right-l |
Applies float right
|
<div class="right-l">This element will float right</div> |
Applies a float right to a div element for large devices and above |
.no-margin-xl |
Applies margin 0
|
<div class="no-margin-xl">No margin</div> |
Applies a margin of 0 to a div element for extra large devices and above |
.no-padding-xl |
Applies padding 0
|
<div class="no-padding-xl">No padding</div> |
Applies a padding of 0 to a div element for extra large devices and above |
.no-float-xl |
Applies float none
|
<div class="no-float-xl">No float</div> |
Applies a float of none to a div element for extra large devices and above |
.absolute-xl |
Applies position absolute
|
<div class="absolute-xl">Absolute</div> |
Applies a position of absolute to a div element for extra large devices and above |
.static-xl |
Applies position static
|
<div class="static-xl">Static</div> |
Applies a position of static to a div element for extra large devices and above |
.fixed-xl |
Applies position fixed
|
<div class="fixed-xl">Fixed</div> |
Applies a position of fixed to a div element for extra large devices and above |
.none-xl |
Applies display none
|
<div class="none-xl">You won't see this text</div> |
Applies a display of none to a div element for extra large devices and above |
.block-xl |
Applies display block
|
<span class="block-xl">This will be a block element</span> |
Applies a display of block to a span element for extra large devices and above |
.inline-block-xl |
Applies display inline-block
|
<div class="inline-block-xl">This element will be inline-block</div> |
Applies a display of inline-block to a div element for extra large devices and above |
.inline-xl |
Applies display inline
|
<div class="inline-xl">This element will be inline</div> |
Applies a display of inline to a div element for extra large devices and above |
.flex-xl |
Applies display flex
|
<div class="flex-xl">This element will be flex</div> |
Applies a display of flex to a div element for extra large devices and above |
.flex-row-xl |
Applies flex direction row
|
<div class="flex-xl flex-row-xl">Flex direction will be row</div> |
Applies a flex direction of flex-row-xl to a div element for extra large devices and above |
.flex-row-reverse-xl |
Applies flex direction row-reverse-xl
|
<div class="flex-xl flex-row-reverse-xl">Flex direction will be row in reverse</div> |
Applies a flex direction of flex-row-reverse-xl to a div element for extra large devices and above |
.flex-column-xl |
Applies flex direction column
|
<div class="flex-xl flex-column-xl">Flex direction will be column</div> |
Applies a flex direction of flex-column-xl to a div element for extra large devices and above |
.flex-column-reverse-xl |
Applies flex direction column-reverse-xl
|
<div class="flex-xl flex-column-reverse-xl">Flex direction will be column reverse</div> |
Applies a flex direction of flex-column-reverse-xl to a div element for extra large devices and above |
.flex-space-around-xl |
Applies spacing around elements within a flex container | <div class="flex-m flex-space-around-xl">Flex space around is applied</div> |
Applies spacing around elements within a div element for extra large devices and above |
.flex-space-between-xl |
Applies spacing between elements within a flex container | <div class="flex-m flex-space-between-xl">Flex space between is applied</div> |
Applies spacing between elements within a div element for extra large devices and above |
.flex-start-xl |
Applies alignment of a flex item to the start | <div class="flex-m flex-start-xl">This item will be aligned to the start</div> |
Aligns element within a div element to the start for extra large devices and above |
.flex-center-xl |
Applies alignment of a flex item to the center | <div class="flex-m flex-center-xl">This item will be aligned to the center</div> |
Aligns element within a div element to the center for extra large devices and above |
.flex-end-xl |
Applies alignment of flex item to the end | <div class="flex-m flex-end-xl">This item will be aligned to the end</div> |
Aligns element within a div element to the end for extra large devices and above |
.flex-top-xl |
Applies vertical alignment of a flex item to the top | <div class="flex flex-top-xl">Items inside will be vertically aligned to the top</div> |
Aligns elements within a div element to the top for extra large devices and above |
.flex-middle-xl |
Applies vertical alignment of a flex item to the middle | <div class="flex flex-middle-xl">Items inside will be vertically aligned to the middle</div> |
Aligns elements within a div element to the middle for extra large devices and above |
.flex-bottom-xl |
Applies vertical alignment of a flex item to the bottom | <div class="flex flex-bottom-xl">Items inside will be vertically aligned to the bottom</div> |
Aligns elements within a div element to the bottom for extra large devices and above |
.flex-wrap-xl |
Applies flex items to wrap within a flex container | <div class="flex-m flex-wrap-xl">Flex items will wrap within a flex container</div> |
div elements will wrap within a flex container for extra large devices and above |
.flex-no-wrap-xl |
Applies flex items to not wrap within a flex container | <div class="flex-m flex-no-wrap-xl">Flex items will not wrap within a flex container</div> |
div elements will not wrap within a flex container for extra large devices and above |
.left-xl |
Applies float left
|
<div class="left-xl">This element will float left</div> |
Applies a float left to a div element for extra large devices and above |
.right-xl |
Applies float right
|
<div class="right-xl">This element will float right</div> |
Applies a float right to a div element for extra large devices and above |
Demo
View page example with the layout helpers stylesheet applied.
Support
- IE10+ and all other modern browsers.
- Please specify browsers you need to support in
package.jsonaccording to browserslist docs.
Authors
Matthew Hartman
License
Code released under the MIT Open Source license.