Pico CSS is a framework that gives you a great look in site with minimal or no classes. It feels like what writing HTML should be instead of the convoluted mess of classes, containers, etc.
Index
=====
00:00 Intro
00:19 Pico vs Bootstrap
01:38 Simplest Accordions in Pico
01:51 Button Options vs Tailwind CSS
02:19 Minimal Class Layouts
03:00 Customizing the Framework
03:15 Demo with GitHub Repo
Pico.CSS Demo
=============
Pico CSS is a framework that gives you a great look in sight with minimal or no classes. It feels like what writing HTML should be instead of the convoluted mess of classes, containers, etc.
To show you how cool it is, just look at the difference between Pico and another popular framework, Bootstrap. Let's compare how you'd build some navigation with these two frameworks.
In Bootstrap, you create a NAV with a class of NAV bar. Now in there you add a number of other classes to control the colors. You'd also add a container, and then if you want a brand, you add it to an anchor tag with a class of navbar-brand.
Then you can create a button for the toggle that collapses the navigation and makes it into a hamburger menu. Finally, the content that goes in the navigation goes in another Div with a class of collapse and NAV bar collapse.
And then you start creating a list of navigation items. Each navigation item has to have a NAV item as well as a NAV link. That seems pretty complicated for just a navigation. Let's take a look at how Pico handles navigation. Create a navigation, use the NAV tag and then you create two lists of items.
The first list is the brand. It simply gets a list item, and if you want to, you can make it both by using the strong tag and then the other list is just a list of anchor Tags with links to the different pages.
You can see what the navigation looks like right here. If you want something with a logo in it, you would just create an additional list item with an SVG in it. You can see that by inspecting the navigation for the website.
Another notoriously difficult component is the accordion. With Pico, all we have to do is create a details tag with some content in it. In Bootstrap, Accordions are one of the toughest things to do properly because you have to include all types of classes, IDs and even data attributes.
Elements like buttons are just as simple. The basic button looks great without any classes, and if you need a button to be an inline element, you just add a roll of button.
There's also a couple of classes that you can use to create a secondary and a contrast style, and then you can create an outline by using the Outline variant. Contrast that with how you do buttons in something like Telling CSS, which makes you add an insane amount of classes for even something as simple as a basic button.
If you add a figure as a wrapper container, you can make any content scroll horizontally. There is also a classless version of the framework, and in that case you use the header name and footer Tags and they'll act as a container to define a centered viewport.
For that, you're going to need to load a slightly different version of the framework. You can redefine some of the CSS variables, and that way you can customize any of the variables that come with the framework. There's also a SAS version of the library where you can customize the variables and create a customized version of Pico.
Links
====
Pico: picocss.com
Follow Me
=======
Blog: raybo.org
LinkedIn: / planetoftheweb
Twitter: / planetoftheweb
Негізгі бет Say Goodbye to CSS Classes Web Designers with Pico CSS
Пікірлер: 34