Lime is a simple but powerfull Fresh CSS Framework with both flex grid and classic 12 grid system. Cover most of designing cases as a fully responsive framework but remains lightweight and minimal. Target is to be the tool for every new project you start.
Download Lime directly from GitHub repository.
Download LimeOr clone the repository
$ git clone https://github.com/thebigbaron/lime.git
Three container sizes for full responsive apps & sites. 🏁 😎
<div class="container">Large(1200px)</div> <div class="container medium">Medium(1000px)</div> <div class="container small">Small(800px)</div>
<div class="row"> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
<div class="twelve columns"> <div class="one column">one</div> <div class="eleven columns">eleven</div> </div> <div class="twelve columns"> <div class="two columns">two</div> <div class="ten columns">ten</div> </div> <div class="twelve columns"> <div class="three columns">three</div> <div class="nine columns">nine</div> </div> <div class="twelve columns"> <div class="four columns">four</div> <div class="eight columns">eight</div> </div> <div class="twelve columns"> <div class="five columns">five</div> <div class="seven columns">seven</div> </div> <div class="twelve columns"> <div class="six columns">six</div> <div class="six columns">six</div> </div> <div class="twelve columns"> <div class="five columns">five</div> <div class="seven columns">seven</div> </div> <div class="twelve columns"> <div class="four columns">four</div> <div class="eight columns">eight</div> </div> <div class="twelve columns"> <div class="three columns">three</div> <div class="nine columns">nine</div> </div> <div class="twelve columns"> <div class="two columns">two</div> <div class="ten columns">ten</div> </div> <div class="twelve columns"> <div class="one column">one</div> <div class="eleven columns">eleven</div> </div>
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.🍬 😊
Paraghaph
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <a href="#">Anchor</a> <em>Emphasis</em> <small>Small</small> <strong>Strong</strong> <u>Underline</u> <p>Paraghaph</p>
Blockquote for quotes of great people. 📜 👏
It's not a faith in technology. It's faith in people.
- Steve Jobs
<blockquote> <p>It's not a faith in technology. It's faith in people.</p> <cite>- Steve Jobs</cite> </blockquote>
<button>Button</button> <a href="#" class="btn">Link</a> <input type="button" value="Input"> <input type="submit" value="Submit"> <button disabled>Disabled</button>
In this section you can put code blocks you want to represent to look like this.🤓 🤓
class HelloWorld {
greet() {
console.log('Hello World!');
}
}
You can also use an online editor for syntax highlighting like tohtml to look like this.
<pre><code> class HelloWorld { greet() { console.log('Hello World!'); } } </code></pre>
<form> <h3>Login Form</h3> <div> <label>Email address</label> <input type="email" placeholder="Enter email"> <small>We'll never share your email.</small> </div> <div> <label>Password</label> <input type="password" placeholder="Password"> </div> <div> <label for="country">Country</label> <select id="country"> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Canada">Canada</option> <option value="France">France</option> <option value="Other">Other</option> </select> </div> <div> <input type="checkbox"> <small>Remember me</small> </div> <button type="submit" class="button">Submit</button> </form>
You can choose from three types of lists ol, ul, dl. 📋 🤗
<ul> <li>Unorder List <ul> <li>Nested item</li> </ul> </li> <li>Two</li> <li>Three</li> </ul> <ol> <li>Order List <ul> <li>Nested item</li> </ul> </li> <li>Two</li> <li>Three</li> </ol> <dl> <dt>Description list item 1</dt> <dd>Description list item 1.1</dd> </dl>
No. | Product | Quantity | Price | Total Price |
---|---|---|---|---|
1 | Smartphone | 2 | $ 180.00 | $ 360.00 |
2 | TV | 1 | $ 990.00 | $ 990.00 |
3 | Laptop | 4 | $ 600.00 | $ 2,400.00 |
4 | USB Charger | 4 | $ 12.00 | $ 48.00 |
<table> <thead> <tr> <th>No.</th> <th>Product</th> <th>Quantity</th> <th>Price</th> <th>Total Price</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>Smartphone</td> <td>2</td> <td>$ 180.00</td> <td>$ 360.00</td> </tr> <tr> <th>2</th> <td>TV</td> <td>1</td> <td>$ 990.00</td> <td>$ 990.00</td> </tr> <tr> <th>3</th> <td>Laptop</td> <td>4</td> <td>$ 600.00</td> <td>$ 2,400.00</td> </tr> <tr> <th>4</th> <td>USB Charger</td> <td>4</td> <td>$ 12.00</td> <td>$ 48.00</td> </tr> </tbody> </table>