About the Pico. CSS
Pico. CSS is a simple and lightweight CSS UI framework, the biggest characteristic is that the style is based on HMTL original tag name and built-in attributes, less use or even do not use class to define the style, written code semantic clear, maintainability is strong, can help developers build their own UI system. It can also be used directly in quick, small projects.
As of the Posting date, pico. CSS has a whopping 3898 stars on Github.
Features of the Pico.CSS framework
- De-class and native semantic code. Pico.css uses the tag names of native HTML elements to define styles whenever possible, and the entire framework uses fewer than 10 class names
- Pure CSS implementation. All components are implemented in a 10KB (compressed) CSS file, with no package management, dependencies, external files, and not even javascript code
- Responsive layout. Built-in responsive grid system, layout in PC/mobile/tablet devices with different screen sizes, beautiful and consistent
- Support dark themes. It comes with two beautiful color themes, enabled with one click according to user preference
Development to fit
The easiest and most direct way to introduce pico.css is to download it and import a style file:
It can also be installed via NPM:
Then you can write the HTML code.
To make an input field and submit a form, you often need code like this:
With pico.css, you just need:
Pico. CSS has a lot of basic components built in, including common form controls, tables, pop-ups, navigation menus, cards, etc. The code is very simple, for example, to achieve a beautiful progress bar, just this code:
Pico. CSS has two built-in themes, light and dark. It is easy to use them by adding data-theme attributes to parent elements.
There are many code examples, such as creating a beautiful login interface. The HTML code is very simple, as if you were just learning HTML syntax.
Through the source of THE CSS file, you can see that the style selector is mostly hit by the HTML element tag name, built-in attributes and custom attributes, so as to avoid the conventional only use class to distinguish the “naming hell”, is a very good web programming ideas.
For developers looking for the ultimate in pure HTML, Pico.css also offers a classless version, which uses element tag names and attributes to write web pages without a single class.
Reasons for using pico.css
The use of Pico. CSS in the project came from the need for a quick marketing page, which required a few simple pages with input interaction. Using a framework as large as Bootstrap was obviously a bit cumbersome. It is unavoidable to use vue.js to engineering. Just do a few simple page, there is no need to use large standard of the project, considering the current on the market most of the UI framework are excessive packaging, stacked a lot contains various semantic class name, not only can let a slow page load, and can lead to more style of long computing time, finally found out the suitable for this scene Pico. CSS.
CSS style writing is very free, there is a trend in front-end development, in order to do beautiful interface, need to spend a lot of time to write style, in order to reuse the style, rack their brains to name the class, and even there are various class naming conventions on the Internet, which may lead to a large number of styles covered, Many times the name of the class attribute, even more than the style code, is extremely difficult to maintain.
The emergence of pico.CSS provides a new way of thinking about such development, not only can be directly used in actual projects, but also can be used as the basis for building their own UI libraries.
Free and Open Source instructions
Pico. CSS is a free and open source project. The source code is hosted on Github under the MIT Open Source license and can be downloaded and used by any individual or company for free.
Related website: www.thosefree.com/pico-css