{% extends 'layouts/docs.html' %} {% set page = guides.ui %} {% set isdocs = true %} {% set isguide = true %} {% block content %}

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.

Button Sizes

Button font sizes can be adjusted with font size utilities.

{{ macros.example('button-font-sizes.html') }}

To change the line-height and padding but leave the font-size the same, use button size extensions. Font size utilities and button size extensions can be combined for more options.

{{ macros.example('button-sizes.html') }}

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.

{{ macros.example('pagination.html') }}

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

{{ macros.example('pagination-numbers.html') }}

Standard color styles can be used to control the appearance.

{{ macros.example('pagination-bordered.html') }}

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.

{{ macros.example('button-group.html') }}

Justified Button Group

The table object can be used to create justified button groups.

{{ macros.example('button-group-justified.html') }}

Normally, buttons with borders would double up when placed next to each other. The .x-group-item and .x-group-item-2 utilities adjust negative margins and focus states to visually collapse borders. Use the .x-group-item-2 utility on elements with 2px borders. Functionally, this is similar to how other frameworks handle button and form input groups, but with more direct control over styling.

{{ macros.example('button-group-segments.html') }}

Use .y-group-item and .y-group-item-2 to group elements vertically.

{{ macros.example('button-group-segments-vertical.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.

{{ macros.example('input-group-vertical.html') }}

The grid system can be used to control button or input group widths.

{{ macros.example('input-group-horizontal.html') }}

Boxes

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

{{ macros.example('box.html') }}

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

{{ macros.example('box-header.html') }} {{ macros.example('box-image.html') }} {{ macros.example('box-header-footer.html') }}

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.

{{ macros.example('flash-messages.html') }}

Badges

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.

{{ macros.example('badges-headings.html') }}

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

{{ macros.example('badges-colors.html') }}
{% include 'partials/guides-cta.html' %} {% endblock %}