Lemon - Minimal and responsive CSS framework for fast building websites

Lemon

Minimal and responsive CSS framework for fast building websites

Github

About

Lemonprovides minimal setup of styles such as grid system, buttors and forms. I made this framework for the purpose of learning things like CSS and SASS but if someone of want to use it or contribute to it I will be really happy :grin:

Also check my Github account for more open-source projects!

Installation

CDN

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i" rel="stylesheet">
<link href="https://unpkg.com/lemoncss/dist/lemon.min.css" rel="stylesheet">

NPM

$ npm install --save lemoncss

lemoncss/
├── dist/
│   ├── lemon.css            # Uncompressed version
│   ├── lemon.min.css        # Compressed version
├── src/                     # Source files
│ ├── _blockquote.scss
│ ├── _buttons.scss
│ ├── ...
│ ├── _variables.scss
│ ├── lemon.scss             # Main SCSS file

Download

You can also download Lemon right from GitHub repository.

Download Lemon

Containers

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.

<div class="container">Large</div>
<div class="container medium">Medium</div>
<div class="container small">Small</div>

Small Medium Large 800px 1000px 120px

Grid

Grid system is based on Flexbox . Simply add columns you want in a row, and they'll evenly take up the available space. Do not forget to wrap columns in row container!

.column

.column

.column

.column

.column

<div class="row">
  <div class="column">.column</div>
</div>

<div class="row">
  <div class="column">.column</div>
  <div class="column">.column</div>
  <div class="column">.column</div>
  <div class="column">.column</div>
</div>

Typography

Font size is based on rem unit which stands for "root em" - it is relative to html element. Lemon define html elements font size as 62.5% which gives us 10px. Thanks for that You can easily build layout based on rem unit - 1rem is equal to 10px. Lemon use Open Sans font.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Emphasis Small Strong Underline

Paraghaph

Blockquotes

Blockquote is set to have a left border. A cite will be right aligned and italicized.

<blockquote>
  <p>Tell me and I forget, teach me and I may remember, involve me and I learn.</p>
  <cite>Benjamin Franklin</cite>
</blockquote>

Buttons

Button elements, links with a .btn class, and input elements should all render exactly the same. You can choose from two styles: basic and outlined (with .outline class).

<button>Button</button>
<a href="#" class="btn">Link</a>
<input type="button" value="Input">
<input type="submit" value="Submit">
<button disabled>Disabled</button>

<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>

Code

To represent fragment of computer code wrap it in code element to look like this. If You want to place blocks of preformatted code wrap code in pre element.

class HelloWorld {
  greet() {
    console.log('Hello World!');
  }  
}

<pre><code>
  class HelloWorld {
    greet() {
      console.log('Hello World!');
    }
  }
</code></pre>

Forms

Default forms will have full-width, block level labels, inputs, selects, and textareas.

<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>

Lists

You can choose from three types of lists: unordered list use ul element will be marked with a outline circles, the ordered list use ol element and your items will be marked with numbers, the description list use dl element and your items will not be marking, only spacings.

<ul>
  <li>List item one
    <ul>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item two</li>
  <li>List item three</li>
</ul>