Styli

Styles for most commonly used web components.

Download Documentation GitHub


Overview

Mobile-first responsive design with rem and em units. Built on top of normalize.css (removed < IE 11 fixes). Styles for Grid, Forms, Buttons, Navs, Navbar, Typography, Tables, Helpers, are available.

Stylus

Source code is written in Stylus. Stylus and Sass are equally good in terms of features but I like Stylus syntax as it is more flexible, clean and JavaScript like.

Browser Support

  • Internet Explorer 11+
  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Opera (latest)

Get Started

Include the following code in <head> tag of your HTML file.

<link rel="stylesheet" href="https://cdn.rawgit.com/styli/styli/v0.1.0/css/styli.min.css">

HTML template

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <meta name="description" content="">

    <!-- Styli CSS -->
    <link rel="stylesheet" href="https://cdn.rawgit.com/styli/styli/v0.1.0/css/styli.min.css">
  </head>
  <body>
    <!--[if lt IE 11]>
      <div class="bg-error bg-dark size-large">You are using a <strong>shitty</strong> browser. Please <a target="_blank" href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div>
    <![endif]-->

    <!-- Add your site or application content here -->
    <h1>Hello, world!</h1>
  </body>
</html>