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.
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.
Responsive state utilities can be used to progressively enhance pagination with numbers on devices with wider viewports.
Standard color styles can be used to control the appearance.
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.
The grid system can be used to control button or input group widths.
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.
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.
To create headers and footers, set padding on nested divs then use color styles to control appearance.
Flash messages are used to provide feedback after the user has performed an action. Create custom flash messages with utilities and color styles.
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.
Color semantics can be controlled with color styles to represent different qualities of states.