Avalojandro

<!-- emphasis -->
<div class="emphasis emph-s">
    Remember that CattoCSS is OpenSource!!!
</div>

<div class="emphasis emph-w">
    Remember that CattoCSS is OpenSource!!!
</div>

<div class="emphasis emph-dngr">

Avalojandro

<ul>
 <li class="item-list" type="none">alejandro</li>
 <li class="item-list" type="none">daniel</li>
 <li class="item-list" type="none">avalos</li>
 <li class="item-list" type="none">daniel</li>
 <li class="item-list" type="none">avalos</li>
 <li class="item-list" type="none">santarmaria</li>
</ul>

Avalojandro

    <!-- link-list -->
    <div class="list-item first-item secondary">alejandro</div>
    <a href=""><div class="list-item middle-item link">avalos</div></a>
    <a href=""><div class="list-item middle-item link">avalos</div></a>
    <a href=""><div class="list-item middle-item link">avalos</div></a>
    <a href=""><div class="list-item last-item link">santamaria</div></a>

Avalojandro

<!-- alerts -->
<div class="alert-primary">
    <span class="text-alert">Remember share CattoCSS!!!</span>
</div>


<div class="alert-secondary">
    <span class="text-alert">Remember share CattoCSS!!!</span>
</div>

Avalojandro

    <!-- box-input -->
    <div style="display: inline;">
        <span class="form-boxL">@</span>
        <input type="text" style="width: 200px;" class="inputFBL">
    </div>


    <div style="display: inline;">
        <input type="text" style="width: 150px;" class="inputFBR">
        <span class="form-boxR">@example.com</span>

Avalojandro

<form action="">  
    <div class="text-form">E-mail adress</div>
    <div>
        <input class="input" type="email"><br>
        <span class="form-advice">We'll never share your information with anyone else</span>
    </div>
    <br>
    <div class="text-form">Password</div>
    <div>
        <input class="input" type="password">

Avalojandro

<!-- Select -->
<select class="select" name="" id="">
  <option value="0">Select car:</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
  <option value="3">Citroen</option>
</select>


<select class="select dark" name="" id="">

Avalojandro

    <!-- Text Only -->
    <div class="card-content-only">
        This is a card with text only
    </div>    


    <!-- title and text -->
    <div class="card-content-only">
        <span class="card-title">Card title</span><br>
        <span class="card-subtitle">This is a card subtitle</span>

Avalojandro

    <!-- img and text -->
    <img class="card-img shadow" src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
        <div class="card-content shadow">
            <span class="card-title">Card title</span>
            <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing. Unde nam cumque ducimus voluptatum ea ab perspiciatis laborum exercitationem</p>
            <a href="" class="button">Go somewhere</a>
        </div>


        <img class="card-img shadow" src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">

Avalojandro

<!--Breadcrumb-->
<div class="breadcrumb">
    <div class="col-md-12 col-xs-12 col-sm-12 bread">
        <a class="text-secondary" href="">Home</a><span>&nbsp;/&nbsp;</span>
        <a class="text-secondary" href="">Library</a><span>&nbsp;/&nbsp;</span>
        <a class="text-secondary" href="">Data</a>
    </div>
</div>