glu.cssdeprecated

glu.css was depreacted.

Usage no npm install needed!

<script type="module">
  import gluCss from 'https://cdn.skypack.dev/glu.css';
</script>

README

GLU

GLU - Generic Lightweight Functional CSS utilities

npm license

Using an expressive approach to writing functional utility classes that are easy to write and understand.

The utilities do not impose any ui-specific styles or ui-components, so you're free to architect your code in the way that you want.

Source: https://github.com/adsric/glu

Principles

GLU has principles for developing flexible, accessible, and long-term maintainability of HTML and CSS.

  • Code to Standard.
  • Everything should be 100% responsive.
  • Everything should be Semantic (classes for meaning, not for show).
  • Everything should be as performant as possible.
  • Doing one thing extremely well promotes reusability and reduces repetition.
  • CSS is global. HTML is not. Send the smallest amount of code to the user as possible.

CSS

  • !important to define overriding rules, not for fixups.
  • Use shorthands to create a “blank slate”. Use longhands for targetted modifying only.
  • Provide fallbacks / use @supports.

Relativity

  • Media queries, adapt to screen size use: em.
  • Block sizing, use: %.
  • Viewport sizing, use viewport units: vw, vh, vmin, vmax.
  • Font sizing, height use: rems.
  • Combinng the above use: flex, min-width, max-width, etc.

Features

  • Progressive enhancement in mind.
  • Mobile-first styles.
  • Single-purpose class structure.
  • No Side Effects, things behave exactly as expected with design-agnostic semantic naming.
  • Unassuming, styles that don’t dictate what things should look like.
  • Infinitely nestable responsive grid system with flex.

Quick Start

The quickest and easiest way to start using glu is to include a reference to the file in the head of your html file.

CDN

<link rel="stylesheet" href="https://npmcdn.com/glu.css/glu.css">

NPM

npm install --save glu.css

Download

git clone https://github.com/adsric/glu.git
cd glu
npm install

Browser Support

  • Edge
  • Firefox 28+
  • Google Chrome (latest)
  • Internet Explorer 11+
  • Opera (latest)
  • Safari 6.1+