Advantages

Lightweight, compressed size ~5Kb
Pure CSS, no JavaScript dependencies
Easy to set up and use
Source is powered by Sass
Advanced grid system by Bootstrap

Super fast hosting by

Quick start

Copy-paste this code to the <head> section of your index.html file:

Set up locally

Alternatively, download the minified stylesheet from this site, or Github.

Or install from with the following terminal command:

npm install lin.css --save

And add the link as a reference to a local file:

Note: update the path according to your file structure.

React.js: In order to import the stylesheet into a React app, add the following line to the root index.js file:

import '../node_modules/lin.css/dist/lin.css'

Or the minified version:

import '../node_modules/lin.css/dist/lin.min.css'

Recommended CSS books

Documentation

Button Button flat Button lite Card Code snippet Terminal command Form and inputs Icon Image Message Tag

Button

<button class="lin-button">
  Primary
</button>

<button class="lin-button is-secondary">
  Secondary
</button>

<button class="lin-button is-danger">
  Danger
</button>

<button class="lin-button" disabled>
  Disabled
</button>

Flat

<button class="lin-button is-flat">
  Primary
</button>

<button class="lin-button is-flat is-secondary">
  Secondary
</button>

<button class="lin-button is-flat is-danger">
  Danger
</button>

<button class="lin-button is-flat" disabled>
  Disabled
</button>

Lite

<button class="lin-button is-lite">
  Primary
</button>

<button class="lin-button is-lite is-secondary">
  Secondary
</button>

<button class="lin-button is-lite is-danger">
  Danger
</button>

<button class="lin-button is-lite" disabled>
  Disabled
</button>

Card

<div class="lin-card">
  Card elevated
</div>

Card elevated

<div class="lin-card is-flat">
  Card flat
</div>

Card flat

Code

<div class="lin-code">
  <pre>
    Code snippet
  </pre>
</div>

Code snippet

<div class="lin-code is-terminal">
  Terminal command
</div>

Terminal command

Form and inputs

<form name="contact" method="POST">
  <p>
    <label class="lin-input-label">
      Name
      <input class="lin-input" type="text" name="name"/>
    </label>
  </p>
  <p>
    <label class="lin-input-label">
      Email
      <input class="lin-input" type="email" name="email"/>
    </label>
  </p>
  <p>
    <label class="lin-input-label">
      Role
      <select class="lin-input" name="role[]">
        <option value="leader">Leader</option>
        <option value="follower">Follower</option>
      </select>
    </label>
  </p>
  <p>
    <label class="lin-input-label" >
      Message
      <textarea class="lin-input" name="message">
      </textarea>
    </label>
  </p>
  <p>
    <label class="is-flex-center">
    <input type="checkbox" name="fine">
      That's fine
    </label>
  </p>
  <p>
    <label class="is-flex-center">
      <input type="radio" name="accept" value="yes" checked>
      Yes
    </label>
    <label class="is-flex-center">
      <input type="radio" name="accept" value="no">
      No
    </label>
  </p>
  <p>
    <button class="lin-button" type="submit">
    Send
    </button>
  </p>
</form>

Icon

<i class="lin-icon-facebook"></i>

<i class="lin-icon-twitter"></i>

<i class="lin-icon-linkedin"></i>

<i class="lin-icon-github"></i>

<i class="lin-icon-rss"></i>

<i class="lin-icon-dribbble"></i>

<i class="lin-icon-instagram"></i>

<i class="lin-icon-pinterest"></i>

<i class="lin-icon-flickr"></i>

<i class="lin-icon-youtube"></i>

<i class="lin-icon-telegram"></i>

<i class="lin-icon-googleplus"></i>

<i class="lin-icon-slack"></i>

<i class="lin-icon-keybase"></i>

<i class="lin-icon-npm"></i>

<i class="lin-icon-netlify"></i>

<i class="lin-icon-medium"></i>

<i class="lin-icon-vk"></i>

<i class="lin-icon-wechat"></i>

<i class="lin-icon-sinaweibo"></i>

<i class="lin-icon-tencentqq"></i>

<i class="lin-icon-quora"></i>

<i class="lin-icon-gitlab"></i>

<i class="lin-icon-bitbucket"></i>

<i class="lin-icon-whatsapp"></i>

<i class="lin-icon-viber"></i>

<i class="lin-icon-amazon"></i>

<i class="lin-icon-azure"></i>

<i class="lin-icon-devops"></i>

<i class="lin-icon-steam"></i>

<i class="lin-icon-twitch"></i>

<i class="lin-icon-discord"></i>

<i class="lin-icon-docker"></i>

<i class="lin-icon-messenger"></i>

<i class="lin-icon-skype"></i>

<i class="lin-icon-snapchat"></i>

<i class="lin-icon-behance"></i>

<i class="lin-icon-tiktok"></i>

<i class="lin-icon-applepay"></i>

<i class="lin-icon-googlepay"></i>

<i class="lin-icon-paypal"></i>

<i class="lin-icon-lincss"></i>

Image

<img class="lin-image" src="[path]">

<img class="lin-image is-round" src="[path]">

Message

<div class="lin-message">
  Notification message.
  <div class="lin-close"></div>
</div>

Notification message.

<div class="lin-message is-secondary">
  Secondary message.
  <div class="lin-close"></div>
</div>

Secondary message.

<div class="lin-message is-warning">
  Warning message.
  <div class="lin-close"></div>
</div>

Warning message.

<div class="lin-message is-danger">
  Error message.
  <div class="lin-close"></div>
</div>

Error message.

Tag

<div>
  <a class="lin-tag">One</a>
  <a class="lin-tag">Two</a>
  <a class="lin-tag is-secondary">Three</a>
  <a class="lin-tag is-warning">Four</a>
  <a class="lin-tag is-danger">Five</a>
  <a class="lin-tag is-disabled">Six</a>
</div>

One Two Three Four Five Six

A minimalist CSS framework