The flexible base CSS

An accessible, robust, and versatile base stylesheet

oli.css is an accessible no-class stylesheet built with modern CSS. It allows you to create beautiful websites without writing any CSS.

How it works

All you have to do is include oli.css in your website. It contains rules for most elements in HTML and makes the boring default styles in your browser look nice. If you still don't like how certain parts look, you can use our extensive API to customize it to your needs and preferences.

Check out the demos.

Examples

Here are some examples of how the same website can look very differently simply by changig properties provided by our API

Features

no classes or data- attributes
100% HTML only

highly configurably CSS-API

:root {
  --oli-s-magic: true; /** Make opinionated design decisions based on the markup */
  --oli-s-layout: horizontal; /** Page layout */
  --oli-s-scroll-behavior: smooth; /** Always auto if prefers-reduced-motion is active  */
  --oli-s-font-stack: transitional; /** Based on modernfontstacks.com */
  --oli-s-page-max-width: 80rem; /** Maximum width of the page */
  --oli-s-page-width: 100%; /** Page width */
  --oli-s-page-start-column-width: 16rem; /** Width of the start column */
  …
}

uses modern CSS and cuts the mustard at Cascade Layers

Getting started

To use oli.css you have two options.

Download

Download the .zip file and embed it in your pages.

<link rel="stylesheet" href="oli/index.css">

or import it in one of your layers.

@import url('third-party/oli/index.css') layer(third-party);