Skip to content
GitLab

Add `semantic` class for reduced markup

Closed Administrator requested to merge github/fork/jonathanhefner/semantic-implications into master

Created by: jonathanhefner

By design, Bootstrap supports opt-in styling via explicit classes, rather than implicit styling via semantic HTML. Opt-in styling is more robust, because implicit styling can be difficult to undo / opt out of, and may cause conflicts with third-party code. However, styling entirely via explicit classes can result in more verbose markup. The semantic class provides a middle ground between the two approaches, enabling implicit styling in limited scopes. It changes nothing about the way Bootstrap currently works, but adds a way for users to style their content via semantic HTML.

For example, styling breadcrumbs via explicit classes:

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>

Versus styling breadcrumbs via the semantic class:

<ol class="breadcrumb semantic">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active" aria-current="page">Data</li>
</ol>

The list of semantic implication rules in this commit is small. It is intended to grow with community input.

TODO:

  • docs?
  • tests?
  • relocate Sass variables?
  • additional implication rules?