README
GLU
GLU - Generic Lightweight Functional CSS utilities
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+