Atomic Bulldog - UI/pattern library

3.1 - Accessibility settings panel

Source: organisms/__documentation.scss, line 17

Accessibility settings allow to change the layout of the web application, It works using a class triggering the event and a data attribute setting the behavior

Example:

.a11y-change-font-size - data-target-font-size="behavior"
reset - data-target-font-size="reset"
decrease - data-target-font-size="decrease"
increase - data-target-font-size="increase"
.a11y-change-theme - data-target-theme="theme class"
theme-default - data-target-font-size="theme-default"
theme-invert - data-target-font-size="theme-invert"

Example:

Change font sizes:

Change theme:

<div id="accessibility-settings" class="has-py-6 has-bg-primary">
    <div class="container has-text-center">
        <ul class="list-inline">
            <li class="has-font-weight-bold">Change font sizes:</li>
            <li>
                <button class="a11y-change-font-size" data-target-font-size="reset">Reset font size</button>
            </li>
            <li>
                <button class="a11y-change-font-size" data-target-font-size="decrease">Decrease font size</button>
            </li>
            <li>
                <button class="has-font-size-5 a11y-change-font-size" data-target-font-size="increase">Increase font size</button>
            </li>
        </ul>
        <ul class="list-inline">
            <li class="has-font-weight-bold">Change theme:</li>
            <li>
                <button class="a11y-change-theme" data-target-theme="theme-default">Default theme</button>
            </li>
            <li>
                <button class="a11y-change-theme" data-target-theme="theme-invert">Invert theme</button>
            </li>
        </ul>
    </div>
</div>

3.2 - Form

Source: organisms/_form.scss, line 17

Open in new window

.form default styling. It removes the margin bottom of the last .form-group

.is-valid - Form group is valid .has-error - Form group has error

Example:

<form class="form">
  <div class="form-group">
    <label for="exampleEmail1">Email address</label>
    <input type="email" id="exampleEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <p id="emailHelp" class="form-text mb-0">We'll never share your email with anyone else.</p>
    <p class="form-text has-error">Opps, please enter a valid email.</p>
    <p class="form-text is-valid">Email is valid.</p>
  </div>
  <div class="form-group">
    <label for="message1">Your message</label>
    <textarea id="message1" placeholder="Your message"></textarea>
    <p class="form-text has-error">Opps, please enter a message.</p>
    <p class="form-text is-valid">Message is valid.</p>
  </div>
  <div class="form-group">
    <label>Select an option</label>
    <select>
     <option selected="true" disabled>Select dropdown</option>
     <option value="option1">option1</option>
     <option value="option2">option2</option>
     <option value="option3">option3</option>
     <option value="option4">option4</option>
    </select>
    <p class="form-text has-error">Opps, please select a value.</p>
    <p class="form-text is-valid">input is valid.</p>
  </div>
  <div class="form-group">
    <label>What do you thing?</label>
    <div class="input-group">
     <label class="input-label"><input type="radio" name="test7" value="radio1"> Yes</label>
     <label class="input-label"><input type="radio" name="test7" value="radio2"> No</label>
     <label class="input-label"><input type="radio" name="test7" value="radio3"> Not sure</label>
    </div>
    <p class="form-text has-error">Opps, please check.</p>
    <p class="form-text is-valid">input is valid.</p>
  </div>
  <div class="form-group">
  <label>Do you agree?</label>
    <div>
     <label class="input-label"><input type="checkbox" name="test8" value="checkbox"> I agree with <a href="#">Terms and conditions</a></label>
    </div>
    <p class="form-text has-error">Opps, please check.</p>
    <p class="form-text is-valid">input is valid.</p>
  </div>
  <div class="form-group">
     <button type="submit" class="btn is-primary">Submit</button>
     <button type="reset">Clear</button>
  </div>
</form>

3.3 - Navigation Bar

Source: organisms/_navigation-bar.scss, line 29

Open in new window

Resize me

Have accessible keys for mobile as well esc to close and tab to navigate inside, using trapTabKey js function so we don't focus outside.

Example:

<header class="navigation-bar has-py-3">
  <div class="navigation-bar-items" role="dialog">
      <div class="brand">
          <a href="#">Brand Name
              <span>v1.0.0</span>
          </a>
      </div>
      <nav id="main-navigation" class="navigation">
          <button class="burger">
              <span class="burger-icon">
                  <span></span>
              </span> Menu</button>
          <ul class="list-inline navigation-items">
              <li>
                  <a href="#">Home</a>
              </li>
              <li>
                  <a href="#">Shop</a>
              </li>
              <li>
                  <a href="#">Space Bears</a>
              </li>
              <li>
                  <a href="#">Mars Cars</a>
              </li>
              <li>
                  <a href="#">Contact</a>
              </li>
          </ul>
      </nav>
  </div>
</header>