Section 3 Opinions

Opinionated styles for all elements.

Source: opinions.css, line 1

Section 3.1 Block Elements

Toggle full screen Open in new window

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Ac mollis neque dui vitae arcu. Fusce fringilla lectus ut ipsum condimentum a egestas odio pretium. Fusce vehicula erat a eros fermentum vestibulum.

In a nisi eu dolor adipiscing facilisis sed et est.

Phasellus suscipit ipsum
nec purus luctus ut
euismod nisi dapibus.

Nullam ut tincidunt nunc. Pellentesque metus lacus, commodo eget justo ut, rutrum varius nunc. Sed non rhoncus risus.

Morbi sodales gravida pulvinar. Duis malesuada, odio volutpat elementum vulputate, massa magna scelerisque ante, et accumsan tellus nunc in sem.


Donec mattis arcu
Et velit aliquet
Non sagittis justo vestibulum

In tincidunt mi nisi, nec faucibus tortor euismod nec.

A placeholder kitten
Aliquet vitae libero eu, vulputate dapibus.

Sed Bibendum

Sapien at posuere interdum, libero est sollicitudin magna.

Ac gravida tellus purus eu ipsum. Proin ut quam arcu.

<div>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>
    Ac mollis neque dui vitae arcu. Fusce fringilla lectus ut ipsum
    condimentum a egestas odio pretium. Fusce vehicula erat a eros fermentum
    vestibulum.
  </p>
  <blockquote>
    <p>In a nisi eu dolor adipiscing facilisis sed et est.</p>
  </blockquote>
  <pre>Phasellus suscipit ipsum
nec purus luctus ut
euismod nisi dapibus.</pre>
  <article>
    <p>Nullam ut tincidunt nunc. Pellentesque metus lacus, commodo eget justo
    ut, rutrum varius nunc. Sed non rhoncus risus.</p>
    <p>Morbi sodales gravida pulvinar. Duis malesuada, odio volutpat
    elementum vulputate, massa magna scelerisque ante, et accumsan tellus
    nunc in sem.</p>
  </article>
  <hr />
  <address>
    Donec mattis arcu<br />
    Et velit aliquet<br />
    Non sagittis justo vestibulum
  </address>
  <aside>
    <p>Suspendisse volutpat felis lectus, nec consequat ipsum mattis id.
    Donec dapibus vehicula facilisis.</p>
  </aside>
  <section>
    <p>In tincidunt mi nisi, nec faucibus tortor euismod nec.</p>
  </section>
  <nav>
    <ul>
      <li><a href="#">Suspendisse</a></li>
      <li><a href="#">Ante Ligula</a></li>
    </ul>
  </nav>
  <figure>
    <img
      alt="A placeholder kitten"
      src="https://placekitten.com/200/300?image=11"
    />
    <figcaption>Aliquet vitae libero eu, vulputate dapibus.</figcaption>
  </figure>
  <header>
    <h1>Sed Bibendum</h1>
    <p>Sapien at posuere interdum, libero est sollicitudin magna.</p>
  </header>
  <footer>
    <p>Ac gravida tellus purus eu ipsum. Proin ut quam arcu.</p>
  </footer>
</div>
Source: opinions.css, line 9

Section 3.2 Form Elements

Toggle full screen Open in new window

<form>
  <input placeholder="Ex: Pat Smith" />
  <input type="date" />
  <input type="password" />
  <input type="search" />
  <textarea></textarea>
  <div>
    <select>
      <option disabled selected>Choose…</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div>
    <input checked id="checkbox-1" name="checkbox" type="checkbox" />
    <label for="checkbox-1">One</label>
    <input id="checkbox-2" name="checkbox" type="checkbox" />
    <label for="checkbox-2">Two</label>
  </div>
  <fieldset>
    <input checked id="radio-1" name="radio" type="radio" value="1" />
    <label for="radio-1">One</label>
    <input id="radio-2" name="radio" type="radio" value="2" />
    <label for="radio-2">Two</label>
    <input id="radio-3" name="radio" type="radio" value="3" />
    <label for="radio-3">Three</label>
  </fieldset>
  <button type="button">Button</button>
  <input value="Button" type="submit" />
  <input value="Cancel" type="reset" />
</form>
Source: opinions.css, line 281

Section 3.3 Inline Elements

Toggle full screen Open in new window

