Basscss can be used to create many different user interface elements out of the box. With utility styles and a thoughtfully-architected templating system, you can keep CSS bloat to a minimum, while making iterative design changes to partials and components. You don’t need to make CSS do your templating engine’s job.
Note: this guide makes use of optional modules that are not included in the core Basscss package: UI Utility Button Sizes, UI Utility Groups, and UI Utility Disclosure States.
Pagination is used to split up large lists in a user-friendly way and allows for deep linking. Use a combination of layout utilities and button styles to create navigation that suites your design.
<div class="clearfix">
<a href="#!" class="left button button-nav-light">
<svg class="icon" data-icon="chevron-left"></svg>
Previous
</a>
<a href="#!" class="right button button-nav-light">
Next
<svg class="icon" data-icon="chevron-right"></svg>
</a>
</div>
Responsive state utilities can be used to progressively enhance pagination with numbers on devices with wider viewports.
<div class="center">
<div class="inline-block clearfix">
<a href="#!" class="left button button-narrow button-nav-light">
<svg class="icon" data-icon="chevron-left"></svg>
Previous
</a>
<a href="#!" class="right button button-narrow button-nav-light">
Next
<svg class="icon" data-icon="chevron-right"></svg>
</a>
<div class="overflow-hidden sm-show">
<a href="#!" class="button button-narrow button-nav-light is-active">1</a>
<a href="#!" class="button button-narrow button-nav-light">2</a>
<a href="#!" class="button button-narrow button-nav-light">3</a>
<a href="#!" class="button button-narrow button-nav-light">4</a>
<a href="#!" class="button button-narrow button-nav-light">5</a>
</div>
</div>
</div>
Standard color styles can be used to control the appearance.
<div class="center">
<div class="inline-block overflow-hidden border rounded">
<a href="#!" class="left button button-nav-light border-right">
<svg class="icon" data-icon="chevron-left"></svg>
Previous
</a>
<a href="#!" class="right button button-nav-light ">
Next
<svg class="icon" data-icon="chevron-right"></svg>
</a>
<div class="overflow-hidden sm-show">
<a href="#!" class="left button button-nav-light dark-gray border-right">1</a>
<a href="#!" class="left button button-nav-light border-right">2</a>
<a href="#!" class="left button button-nav-light border-right">3</a>
</div>
</div>
</div>
Input groups can be created by removing margins, adjusting border radii, and using the group utilities.
The .hide
utility visually hides labels, while keeping them accessible to screen readers.
<form class="sm-col-6">
<label class="hide">Pancakes</label>
<input type="text" class="block full-width mb0 field-light rounded-top y-group-item" placeholder="Pancakes">
<label class="hide">Making</label>
<input type="password" class="block full-width mb0 field-light not-rounded y-group-item" placeholder="Making">
<label class="hide">Bacon</label>
<input type="text" class="block full-width field-light rounded-bottom y-group-item" placeholder="Bacon">
<button type="submit" class="button-blue">Pancake</button>
</form>
The grid system can be used to control button or input group widths.
<form class="clearfix">
<label class="hide">Bacon</label>
<input type="text" class="col col-4 md-col-5 mb0 field-light rounded-left x-group-item" placeholder="Bacon">
<label class="hide">Pancakes</label>
<input type="password" class="col col-4 md-col-5 mb0 field-light not-rounded x-group-item" placeholder="Pancakes">
<button type="submit" class="col col-4 md-col-2 button-blue rounded-right">Pancake</button>
</form>
Dropdown menus are used to group secondary or sensitive actions behind a two-step progressive disclosure, while conserving screen real estate. Dropdowns can be created with basic positioning utilities.
The wrapping elements uses relative positioning to anchor the dropdown body.
An invisible fixed position element is used as an overlay to dismiss the dropdown.
The dropdown body uses absolute positioning and margin top to align with the trigger element,
without affecting the document flow.
The .disclosure-group
utility is used to show and hide
child elements with javascript.
Be sure dropdowns don’t expand beyond the viewport when used near edges or at small screen sizes.
<div class="relative inline-block disclosure-group" data-disclosure>
<button type="button" class="button-blue">
Burger ▾
</button>
<div class="disclosure-show fixed top-0 right-0 bottom-0 left-0"></div>
<div class="disclosure-show absolute left-0 mt1 nowrap bg-blue rounded animation-fadein">
<a href="#!" class="button block button-nav-dark">Rare</a>
<a href="#!" class="button block button-nav-dark">Medium Rare</a>
<a href="#!" class="button block button-nav-dark">Medium</a>
<a href="#!" class="button block button-nav-dark">Well Done</a>
</div>
</div>
Note: this example uses a custom JavaScript function for the disclosure mechanism. Use a similar function, component, or directive in your own JavaScript to control behavior.
Boxes are used to group content and collections of application resources. Use combinations of layout utilities and color styles to create boxes.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.
<div class="md-col-6">
<div class="p2 bg-white border rounded">
<h1 class="h2 mt0">Bacon</h1>
<p class="mb0">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
</div>
</div>
To create headers and footers, set padding on nested divs then use color styles to control appearance.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.
<div class="md-col-6">
<div class="overflow-hidden bg-white border rounded">
<div class="p2 bg-light-gray">
<h1 class="h2 m0">Bacon with Header</h1>
</div>
<div class="p2">
<p class="m0">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p>
</div>
</div>
</div>
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.
<div class="md-col-6">
<div class="p2 bg-white border rounded">
<img src="/docs/placeholder.svg" class="mb2" />
<h1 class="h2 mt0">Bacon with Image</h1>
<p class="mb0">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
</div>
</div>
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin. Bacon t-bone hamburger turkey capicola rump short loin.
Turkey short loin tenderloin jerky.
<div class="md-col-6">
<div class="overflow-hidden bg-white border rounded">
<div class="p2 white bg-blue">
<h1 class="h2 m0">Bacon with Header and Footer</h1>
</div>
<div class="p2">
<p class="m0">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin. Bacon t-bone hamburger turkey capicola rump short loin.</p>
</div>
<div class="p2 bg-darken-1">
<p class="m0 h5">Turkey short loin tenderloin jerky.</p>
</div>
</div>
</div>
Flash messages are used to provide feedback after the user has performed an action. Create custom flash messages with utilities and color styles.
<div class="bold center p2 mb2 white bg-red rounded">
Warning! Half-pound burger will be deleted
</div>
<div class="bold center p2 mb2 bg-yellow rounded">
Onion rings cannot connect to the network
</div>
<div class="bold center p2 white bg-green rounded">
Fries added to order
</div>
Badges are used to represent properties and states and to tease quantities of resources behind navigation links. Button size extensions can be used in combination with other utilities and color styles to create badges.
<h1>Hamburger
<span class="h2 inline-block button-small white bg-red rounded">Fries</span>
</h1>
<h2>Hamburger
<span class="h3 inline-block button-small white bg-red rounded">Fries</span>
</h2>
<h3>Hamburger
<span class="h4 inline-block button-small white bg-red rounded">Fries</span>
</h3>
<h4>Hamburger
<span class="inline-block button-small white bg-red rounded">Fries</span>
</h4>
<h5>Hamburger
<span class="inline-block button-small white bg-red rounded">Fries</span>
</h5>
<h6>Hamburger
<span class="inline-block button-small white bg-red rounded">Fries</span>
</h6>
Color semantics can be controlled with color styles to represent different qualities of states.
<div>
<span class="inline-block button-small white bg-blue rounded">Blue</span>
<span class="inline-block button-small white bg-red rounded">Red</span>
<span class="inline-block button-small bg-yellow rounded">Yellow</span>
<span class="inline-block button-small white bg-green rounded">Green</span>
<span class="inline-block button-small white bg-mid-gray rounded">Mid Gray</span>
<span class="inline-block button-small border rounded">Bordered</span>
</div>