Minimal and responsive CSS framework for fast building websites
CSS 2/3, Lemon
Snippet by Anon
1421 0
Resources
<section class="container small section" id="containers"> <h2>Containers</h2> <p>You can choose from three container sizes, that are centered horizontaly by left and right padding and shrinks with the browser. Any content without a container will span full browser width.</p> <table> <thead> <tr> <th>Small</th> <th>Medium</th> <th>Large</th> </tr> </thead> <tbody> <tr> <td>800px</td> <td>1000px</td> <td>120px</td> </tr> </tbody> </table> </section> <section class="container small section" id="grid"> <h2>Grid</h2> <p>Grid system is based on <strong>Flexbox</strong>. Simply add columns you want in a row, and they'll evenly take up the available space. Do not forget to wrap columns in <code>row</code> container!</p> <div class="row"> <div class="column"><span class="column-demo">.column</span></div> </div> <div class="row"> <div class="column"><span class="column-demo">.column</span></div> <div class="column"><span class="column-demo">.column</span></div> <div class="column"><span class="column-demo">.column</span></div> <div class="column"><span class="column-demo">.column</span></div> </div> </section> <section class="container small section" id="typography"> <h2>Typography</h2> <p>Font size is based on <code>rem</code> unit which stands for <i>"root em"</i> - it is relative to <code>html</code> element. Lemon define <code>html</code> elements font size as 62.5% which gives us 10px. Thanks for that You can easily build layout based on <code>rem</code> unit - 1rem is equal to 10px. Lemon use <a href="https://fonts.google.com/specimen/Open+Sans">Open Sans</a> font.</p> <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> </section> <section class="container small section" id="blockquotes"> <h2>Blockquotes</h2> <p>Blockquote is set to have a left border. A cite will be right aligned and italicized.</p> <blockquote> <p>Luck is preparation waiting for an opportunity.</p> <cite>Ross Brawn</cite> </blockquote> </section> <section class="container small section" id="buttons"> <h2>Buttons</h2> <p>Button elements, links with a <code>.btn</code> class, and input elements should all render exactly the same. You can choose from two styles: basic and outlined (with <code>.outline</code> class).</p> <div> <button>Button</button> <a href="#" class="btn">Link</a> <input type="button" value="Input"> <input type="submit" value="Submit"> <button disabled="">Disabled</button> </div> <div> <button class="outline">Button</button> <a href="#" class="btn outline">Link</a> <input type="button" class="outline" value="Input"> <input type="submit" class="outline" value="Submit"> <button class="outline" disabled="">Disabled</button> </div> </section> <section class="container small section" id="code"> <h2>Code</h2> <p>To represent fragment of computer code wrap it in <code>code</code> element to look like this. If You want to place blocks of preformatted code wrap <code>code</code> in <code>pre</code> element.</p> </section> <section class="container small section" id="forms"> <h2>Forms</h2> <p>Default forms will have full-width, block level labels, inputs, selects, and textareas.</p> <form> <label for="name">Name</label> <input type="text" placeholder="Enter Your name" id="name"> <label for="age">Age</label> <select id="age"> <option value="0-13">0-13</option> <option value="14-17">14-17</option> <option value="18-23">18-23</option> <option value="24+">24+</option> </select> <label for="message">Message</label> <textarea placeholder="Enter Your message" id="message"></textarea> <div class="mb"> <input type="checkbox" id="confirmField"> <label class="label-inline" for="confirmField">Send a copy to yourself</label> </div> <input class="button-primary" type="submit" value="Send"> </form> </section> <section class="container small section" id="lists"> <h2>Lists</h2> <p>You can choose from three types of lists: unordered list use <code>ul</code> element will be marked with a outline circles, the ordered list use <code>ol</code> element and your items will be marked with numbers, the description list use <code>dl</code> element and your items will not be marking, only spacings.</p> <div class="row"> <div class="column"> <ul> <li>List item one <ul> <li>Nested list item</li> </ul> </li> <li>List item two</li> <li>List item three</li> </ul> </div> <div class="column"> <ol> <li>List item one <ul> <li>Nested list item</li> </ul> </li> <li>List item two</li> <li>List item three</li> </ol> </div> <div class="column"> <dl> <dt>Description list item 1</dt> <dd>Description list item 1.1</dd> </dl> </div> </div> </section>
{} CSS Resources
https://unpkg.com/lemoncss/dist/lemon.min.css