GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → picocss → Pico

picocss / Pico

Licence: mit
Graceful & Minimal CSS design system in pure semantic HTML

Labels

csslightweightdark-themecss-frameworkminimalsemantic

Projects that are alternatives of or similar to Pico

koochak
A minimal & lightweight CSS framework
Stars: ✭ 15 (-83.15%)
Mutual labels:  lightweight, minimal, css-framework
rofi-collection
Beautiful collection of Rofi themes
Stars: ✭ 236 (+165.17%)
Mutual labels:  minimal, dark-theme
tiny-framework
A light wight easy to use RESTful apis framework for education & demo purposes. stripped down framework to the fundamental components that that every one would essentially need to (learn / make a demo application).
Stars: ✭ 13 (-85.39%)
Mutual labels:  lightweight, minimal
Siimple
The minimal CSS toolkit for flat and clean designs
Stars: ✭ 502 (+464.04%)
Mutual labels:  css-framework, minimal
siimple
The minimal and themeable CSS toolkit for flat and clean designs
Stars: ✭ 525 (+489.89%)
Mutual labels:  minimal, css-framework
beercss
Build material design interfaces in record time... without stress for devs... 🍺💛
Stars: ✭ 223 (+150.56%)
Mutual labels:  lightweight, css-framework
Beedle
A tiny library inspired by Redux & Vuex to help you manage state in your JavaScript apps
Stars: ✭ 329 (+269.66%)
Mutual labels:  lightweight, minimal
Halfmoon
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.
Stars: ✭ 2,583 (+2802.25%)
Mutual labels:  dark-theme, css-framework
Water.css
A drop-in collection of CSS styles to make simple websites just a little nicer
Stars: ✭ 6,666 (+7389.89%)
Mutual labels:  css-framework, minimal
Legacycss
Legacy CSS - Modern and Lightweight CSS Framework
Stars: ✭ 48 (-46.07%)
Mutual labels:  css-framework, lightweight
Amp Spectre
⚡ AMP Spectre CSS Framework
Stars: ✭ 49 (-44.94%)
Mutual labels:  css-framework, lightweight
minstyle.io
👌 A simple CSS Framework, including dark mode.
Stars: ✭ 58 (-34.83%)
Mutual labels:  dark-theme, css-framework
Kernel.css
The CSS framework built for any kind of task
Stars: ✭ 80 (-10.11%)
Mutual labels:  css-framework, semantic
webgui
Web Technologies based Crossplatform GUI Framework with Dark theme
Stars: ✭ 81 (-8.99%)
Mutual labels:  lightweight, dark-theme
natick
natickOS - A minimal, lightweight, research Linux Distribution
Stars: ✭ 33 (-62.92%)
Mutual labels:  lightweight, minimal
notion.css
A minimal CSS framework that resembles the aesthetic of the note taking app Notion
Stars: ✭ 28 (-68.54%)
Mutual labels:  minimal, css-framework
Semantic Ui
Semantic is a UI component framework based around useful principles from natural language.
Stars: ✭ 49,729 (+55775.28%)
Mutual labels:  css-framework, semantic
Windows Auto Night Mode
Automatically switches between the dark and light theme of Windows 10 and Windows 11
Stars: ✭ 3,375 (+3692.13%)
Mutual labels:  dark-theme, lightweight
Domvm
DOM ViewModel - A thin, fast, dependency-free vdom view layer
Stars: ✭ 581 (+552.81%)
Mutual labels:  lightweight, minimal
Lemon
🍋 Minimal and responsive CSS framework for fast building websites.
Stars: ✭ 51 (-42.7%)
Mutual labels:  css-framework, minimal
View All Similar Projects ➔

Pico.css

Graceful & Minimal CSS design system in pure semantic HTML.
Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

Examples · Documentation

Pico.css

CSS Gzipped Github release npm version License

  • Class-light and semantic: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.

  • Great styles with just one CSS file: No dependencies, package manager, external files or JavaScript.

  • Responsive everything: Elegant and consistent adaptatives spacings and typography on all devices.

  • Light or Dark mode: Shipped with two beautiful color themes, automatically enabled according to the user preference.

Usage

There are 3 ways to get started with pico.css:

Install manually

Download Pico and link /css/pico.min.css in the <head> of your website.

<link rel="stylesheet" href="css/pico.min.css">

Install from CDN

Alternatively, you can use the unpkg CDN to link pico.css.

<link rel="stylesheet" href="https://unpkg.com/@picocss/[email protected]/css/pico.min.css">

Install with NPM

npm install @picocss/pico

Examples

Minimalist templates to discover Pico in action:

Examples

  • 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

  • Sign in
    A minimalist layout for Login pages

  • Bootstrap grid system
    Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico

All examples are open-sourced in picocss/examples.

Documentation

Getting started

Layout

Elements

Components

Variations

Variation Minified CSS Source Example
Default CSS Gzipped pico.scss Preview
Classless
(Centered viewports)		 CSS Gzipped pico.classless.scss Classless
Classless
(Fluid container)		 CSS Gzipped pico.fluid.classless.scss -
Slim CSS Gzipped pico.slim.scss -
Google Amp CSS Gzipped pico.google-amp.scss Google Amp
Pico + Bootstrap grid system CSS Gzipped pico-bootstrap-grid.scss Bootstrap grid system

Contributing

  • dev/ branch is open to pull requests.
  • Do not edit /css files directly. Those files are automatically generated. You should edit the source files in scss/.

Copyright and license

Licensed under the MIT License.

Openly inspired by: Bootstrap, CSS Bed, Normalize, Sanitize, Spectre, Wing.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].