The default component parsing styles of different browsers for web pages are inconsistent, and they are not beautiful enough. It takes a lot of time to develop web page styles. Today, I will introduce an elegant CSS framework.
About Pico.css
Pico.css is a simple and lightweight CSS UI framework. The biggest feature is that the styles are all based on the original HMTL tag names and built-in attributes. Less or even no classes are used to define styles. The written code has clear semantics and strong maintainability. , which can help developers build their own UI systems, and can also be used directly in quick and small projects.
As of the date of publication, Pico.css has 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 as much as possible to define styles, and the entire framework uses less than 10 class names
- Pure CSS implementation. All components are implemented by a 10KB (compressed) CSS file, no package management, no dependencies and external files, not even javascript code
- Responsive layout. Built-in responsive grid system, beautiful and consistent layout on devices with different screen sizes such as PC/mobile phone/tablet
- Support dark theme. Comes with two beautiful color themes, one-click activation according to user preferences
Get started
The easiest and most direct way to import Pico.css is to directly import a style file after downloading:
Of course, it can also be installed via npm:
Then you can write the html code.
To make an input box and submit a form, you often need code like this:
With Pico.css, just:
Pico.css has built-in many basic components, including common form controls, tables, pop-up windows, navigation menus, cards, etc. The code is very simple. For example, to achieve a beautiful progress bar, you only need this code:
Pico.css has built-in light and dark themes. The usage is very simple. Add the attribute data-theme to the parent element.
There are also many code examples on the official website, such as writing a beautiful and atmospheric login interface. The html code is very simple, as if returning to the era of just beginning to learn html syntax.
Through the source code of the CSS file, you can see that the style selectors are mostly hit by the HTML element tag name, built-in attributes and custom attributes, which avoids the conventional "naming hell" that only uses class to distinguish. It is a kind of Very good web programming ideas.
For developers who have the ultimate pursuit of pure HTML, Pico.css also provides a classless version, this version does not have a single class, and completely uses element tag names and attributes to write web pages.
Reasons to use Pico.css
The use of Pico.css in the project comes from a quick marketing page requirement. It needs to do a few simple pages with input interaction. It is obviously a bit cumbersome to use a huge framework like bootstrap . If you use the current popular ones, you can introduce them on demand The Vue UI component library of , and it is inevitable to use Vue.js for engineering. Just do a few simple pages, there is no need to use the standard configuration of medium and large projects, considering that most UI frameworks on the market are over-encapsulated, stacking a lot of class names with various semantics, not only will the page load slow down, And it will lead to a longer style calculation time, and finally found a Pico.css suitable for such a scenario.
CSS styles are written freely. There is currently a trend in front-end development. In order to create a beautiful interface, it takes a lot of time to write styles. In order to reuse styles, we rack our brains to name classes. There are even various classes on the Internet. Naming conventions, which may lead to a large number of styles being overwritten, many times the name of the class attribute, even more code than the style, is extremely difficult to maintain.
The emergence of Pico.css provides a new way of thinking for such a development situation, which can not only be used directly in actual projects, but also can be used as a basic style for building your own UI library.
Free Open Source Instructions
Pico.css is a free and open source project. The source code is hosted on Github based on the MIT open source license . Any individual or company can download and use it for free.
Original link: https://www.thosefree.com/pico-css