Base Layers Kitchen Sink 🛀
Buttons
Left aligned
Center aligned
Right aligned
Justified
Disabled
Text Alignment
Left aligned
All
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Desktop only
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Center aligned
All
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Desktop only
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Right aligned
All
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Desktop only
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Justified
All
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Desktop only
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Font size
xxxs - The quick brown fox jumped over the lazy dog
xxs - The quick brown fox jumped over the lazy dog
xs - The quick brown fox jumped over the lazy dog
sm - The quick brown fox jumped over the lazy dog
md - The quick brown fox jumped over the lazy dog
lg - The quick brown fox jumped over the lazy dog
xl - The quick brown fox jumped over the lazy dog
xxl - The quick brown fox jumped over the lazy dog
xxxl - The quick brown fox jumped over the lazy dog
Colours
Customize your $colour-palette or use the one below.
Foreground
- fg-white
- fg-black
- fg-pink-50
- fg-pink-100
- fg-pink-200
- fg-pink-300
- fg-pink-400
- fg-pink-500
- fg-pink-600
- fg-pink-700
- fg-pink-800
- fg-pink-900
- fg-purple-50
- fg-purple-100
- fg-purple-200
- fg-purple-300
- fg-purple-400
- fg-purple-500
- fg-purple-600
- fg-purple-700
- fg-purple-800
- fg-purple-900
- fg-green-50
- fg-green-100
- fg-green-200
- fg-green-300
- fg-green-400
- fg-green-500
- fg-green-600
- fg-green-700
- fg-green-800
- fg-green-900
- fg-grey-50
- fg-grey-100
- fg-grey-200
- fg-grey-300
- fg-grey-400
- fg-grey-500
- fg-grey-600
- fg-grey-700
- fg-grey-800
- fg-grey-900
Background
- bg-white
- bg-black
- bg-pink-50
- bg-pink-100
- bg-pink-200
- bg-pink-300
- bg-pink-400
- bg-pink-500
- bg-pink-600
- bg-pink-700
- bg-pink-800
- bg-pink-900
- bg-purple-50
- bg-purple-100
- bg-purple-200
- bg-purple-300
- bg-purple-400
- bg-purple-500
- bg-purple-600
- bg-purple-700
- bg-purple-800
- bg-purple-900
- bg-green-50
- bg-green-100
- bg-green-200
- bg-green-300
- bg-green-400
- bg-green-500
- bg-green-600
- bg-green-700
- bg-green-800
- bg-green-900
- bg-grey-50
- bg-grey-100
- bg-grey-200
- bg-grey-300
- bg-grey-400
- bg-grey-500
- bg-grey-600
- bg-grey-700
- bg-grey-800
- bg-grey-900
Responsive font sizes
This changes size depending on the breakpoint
Grid Column Offsets
You can use .col-<bp>-push-<number>
to push and pull columns. This can be used to center a layout, e.g.
a 10/12 centered layout, or to create an overlapping magazine-style layout.
Creating a 10/12 centered layout is easier without using offsets,
you can add the class row--center, e.g.
row row--center like the font size section above.
You can see the columns layout with the Base Layers Chrome extension .
col-xs-12 col-md-3 col-md-push-1
col-xs-12 col-md-4 col-md-pull-1
col-xs-12 col-md-4 col-md-pull-1
col-xs-12 col-md-3 col-md-pull-2