The Boring CSS

A BEM based set of classes to style your pages in an authentic NeuBrutalism way. It's free, use it with care.

Version 1.2.0

What is this?

Just another boring CSS styling library, by Rogério Taques.

What is it not?

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.

If you need a grid system to use along-with Boring CSS, I recommend you the Simple Grid.

Dark mode ready

Yes! It supports dark mode already! 🎉

You just need to add data-mode="dark" in the <html /> tag.

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:

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

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

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 class="input" 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.moviee</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>

Progress

75%

Use:

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

Available modifiers:

progress--0
progress--25
progress--50
progress--75
progress--100

Use:

<div class="progress progress--infinite"></div>

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:

<p 
  class="has-tooltip has-tooltip--left" 
  data-tooltip="This is the message to be shown on the tooltip"
> ... </p>

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.