The Boring CSS

A BEM based set of classes to style your pages in an authentic way.

It is just another boring, and opinionated, CSS styling library, by Rogério Taques.

It's not a framework, does not have a grid system, and it has a very limited number of components. But it is still very cool 😎 and helps you building visually attractive UIs for your website or web application with peace of mind.

But, it supports dark mode 🌙 by default. 🤩

✨ Demo ✨

Getting Started

Installation

You can either clone this repository and copy the boring.css and reset.css files to your project, or you can embed it to your HTML page using the CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rogeriotaques/boring-css/boring.css" />

Components

It has a limited number of components, the most used ones.

• Badges
  • In 5 different colors
• Box (a multi-purpose container)
• Buttons
• Card
• Inputs (all standard types)
  • With labels
  • With helpers (small text below the input)
  • With addons (text or buttons before or after the input)
  • Grouped
• Notifications
  • In 4 different colors
• Code/Pre
• Progress bar
  • With defined progress (e.g. 50%)
  • With undefined progress (e.g. loading)
• Tooltips

Do you need a grid system?

If you need a grid system, you can use Simple Grid, as it is lightweight and very easy to use. By the way, you can find a slightly modified version of it, cleaned up to remove anything not related to the grid, in this repository as simple-grid.css.

Contributing

Feel free to add your contribution to this project with a pull request.

License

Licensed under the MIT License.