The Boring CSS

An opinionated BEM based set of CSS classes to style websites and webapps with bold NeuBrutalism design, by Rogério Taques. It's free and open source.

Version 2.0.1

What it is not?

It's not a framework and it has a very limited number of components. But it is still very cool 😎 and helps building visually attractive UIs with peace of mind.

It does ship a small 12 column grid, enough to lay out a page without a framework.

Dark-mode ready

Yes! It supports dark mode out of the box! 🎉 You just need to add data-mode="dark" in the <html /> tag.

Try it here 👇

Components

Badge

Badge Badge Badge Badge Badge

Use:


<span class="badge">Badge</span>

Available modifiers:

badge--success
badge--warning
badge--danger
badge--dark

Box

This is a box block.

A box is a container for any kind of content.

Use:


<div class="box">This is a box</div>

Grid

A 12 column grid. Every column stacks full width on small screens and only takes its share from 768px up. Use col-4 for a quarter, col-6 for a half, and so on up to col-12.

col-4

col-8

col-4

Suffix a size with -sm, -md or -lg to pin it from that breakpoint up. col-6-sm is always a half, even on a phone.

col-6 col-6-sm

To hide something on small screens, add hide-mobile. Also available: hide-tablet and hide-desktop.

Always visible.

hide-mobile

Use:


<div class="row">
  <div class="col-8">...</div>
  <div class="col-4">...</div>
</div>

Buttons

Link Button Link Button

Use:


<button type="button">Button</button>
<button type="submit">Button</button>
<button type="reset">Button</button>

<a href="#" class="button">Button</button>

To disable a button, simply add disabled attribute for buttons and button--disabled class modifier for a tags.

Card

A card is like a box, but it can be made with a header + footer, both optional.

Use:


<div class="card">
    <div class="card__header">
        <h3>This is a card header.</h3>
    </div>
    <div class="card__body">
        <p>This is the card body</p>
    </div>
    <div class="card__footer">
        <a href="#" class="card__link">Link</a>
        <a href="#" class="card__link">Link</a>
    </div>
</div>

Images

Images do not need any special class to be styled.

Available modifiers:

avatar

Grouped avatars can be created by simplly adding more images in sequence.

Use:


<img src="..." alt="..." />

Inputs

Use:


<div class="input">
  <input type="text" placeholder="Text Input" />
</div>

<!-- OR -->

<div class="input">
  <select>
    <option value="">Select</option>
  </select>
</div>

<!-- OR -->

<div class="input">
  <textarea placeholder="Textarea"></textarea>
</div>

Available modifiers:

input--success
input--warning
input--error

Check boxes and radios

Checkbox checked

Checkbox

Radio checked

Radio

Use:


<div class="input input--checkbox">
  <input type="checkbox" id="checkbox_1" checked />
  <label for="checkbox_1">Checkbox checked</label>
</div>

<!-- OR -->

<div class="input input--radio">
  <input type="radio" name="radio" id="radio_1" checked />
  <label for="radio_1">Radio checked</label>
</div>

With label

Name

Use:


<div class="input input--with-helpers">
  <label for="input">Name</label>
  <input type="text" id="input" placeholder="Text Input" />
</div>

With helpers

This is a helper text.

Use:


<div class="input input--with-helpers">
  <input type="text" placeholder="Text Input" />
  <p class="input__helper">This is a helper text.</p>
</div>

With add-ons

https://

@gmail.com

Use:


<div class="input input--with-addons">
  <p class="input__addon">https://</p>
  <input type="text" placeholder="Text Input" />
</div>

<!-- OR -->

<div class="input input--with-addons">
  <input type="text" placeholder="Text Input" />
  <p class="input__addon">@gmail.com</p>
</div>

<!-- OR -->

<div class="input input--with-addons">
  <input type="text" placeholder="Text Input" />
  <select class="input__addon">
    <option value="">Select</option>
  </select>
</div>

Grouped

Use:


<div class="input input--grouped">
  <input type="text" placeholder="Text Input" />
  <input type="text" placeholder="Text Input" />
</div>

<!-- OR -->

<div class="input input--grouped">
  <input type="text" placeholder="Text Input" />
  <input type="text" placeholder="Text Input" />  
  <input type="text" placeholder="Text Input" />
</div>

Lists

Unordered list

List item
List item
List item

Ordered list

List item
List item
List item

Use:


<ul>
  <li>List item</li>
  <li>List item</li>  
  <li>List item</li>
</ul>

<!-- OR -->

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Tables

User name	Email	Phone
John McLane	mclane@diehard.movie	1 234 5678 900
Luke Skywalker	l.skywalker@startwars.movie	123 4567 8901
Tony Stark	tony@starkindustries.movie	12 3456 7890

Use:


<table>
  <thead>
    <tr>
      <th>User name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John McLane</td>
      <td>mclane@diehard.movie</td>
      <td>1 234 5678 900</td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

Notifications

This is a notification block.

This is a success notification block.

This is a warning notification block.

This is an error notification block.

This is an info notification block.

Use:


<div class="notification">
  This is a notification block.
</div>

Available modifiers:

notification--success
notification--warning
notification--error
notification--info

Code

This is how the content of a <code /> tag looks like.

Pre


<pre>
  <!-- Code here -->
</pre>

Code windows are highlighted when you add Prism and mark the content with a language-* class, as above. The colors come from the library, so no Prism theme is needed.

Progress

50%

75%

Use:


<div class="progress progress--75">75%</div>

Available modifiers for progress:

progress--<number>
E.g. progress--5
E.g. progress--75
E.g. progress--100
E.g. progress--infinite

Available modifiers for colors:

progress--warning
progress--danger
progress--info
progress--dark

Tooltip

Hover over the texts below to see the tooltips in action!

The tooltip may show on the opposite site, if the trigger is too close to the edge of the screen.

Use:


<button 
  class="has-tooltip has-tooltip--left" 
  data-tooltip="..."
> ... </button>

Available modifiers:

has-tooltip--left
has-tooltip--top
has-tooltip--bottom
has-tooltip--right

Javascript

Although you are not required to use Javascript with Boring CSS at all, you might want to use it to enhance the user experience (UX) of your website or web apps, for example, to give users the ability to change the color theme, or open/close a modal, etc.

Light-Dark mode switcher

The simple Javascript code bellow toggles the data-mode attribute of the <html /> tag on a button (or trigger) click. Use it freely.


<script>
  const trigger = document.querySelector('[role="toggle"].theme-switcher');
  const html = document.querySelector('html');

  if (trigger) {
    trigger.addEventListener('click', () => {
      const mode = html.getAttribute('data-mode');
      html.setAttribute('data-mode', mode === 'dark' ? 'light' : 'dark');
    });
  }
</script>

E.g. 👇

You may want to use the The Boring JavaScript, a small and simple JavaScript library to help you with some common tasks, like toggling the theme.