Components

There are two types of components in ajcss. There are atomic components (aka those that require many atomic css classes) and default components, which are similar in usage to bootstrap.

List of components

Example: Card

<div class="card p3 mv2"> <h3>This is default card</h3> <p class="silver">Here is a quick blurb</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, velit.</p> </div> <div class="ba b-light-gray p3 mv2"> <h3>This is a more atomic card</h3> <p class="silver">Here is a quick blurb</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, porro.</p> </div>

You can clearly see that the atomic card has classes to define the border, and the color, while the default simply has one class: card. The cards are also wrapped in a grid, for responsiveness.

Example: Navbar

<header class="navbar ph4 pv3 bg-near-white"> <section class="fl"> <a href="#" class="btn btn-link tracked b dib"> <span class="purple">Brand</span> </a> <a href="#" class="btn btn-link">Updates</a> <a href="#" class="btn btn-link">About</a> <a href="#" class="btn btn-link">Profile</a> </section> <section class="fr"> <a href="/login" class="btn btn-link">Login<a> <a href="/signup" class="btn btn-link b">Sign Up</a> <a href="/profile" class="btn btn-link"> <span class="gray"> Hi <b>Name</b> </span> </a> <a href="/logout" class="btn btn-link">Logout</a> </section> </header>

Example: Vertical Navbar

<!--The default way--> <ul class="nav"> <li class="nav-item"> <a href="#">Elements</a> </li> <li class="nav-item"> <a href="#" class="">Layout</a> <ul class="nav"> <li class="nav-item"> <a href="#">Responsive Grid</a> </li> <li class="nav-item"> <a href="#">Colors</a> </li> </ul> </li> </ul> <!--The atomic way--> <nav class="gray mt3"> <div class="mv3">Elements</div> <div class="mv3">Layout</div> <div class="light-silver ml4 pv1"> <div class="mv3" href="#">Responsive Grid</div> <div class="mv3" href="#">Colors</div> </div> </nav>

Here, I would reccomend the default way, as working with atomic classes and links can be a pain.

Example: Tabs

• Music
• Playlists
• Radio
• Connect

<ul class="tab tab-block"> <li class="tab-item active"> <a href="#">Music</a> </li> <li class="tab-item"> <a href="#">Playlists</a> </li> <li class="tab-item"> <a href="#">Radio</a> </li> <li class="tab-item"> <a href="#">Connect</a> </li> <li class="tab-item"> <input type="text" placeholder="Type to search" class="dib"> </li> </ul>

Example: Chips

Chip Chip 2 Chip 2 Chip 2 <span class="chip"> Chip <button class="btn btn-clear"></button> </span> <span class="chip bg-red near-white"> Chip 2 <button class="btn btn-clear"></button> </span> <span class="chip bg-yellow black"> Chip 2 <button class="btn btn-clear"></button> </span> <span class="chip bg-dark-pink white"> Chip 2 <button class="btn btn-clear"></button> </span>

Example: Toasts

<div class="toast mv2"> Info Toast <button class="btn btn-clear fr"></button> </div> <div class="toast mv2 bg-red near-white"> Error Toast <button class="btn btn-clear fr"></button> </div> <div class="toast mv2 bg-yellow black"> Waning Toast <button class="btn btn-clear fr"></button> </div> <div class="toast mv2 bg-green white"> Sucess Toast <button class="btn btn-clear fr"></button> </div>

Example: Modal

<div class="modal active"> <div class="modal-overlay"></div> <div class="modal-container"> <div class="p3"> <button class="btn btn-clear fr"></button> <h3 class="b">Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit iusto iste, tenetur nobis ab perspiciatis ratione, facere possimus sapiente, quisquam iure asperiores necessitatibus, deserunt enim. Aliquam magni minus non ipsam, dolores error quis eum, atque molestiae accusantium nam harum, in!</p> <label for="">Name</label> <input type="text" placeholder="Enter your name"> <div class="cf pt2"> <button class="fr mh2">Close</button> <button class="btn-primary fr mh2">Submit</button> </div> </div> </div> </div>