Graceful & Minimal CSS Design System In Pure Semantic HTML | Pico.css

Stylish styles for all original HTML elements without automatically enabling categories and dark mode. Pico.css is a simple, responsive, and reader-focused semantic design system implemented in pure CSS.

Features:

  • The dark and light mode depends on the preferred color scheme.
  • Highly customizable with CSS / SCSS.
  • 12-column grid system.
  • Most used components: accordion, card, navigation, tooltip.
  • Easy to expand with your CSS.

How to make use of it:

1. Download the package and insert them pico.min.css into the doc.

<!-- 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;

Minimal Clean CSS Design System, HTML and CSS design and build websites, pico CSS design Plugin/Github


See Demo And Download

Official Website(picocss): Click Here

This superior jQuery/javascript plugin is developed by picocss. For extra Advanced Usages, please go to the official website.

Related Posts

Animated-Calendar-UI-Design

Animated Calendar UI Design Using HTML CSS JavaScript

Calendar UI design with dark mode and animations using HTML CSS JavaScript. An elegant, animated, and lightweight (or bold) calendar user interface design implemented in HTML, JS,…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

WYSIWYG-Editor-SunEditor

A Lightweight and Customizable WYSIWYG Editor In Pure JavaScript | SunEditor

WYSIWYG HTML editor based on pure JavaScript, suneditor is a lightweight, versatile, customizable, pure JavaScript WYSIWYG textual content(text) editor in your web functions. Key Features:  Paste from…

disable-background-scrolling-when-popup-modal-is-open

Vue.js Directive To Lock Body Scroll Without Breaking Scroll

v-scroll-lock is a Vue.js directive to lock body scrolling (for iOS mobile and tablet, Android and Safari/Chrome/Firefox for desktop) without breaking the scrolling of the target element….

adjust-text-to-background-js

Jquery Plugin To Adjusting Text Color To Background Color

Adjust-Text-To-Background.js is a jQuery plugin to set the text color to the background color. If the background color is brighter, the script will change the text color…