Lemon – Minimal and responsive CSS framework for fast building websites

Home Dev Lemon – Minimal and responsive CSS framework for fast building websites


Minimal and responsive CSS framework for fast building websites


Lemon provides minimal setup of styles such as grid system, buttons, 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 😁

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



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

You can also download Lemon right from GitHub repository.

Download Lemon


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





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

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


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




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

Luck is preparation waiting for an opportunity.

Ross Brawn

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


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

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


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!');
  class HelloWorld {
    greet() {
      console.log('Hello World!');


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

  <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>
  <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>
  <input class="button-primary" type="submit" value="Send">


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.

  • List item one
  • List item two
  • List item three
  1. List item one
  2. List item two
  3. List item three
Description list item 1
Description list item 1.1

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

Leave a Reply

Your email address will not be published.