Lorem dignissim condimentum mattis non lorem.

Suspendisse potenti.

Praesent nec nulla elit.

Sit amet molestie metus.

Curabitur consectetur, ipsum sit.

Amet fringilla imperdiet, nisi nulla pharetra nunc.

Et consectetur nulla nisl a dolor.

Etiam hendrerit tortor non mauris gravida et molestie ipsum eleifend.

Vestibulum eget metus in lorem dignissim condimentum mattis non lorem.

Donec volutpat viverra turpis, nec tristique dui aliquet non. Maecenas justo lorem, vestibulum eu feugiat vitae, ultrices nec ipsum.

Suspendisse potenti, donec Ante Velit.

Velit, ornare at augue quis, tristique laoreet sem.

Etiam in ipsum elit .

Nullam cursus dolorsit amet nulla feugiat.

<div>
  <p><a href="#">Lorem dignissim condimentum</a> mattis non lorem.</p>
  <p><strong>Suspendisse potenti.</strong></p>
  <p><em>Praesent nec nulla elit.</em></p>
  <p><b>Sit amet molestie metus.</b></p>
  <p><i>Curabitur consectetur, ipsum sit.</i></p>
  <p>Amet fringilla <code>imperdiet</code>, nisi nulla pharetra nunc.</p>
  <p>Et consectetur <del>nulla nisl</del> <ins>a dolor</ins>.</p>
  <p>
    Etiam hendrerit tortor <abbr title="Natoque Odio Nulla">non</abbr> mauris
    gravida et molestie ipsum eleifend.
  </p>
  <p>
  <small>
    Vestibulum eget metus in lorem dignissim condimentum mattis non lorem.
  </small>
  </p>
  <p>
    Donec volutpat viverra turpis, nec <code>tristique</code> dui aliquet
    non. Maecenas <kbd>justo lorem</kbd>, vestibulum eu <data>feugiat</data>
    <samp>vitae</samp>, ultrices nec ipsum.
  </p>
  <p><q>Suspendisse potenti,</q> donec <cite>Ante Velit</cite>.</p>
  <p>Velit, ornare at <mark>augue quis</mark>, tristique laoreet sem.</p>
  <p>
    Etiam in ipsum elit <time datetime="2019-02-23T18:51:47Z">today</time>.
  </p>
  <p>Nullam cursus dolor<sub>sit</sub> amet nulla <sup>feugiat</sup>.</p>
</div>
Source: opinions.css, line 114

Section 3.4 List Elements

Toggle full screen Open in new window

  • Proin vestibulum nunc
  • In metus cursus at aliquam neque mollis
  • Curabitur hendrerit porta
  1. Nibh, a dignissim
  2. Diam tempor eu
  3. Nam id erat dictum velit facilisis
Tincidunt
Etiam auctor, felis et auctor
Blandit
Eros quam aliquam orci
<div>
  <ul>
    <li>Proin vestibulum nunc</li>
    <li>In metus cursus at aliquam neque mollis</li>
    <li>Curabitur hendrerit porta</li>
  </ul>
  <ol>
    <li>Nibh, a dignissim</li>
    <li>Diam tempor eu</li>
    <li>Nam id erat dictum velit facilisis</li>
  </ol>
  <dl>
    <dt>Tincidunt</dt>
    <dd>Etiam auctor, felis et auctor</dd>
    <dt>Blandit</dt>
    <dd>Eros quam aliquam orci</dd>
  </dl>
</div>
Source: opinions.css, line 76

Section 3.5 Table

Toggle full screen Open in new window

Morbi est tellus Dapibus At imperdiet non
Ultricies ut risus 10 14
Nunc faucibus 9 16
Leo in augue sodales 7 22
Eget rhoncus dolor lobortis 5 1
<table>
  <thead>
    <tr>
      <th>Morbi est tellus</th>
      <th>Dapibus</th>
      <th>At imperdiet non</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ultricies ut risus</td>
      <td>10</td>
      <td>14</td>
    </tr>
    <tr>
      <td>Nunc faucibus</td>
      <td>9</td>
      <td>16</td>
    </tr>
    <tr>
      <td>Leo in augue sodales</td>
      <td>7</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Eget rhoncus dolor lobortis</td>
      <td>5</td>
      <td>1</td7>
    </tr>
  </tbody>
</table>
Source: opinions.css, line 406