Bootstrip

Content

• Dashboard : An admin dashboard example.
• Dashboard (Darkmoon) : An admin dashboard example, with dark theme.
• Kitchen sink : Everything on a single page
• Kitchen sink (Darkmoon) : Everything on a single page, with dark theme.
• Typography : Headers, body content, links etc
• Fixed width header : A simple top-of-page header

Concept

Bootstrip is a frontend component library based on stripped-down Bootstrap 5. It has a strong emphasis on minimal code and readability, and is aimed at programmers who want clean, functional, and easy-to-maintain frontend components in their projects. In many cases deliberate design compromises were made to achieve this.

Other features are :

• Bootstrip removes bloat by dropping support for dead browsers like Internet Explorer.
• All cross-browser prefixing is done by the CSS compiler.
• Everything is a module, and module CSS is split between functionality and theming, making it simpler to see what style needs to be overridden to reskin.

Bootstrip allows for custom HTML elements, though these are entirely optional. One can write <x-columns class="--two"> ... </x-columns> or <div class="columns --two"> ... </div> The main reason for the former is readability, and the benefits become more apparent as markup complexity increases.

Block-Element-Modifier

At its heart Bootstrip adheres to the spririt of BEM, with short/specific selectors and strict scoping of overrides, but the naming convention has been modified for brevity.