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?