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.