Author: | picocss |
---|---|
Views Total: | 221 views |
Official Page: | Go to website |
Last Update: | April 22, 2023 |
License: | MIT |
Preview:

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 Accordion

Pico.css Card

Pico.css Nav

Pico.css Tooltip
Changelog:
v1.5.10 (04/22/2023)
- Updated
v1.5.9 (04/09/2023)
- Updated
v1.5.8 (04/08/2023)
- Bugfixes
v1.5.7 (01/28/2023)
- Support for .grid + small in forms
- Bugfixes
v1.5.6 (10/04/2022)
- Add Dropdown component
- Add Breadcrumb component
- Improvements
- Bugfixes
v1.4.4 (01/03/2022)
- Allow role=button to any HTML element
- Bugfixes
v1.4.0 (10/25/2021)
- Update
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