Pico.css • Minimal CSS Framework for semantic HTML-http://www.picocss.com

Let’s keep the webdesign gracefulandsimple!

With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.

Class-light and semantic

We use simple native HTML tags as much as possible. Less than 10 .classes are used in Pico.

Great styles with just CSS

No dependencies, package manager, external files, or JavaScript.

Responsive everything

Elegant and consistent adaptive spacings and typography on all devices.

Light or Dark mode

Shipped with two beautiful color themes, automatically enabled according to the user preference.

Examples

Minimalist templates to discover Pico in action.

Preview

A starter example with all elements and components used in Pico

Class-less

Just a pure semantic HTML markup, without .classes

Basic template

A basic custom template for Pico using only CSS custom properties (variables)

Company

A classic company or blog layout with a sidebar

Google Amp

A simple layout for Google Amp, with inlined CSS

A minimalist layout for Login pages

More Code, More Problems

A great design should be minimal, fast and maintainable.

Most popular CSS frameworks are bulky, overkill and hard to customize without hyper-overriding styles.Huge stackings of wrappers and CSS classes are unnecessary for semantics elements.Large and complex CSS file increase memory usage and cause longer style calculations.Basics HTML elements should not require packaging large amount of dependencies.

<form class="form form-modifier margin padding align">  <div class="input-wrapper input-wrapper-modifier margin padding">    <input type="text" class="input input-type-modifier input-style-modifier input-size-modifier">  </div>  <button type="submit" class="button button-style-modifier button-size-modifier action-trigger margin padding">    Action  </button></form>

<form>  <input type="text">  <button type="submit">Action</button></form>

Give us a Star on GitHub:

Pico.css • Minimal CSS Framework for semantic HTML

Web Name: Pico.css • Minimal CSS Framework for semantic HTML

WebSite: http://www.picocss.com

ID:364006

Keywords:

Description:

Minimal CSSFramework for semanticHTML