# UI Elements

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 the optional UI Utility Groups module that is not included in the default Basscss package. # Button Sizes Button font sizes can be adjusted with font size utilities. ```html ``` To change the line-height and padding but leave the font-size the same, use button size extensions in the optional basscss-button-sizes module. Font size utilities and button size extensions can be combined for more options. ```html

``` # Navigation In HTML, navigation is essentially just groups of links. By using the same styles as buttons, you can ensure that navigation links are evenly spaced and have large, easy-to-hit targets. Negative margin utilities can help line up text elements with other elements on the page. The `.btn` style can be used for navigation items. This button style inherits color from its parent, or it can be set with color utilities. ```html

Burgers Fries Shakes Onion Rings

``` The flex object can be used to create justified navigation. Be sure to test your specific navigation across a range of devices to ensure that labels fit within the viewport. ```html

Burgers

Fries

Shakes

Onion Rings

``` To stack navigation elements, use the `.block` utility. ```html

Burgers Fries Shakes Onion Rings

``` Standard color styles can be applied to create a variety of navigation styles. ```html

Burgers Fries Shakes Onion Rings

``` The default `.btn-primary` style can be used to create a pill navigation. ```html

Burgers Fries Shakes Onion Rings

``` If you’d like to wrap your navigation in a `ul` use the `.list-reset` style to remove bullets and padding. ```html

Burgers
Fries
Shakes
Onion Rings

``` # Breadcrumbs Breadcrumbs are a common and well-understood wayfinding pattern used in multi-level hierarchies. Stylistically, these are essentially the same as navigation, but with separators between items. ```html

Home / Hot Dogs / Frank

``` ```html

Home Hot Dogs Frank

```

Note: the icons used in this example are from Geomicons Open.

# Pagination 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. ```html

Previous Next

``` Responsive state utilities can be used to progressively enhance pagination with numbers on devices with wider viewports. ```html

Previous Next

1 2 3 4 5

``` Standard color styles can be used to control the appearance. ```html

Previous Next

1 2 3

``` # Button Groups Button groups allow for more flexibility in establishing gestalt and controlling information density. Use a combination of layout utilities and color extensions to create button groups. The utilities `.rounded-left`, `.rounded-right`, and `.not-rounded` can be used to override button and form field border radii. ```html

``` ## Justified Button Group The flex object can be used to create justified button groups. ```html

Burgers Fries Shakes

``` Normally, buttons with borders would double up when placed next to each other. The optional `.x-group-item` utility adjusts negative margins and focus states to visually collapse borders. Functionally, this is similar to how other frameworks handle button and form input groups, but with more direct control over styling. ```html

``` Use `.y-group-item` to group elements vertically. ```html

``` # Input Groups 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. ```html ``` The grid system can be used to control button or input group widths. ```html ``` # Dropdowns 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. Be sure dropdowns don’t expand beyond the viewport when used near edges or at small screen sizes. ```html

Rare Medium Rare Medium Well Done

```

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.

# Navbars Navbars are used to visually group global or sub navigation and to separate actions and navigation from content. Using a combination of layout utilities and color styles, you can create a wide range of navbars that are simple to customize and update. This example uses a double sided media object to create a flexible center with a search input that stacks at narrow viewport widths. By applying the `.py2` utility to the link buttons, they become the height of normal buttons and inputs plus `.py1`. ```html

Burgers Fries

My Account

``` By using rgba-based color utilities, the color can quickly be changed using background color utilities. ```html

Burgers Fries

My Account

Burgers Fries

My Account

Burgers Fries

My Account

Burgers Fries

My Account

``` Because Basscss is built with inter-operable styles, things like a user account dropdown can be added anywhere in the navbar. ```html

Burgers Fries

``` More complex [Priority Plus](http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/#priority-plus) navigations can also be created using responsive utilities. ```html

Burgers

Hot Dogs Fries Shakes Onion Rings

``` # Boxes Boxes are used to group content and collections of application resources. Use combinations of layout utilities and color styles to create boxes. ```html

Bacon

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.

``` To create headers and footers, set padding on nested divs then use color styles to control appearance. ```html

Bacon with Header

``` ```html

Bacon with Image

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

``` ```html

Bacon with Header and Footer

Turkey short loin tenderloin jerky.

``` # Flash Messages Flash messages are used to provide feedback after the user has performed an action. Create custom flash messages with utilities and color styles. ```html

Warning! Half-pound burger will be deleted

Onion rings cannot connect to the network

Fries added to order

``` # Badges Badges are used to represent properties and states and to tease quantities of resources behind navigation links. Use basic utilities and color styles to create badges. ```html

Hamburger Fries

``` Color semantics can be controlled with color styles to represent different qualities of states. ```html

Blue Red Yellow Green Gray Bordered

```