Documentation v1.1.1

Preview Purchase

Overview

Craft extends Bootstrap Borders  in src/sass/components/helpers/_borders.scssto provide additional border utility classes to cover its own design system.

Border Styles

Use .border-dashedor .border-dottedclasses to set an element's border style. For border directions use .border-{direction}-dashedor .border-{direction}-dottedclasses format.
Where directionis one of:
  • top- for classes that set border top style
  • bottom- for classes that set border bottom style
  • end- for classes that set border right style
  • start- for classes that set border start style
default style
.border-dotted
.border-dashed
.border-bottom-dashed
.border-end-dashed
<div class="border">
    default style
</div>
<div class="border-gray-300 border-dotted">
    .border-dotted
</div>
<div class="border-gray-300 border-dashed">
    .border-dashed
</div>                
<div class="border-gray-300 border-bottom-dashed">
    .border-bottom-dashed
</div>
<div class="border-gray-300 border-end-dashed">
    .border-end-dashed
</div>

Hover State

Use .border-hoverto display an element's border on hover.
default
gray-500
primary
<div class="border border-hover">
    default
</div>
<div class="border border-gray-500 border-hover">
    gray-500
</div>
<div class="border border-primary border-hover">
    primary
</div>

Active State

Use .border-activeto display an element's border when .activeclass applied.
default
gray-500
primary
<div class="border border-active active">
    default
</div>
<div class="border border-gray-500 border-active active">
    gray-500
</div>
<div class="border border-primary border-active active">
    primary
</div>

Transparent Border

Use .border-transparentto set an element's border color to tranparent.
tranparent
border
<div class="border border-transparent">
    default
</div>

Border Gray Colors

Use .border-gray-{100, 200, 300, 400, 500, 600, 700, 800, 900}to set an element's border color.
.border-gray-100
.border-gray-200
.border-gray-300
.border-gray-400
.border-gray-500
.border-gray-600
.border-gray-700
.border-gray-800
.border-gray-900
<div class="border border-gray-100"></div>
<div class="border border-gray-200"></div>
<div class="border border-gray-300"></div>
<div class="border border-gray-400"></div>
<div class="border border-gray-500"></div>
<div class="border border-gray-600"></div>
<div class="border border-gray-700"></div>
<div class="border border-gray-800"></div>
<div class="border border-gray-900"></div>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now