Minimal Clean CSS Design System – Pico.css

Category: CSS & CSS3 , Frameworks , Recommended | July 18, 2021
0 Comment
Demo Download
Author: picocss
Views Total: 42 views
Official Page: Go to website
Last Update: July 18, 2021
License: MIT

Preview:

Minimal Clean CSS Design System – Pico.css

Description:

Pico.css is a minimal, responsive, semantic, reader-centric design system implemented in pure CSS.

Features:

  • Dark & Light mode based on prefers-color-scheme.
  • Highly customizable with CSS/SCSS.
  • 12-column based grid system.
  • Most commonly used components: Accordion, Card, Nav, Tooltip.
  • Easy to extend using your own CSS.

How to use it:

1. Download the package and insert the pico.min.css into the document.

<!-- All in one -->
<link rel="stylesheet" href="css/pico.min.css" />
<!-- Class-less version -->
<link rel="stylesheet" href="css/pico.classless.min.css" />
<!-- Fluid Class-less version -->
<link rel="stylesheet" href="css/pico.fluid.classless.min.css" />
<!-- Slim build -->
<link rel="stylesheet" href="css/pico.slim.min.css" />

2. Customize the Pico.css.

// _variables.scss

// Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: false !default;

// Enable .container and .container-fluid
$enable-class-container: true !default;

// Enable a centered viewport
// Fluid layout if disabled
$enable-viewport: true !default;

// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings if disabled
$enable-responsive-spacings: true !default;

// Enable responsive typography
// Fixed base font if disabled
$enable-responsive-typography: true !default;

// Enable .classes
// .classless version if disabled
$enable-classes: true !default;

// Enable validation states for <input>
$enable-input-states: true !default;

// Enable transitions for <a>, <button>, <input>
$enable-transitions: true !default;

// Spacings
// ––––––––––––––––––––

// Gutters and horizontals margins
// For <body>, .grid, <nav>, <table>
$spacing-gutter: 1rem !default;

// Blocks verticals margins and paddings
// For <header>, <main>, <footer>, <section>, <article>
// This value is proportionally multiplied according breakpoints for great responsive spacings
$spacing-block: 2rem !default;

// Vertical margins for Typography and Form elements
// This value is proportionally multiplied according breakpoints for great responsive spacings
$spacing-typography: 1.5rem !default;

// Padding for <input> and <button>
$spacing-input-button: .75rem 1rem !default;

// Typography
// ––––––––––––––––––––

// Sans serif native font stack
$sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji" !default;

// Monospace native font stack
$monospace: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !default;

$line-height: 1.5 !default;
$text-weight: 400 !default;
$heading-weight: 700 !default;

// Blocks
// ––––––––––––––––––––

// For <form> elements, <button>, <article>, <details> inlined code, tooltips
$round: .25rem !default;

// Transitions
// ––––––––––––––––––––

// For <a>, <form> elements and <button>
$transition: .2s ease-in-out !default;

// Responsive
// ––––––––––––––––––––

// xs: Extra small (portrait phones)
// sm: Small(landscape phones)
// md: Medium(tablets)
// lg: Large(desktops)
// xl: Extra large (large desktops)

// NOTE:
// To provide an easy and fine styling on each breakpoint
// we didn't use @each, @mixin or @include.
// That means you need to edit each CSS selector file to add a breakpoint
// You can disable any viewports, base-font and spacing-factor with 'null'

// Breakpoints
// 'null' disable the breakpoint
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;

// Viewports
$viewports: (
// 'null' disable the viewport on a breakpoint
sm: 510px,
md: 700px,
lg: 920px,
xl: 1130px
) !default;

// Base font for .rem
// 'null' disable the base font on a breakpoint
// 'xs' should not be 'null'
$base-font: (
xs: 16px,
sm: 17px,
md: 18px,
lg: 19px,
xl: 20px
) !default;

// Multiplication factor for spacings
// 'null' disable spacing factor on a breakpoint
$spacing-factor: (
xs: 1,
sm: 1.25,
md: 1.5,
lg: 1.75,
xl: 2
) !default;

Previews:

Pico.css Dark Theme

Pico.css Dark Theme

Pico.css Accordion

Pico.css Accordion

Pico.css Card

Pico.css Card

Pico.css Nav

Pico.css Nav

Pico.css Tooltip

Pico.css Tooltip

Changelog:

v1.3.2 (07/18/2021)

  • NEW: Loading indicator with aria-busy=”true”
  • /scss code and /docs reorganization with an utilities category
  • Disable prefers-reduced-motion: reduce for aria-busy=”true”
  • Disable progress:indeterminate animation if prefers-reduced-motion: reduce is enabled
  • Define font-size for <small>, <td>, <sub>, and <sup> with em unit
  • Define sizes for type=”checkbox”, type=”radio”, and role=”switch” with em unit
  • Add –form-element-disabled-opacity CSS var
  • Delete ‘Variations’ category in README.md

Clean and Fixes

v1.3.1 (07/10/2021)

  • Bugfixes and improvements

v1.3.0 (07/04/2021)

  • CSS Vars refactoring for more customization
  • Bugfixes
  • Improvements

v1.2.1 (10/28/2020)

  • Inputs: Set validation states with aria-invalid
  • Small fixes

v1.2.0 (10/01/2020)

  • Move SCSS vars for styles to CSS vars
  • Add <progress>
  • Add tooltip animation

v1.1.0 (09/14/2020)

  • Clean and polish code and docs
  • Consistent table borders in dark-mode
  • Smaller list spacing
  • Refactoring for Checkboxes and Radio buttons
  • New form elements: type=date, type=datetime-local, type=month, type=time, type=week, type=range, type=search
  • CSS icons color dynamisation
  • Bigger Checkboxes and Radio buttons
  • Styles reordering for a better slim version
  • Better alignement for checkboxes & radios
  • Optional use of !important in variables
  • Add Bootstrap grid system and Form elements examples

v1.0.6 (09/12/2020)

  • Sanitize.css integration
  • Better color management for CSS icons (select, input.valid, input.invalid, details)
  • Better heading spacings after a typography block

v1.0.5 (08/08/2020)

  • Fix .contrast link inside <nav>
  • Helper <small> for <select> and <textarea>
  • Better rollover for a.contrast

See Also:

You Might Be Interested In:

Leave a Reply