Andronaco UI base

by Victor

HTML

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto perspiciatis optio recusandae porro reiciendis autem magni ratione fuga voluptatum distinctio dolorem sit nobis non voluptatem dolores aut dolor. Veritatis repellat.</p>
<p class="p-md">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure recusandae non asperiores. Est quasi magnam vel distinctio asperiores veniam ducimus animi excepturi aperiam itaque voluptatibus repellat veritatis consequuntur porro a.</p>
<p class="p-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam deserunt provident cum natus iure culpa sed explicabo tenetur facere veniam mollitia saepe odio totam quos quae minus ipsam! Magnam eveniet!</p>
<blockquote>Blockquote goes here</blockquote>
<code>$(thing).action(args)</code>

<code class="blockCode">$(thing).action(args)</code>

<label for="">Label</label>
<br/>
<a href="#" class="bttn">Button</a>

<a href="#" class="bttn-lg">Large Button</a>

<a href="#" class="bttn-sm">Small Button</a>

<br/>
<form action="">
     <h2>Form heading</h2>

    <div>
        <label for="">Label</label>
        <input type="text" />
    </div>
    <div>
        <label for="">Label</label>
        <select name="" id="">
            <option value="blue">blue</option>
            <option value="red">red</option>
            <option value="green">green</option>
            <option value="yellow">yellow</option>
        </select>
    </div>
    <div>
        <label for="">Label</label>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
    <input class="submitForm" type="submit" value="Submit" />
</form>
<table class="responsiveTable">
    <thead>
        <tr>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
           ...

CSS

body {
     font-size: 18px;
     /* fallback for browsers that don't support rem */
     font-size: 1.00rem;
     font-family:sans-serif;
     font-weight:normal;
 }
 /*****************HEADINGS */
 h1, h2, h3, h4 {
     font-weight:bold;
 }
 h1 {
     font-size: 40px;
     /* fallback for browsers that don't support rem */
     font-size: 2.35rem;
     line-height: 65px;
     /* fallback for line height */
     line-height: 3.824rem;
     padding:5px;
 }
 h2 {
     font-size: 30px;
     /* fallback for browsers that don't support rem */
     font-size: 1.76rem;
     line-height: 49px;
     /* fallback for line height */
     line-height: 2.868rem;
     padding:5px;
 }
 h3 {
     font-size: 20px;
     /* fallback for browsers that don't support rem */
     font-size: 1.18rem;
     line-height: 33px;
     /* fallback for line height */
     line-height: 1.911rem;
     padding:5px;
 }
 h4 {
     font-size: 16px;
     line-height: 33px;
     /* fallback for line height */
     line-height: 1.911rem;
     padding:5px;
 }
 /**************text items */
 p {
     padding:5px;
 }
p.p-sm {
    font-size:60%;
}
p.p-md {
    font-size:80%;
}
 blockquote {
     font-style:italic;
     padding:5px;
     font-size: 25px;
     /* fallback for browsers that don't support rem */
     font-size: 1.18rem;
     line-height: 33px;
     /* fallback for line height */
     line-height: 1.911rem;
     padding:5px;
 }
 blockquote:before {
     color: #ccc;
     content: open-quote;
     font-size: 4em;
     line-height: 0.1em;
     margin-right: 0.25em;
     vertical-align: -0.4em;
 }
 code {
     padding:5px;
    color:#E86F5D;
     background:#222;
     display:inline-block;
    font-weight:bold;
 }
 code.blockCode {
     padding:5px;
     display:block;
    margin:2px 0;

 }
 label {
     font-weight:bold;
     padding:10px ;
    display:inline-block;
 }
 .bttn {
     background:#3498db;
     border-radius:5px;
     padding:5px 15px;
     display:inline-block;
     margin:0 5px;
    ...