13 ms·

Pico CSS Framework

413 points by brianzelip 5y ago

maskros 5y ago
I really do not like this design. The text is a really hard to read low contrast blue-gray text on a blue-gray background. The flat design has zero UI affordances. I can't tell the difference between a highlight, a button, and a text field. I would never have guessed that the rectangle with a rectangle in it is a color picker.
- Layke1123 5y ago
  It's pretty self explanatory when you click on it. Or are you saying at a visual glance you should know it's a color picker? Do you have an example of how you would do it?
- 9935c101ab17a66 5y ago
  I personally feel like the contrast is fine, but the light mode does fail the lighthouse contrast accessibility check, so you may have a point there. I disagree with your other complaints though. Buttons are pretty obvious based on context clues and placement, as are highlights. Text fields also rely on context to communicate their function and furthermore more, they are labeled. As is the colour picker… I’m curious to see examples of an inline color picker you like, as well as how you generally expect forms to be styled. I looked for a few minutes through some UI libraries I like and basically all of them handle the color picker the same way.
  - maskros 5y ago
    It may be fine to you. It's still not fine to me. The other pickers have icons to indicate what they are (calendar and clock) so why not a color palette to provide a similar hint? Needing to read the context to figure out if it's a button or a text field does not help when quickly scanning the page. Figuring out the context and reading the labels is totally unnecessary extra work that a better design wouldn't require.
hbn 5y ago
Is "framework" really the right word for this? As far as I can tell it's just a stylesheet.
- echelon 5y ago
  Bootstrap, Bulma, etc. are CSS frameworks in that you have to use their opinionated HTML markup conventions for forms, grids, etc. They also attempt to cover the entire set of elements you might need in a website, such as jumbotron headers, profile images, news flashes, and more. The assortment is given attention to be a visually consistent design system.
nauticacom 5y ago
Frameworks like this are nice if a) you want your site to look exactly like every other site which uses this framework (rare) and b) every use of an element is for the exact same purpose (also rare). I suppose if you're throwing together some hacky admin page that 2 people are going to use in a year, it makes sense. Otherwise I don't see why you don't just design your site.
- justinator 5y ago
  I mean, yeah - sometimes you just gotta get some work done.
  - duxup 5y ago
    I’d say most of the time.
    - nauticacom 5y ago
      I don't know what kind of stuff you all work on, but for the kind of things I work on if the interface isn't specifically designed and laid out after doing user research on the problem space, the whole project is a no-go, and is certainly not "getting work done."
      - duxup 5y ago
        I don’t quite follow you.
- Ayesh 5y ago
  To be fair, bootstrap and other classful frameworks look pretty similar to each other too, unless a skillful designer creates their own theme, at which point you might as well do it with frameworks like Pico.
- sosborn 5y ago
  If you use a framework and it looks like a bunch of other sites that use the same framework, the framework isn't the reason that happened.
keyle 5y ago
I'm an old timer and I've built many sites. Laughed at bootstrap since day one, especially when it's on job ads. That said I tried to use pico and bulma in small personal project and it's handy to have a baseline. The problem is that you inevitably spend most of the time later override and fighting the said frameworks that helped you get going quickly. So I wonder, if you know CSS, are you really saving time?
- fermuch 5y ago
  Back in the internet explorer times bootstrap was invaluable. Even if you were very good at CSS you just needed a different set of rules for ie. You might be interested in tailwind. I'm unsure how to explain it, but it is a pleasure to use once you get used to it.
  - hamlsandwich 5y ago
    The key difference between tailwind and something like Pico is the semantics. Tailwind (AFAIK) totally divorces semantics and styles, so you as the dev have to apply everything. Pico aims to use as much of the HTML's semantics as possible, so you have to apply less yourself. Personally, I love the semantic value of a well-structured HTML document, but both approaches definitely have their advantages.
  - andrei_says_ 5y ago
    It brings a certain immediacy and malleability which feel very empowering and eliminates the cost of naming things. At the price of a verbose class soup everywhere. I can’t bear to look at the soup so I don’t use it much.
- 28uwedj 5y ago
  Yeah frameworks are terrible, But tailwind is amazing. once you get your config set up you chern out templates/designs. there is no fighting to override stuff either.
- andrei_says_ 5y ago
  If you apply inverted triangle css you apply general styles at first and then bring in more detail when needed. ITCSS makes you think and work with the cascade resulting in almost never reverting anything. Super efficient.
maxk42 5y ago
This is great! If you like small semantic CSS frameworks, you should take a look at mu: https://github.com/BafS/mu https://github.com/BafS/mu It's a complete base CSS framework in just over 1kb of code.
chrismorgan 5y ago
When this came up a couple of months ago, I wrote https://news.ycombinator.com/item?id=28860500 https://news.ycombinator.com/item?id=28860500: > Not fond of Pico.css’s weight, though: over 50KB, nowhere near as lightweight as the name suggests (even if it’s above-average compressible, 8KB gzipped—but I wouldn’t count even 8KB uncompressed as pico); in this case, if you flatten the variables and strip unused code, you’re left with under 4KB (~1.4KB gzipped). Lots of bloat from unused light mode support, things like form controls, and a fair bit of frivolous custom properties usage. This is the sort of place where I see the appeal of the likes of Tailwind, because they generate such huge amounts of CSS that you just about have to use an unused style remover. But it is another build step, and contrary to the deliberate intent here.
- deleted 5y ago
  [deleted]
- deleted 5y ago
  [deleted]
- oxalorg 5y ago
  I agree. That is why I actually just decided to use different css files for different themes in sakura.css (it comes in at 3.8k / ~1.8k gzipped) This also means that they can easily be used by others as well [1]. Have gotten some folks contribute their own themes over the years. I also had friends who didn't want to understand CSS, and adding in media queries, variables, and dark mode support would only just confuse them even more. [1]: https://github.com/oxalorg/sakura/tree/master/css https://github.com/oxalorg/sakura/tree/master/css
dikei 5y ago
Back when I was a web developer, I liked CSS pre-processor such as SASS/SCSS or LESS a lot. Popular framework at the times like Bootstrap or Foundation also had top-notch supports for CSS pre-propcessor. I wonder where they went.
- hamlsandwich 5y ago
  Bootstrap and Bulma are both based on SCSS still - it's as popular as it's ever been (though I still cling to my beloved classic SASS syntax, it's not very popular at all).
- BigJono 5y ago
  They're just not really needed now that their core features are provided by other parts of the stack. Variables are stable in CSS itself now, modularisation is done as part of DOM management with React etc, and composition is either done in code with JS or provided by something like CSS modules 'composes' property. You can still use a preprocessor like SASS with that stuff, but it's just another layer of complexity for not a whole lot of value outside of familiarity.
- genezeta 5y ago
  Looks like they are still in use. At least, this is SCSS based [0] according to the docs. Also, in another comment someone mentioned their own Sakura CSS and it's also SCSS based. [0] https://picocss.com/docs/#customization https://picocss.com/docs/#customization
mike_d 5y ago
I could see this being extremely useful for weekend projects where you just need to build a UI for something. Any recommendation for a lightweight and complementary JavaScript library? Validate forms, XHR wrapper, etc. without the bulk of jQuery.
- dotancohen 5y ago
  > Any recommendation for a lightweight and complementary JavaScript library? > Validate forms, XHR wrapper, etc. without the bulk of jQuery. Today, targeting modern web browsers? Vanilla Javascript, really. Since ES6 (2015) Vanilla Javascript has been very good. Form validation is free with HTML5, XHR is already wrapped with a one-line Promise API.
- themodelplumber 5y ago
  I used Zepto once for a weekend project without jQuery and it did what I needed very well. Though these days I would also check in with e.g. plain JS (way better support than when jQuery started) and projects like htmx at the other end of the "well but I need an app, but want to go light" direction. Seems there are some more ideas here: https://www.technotification.com/2019/06/5-lightweight-jquery-alternatives-2019.html https://www.technotification.com/2019/06/5-lightweight-jquer...
- azophy_2 5y ago
  vanilla javascript has improved a lot these years. however I've found that alpinejs is small & nice if you need better syntax for interactivity
- andrei_says_ 5y ago
  Stimulusjs, alpinejs.
- girvo 5y ago
  https://htmx.org/ https://htmx.org/ That does 90% of what I need when sprinkling backend AJAX-y interactivity on a straight HTML page with a backend that sends JSON or HTML back. https://htmx.org/examples/inline-validation/ https://htmx.org/examples/inline-validation/ For more jquery-esque fine-grained control for building custom elements/components on my pages I turn to: https://alpinejs.dev/ https://alpinejs.dev/ I love both of these libraries.
k__ 5y ago
Right now, I'm evaluating classless CSS frameworks for a project. Currently, Bamboo seems to make it, but I will checkout Pico!
- hyuuu 5y ago
  why not tailwind?
  - gondo 5y ago
    because tailwind is not "classless"
    - agumonkey 5y ago
      somehow tailwind sits in between, maybe it's nameless ?
      - k__ 5y ago
        Does it? I had the impression, if Tailwind has one thing, it's a multitude of classes.
        kingdomcome50 5y ago
        Yes Tailwind uses classes. But I think the parent might have meant that Tailwind is not semantic.
        agumonkey 5y ago
        From the few I know, the classes are mostly shortcuts to css features (container are one of the exception), which are of course defined as custom classes but they don't create a new layer of (name,meaning) unlike what I assume we were all doing.
    - k__ 5y ago
      This. It's just a bunch of code examples and text, so no fancy layout or styling is needed. I just want a modern look, without much hassle.
longsien 5y ago
Reminds me of a framework I made 6 years ago (http://barecss.com http://barecss.com). If this sort of thing comes back into trend I might go back and modernise it (https://github.com/longsien/BareCSS https://github.com/longsien/BareCSS).
sykoh 5y ago
The most valuable aspect of these frameworks I have found personally is using it in combination with Marked for blogs/docs. Markdown to blog frameworks usually come with too much restriction and configuration overhead to justify those restrictions in my opinion. These frameworks allow me to write about 20 lines of code using Marked to get a docs site up and running and throw in Pico/other css framework for the entirety of the styles. Clients generally will have at least one request that would leave me battling a full markdown render framework but these stylesheets allow for greenfield changes to both the css via classes (keeping a clear separation) and the functional logic as you don't have to hook into any framework logic.
leoncvlt 5y ago
On a similar vein, I'm a fan of water.css for small / quick projects: https://watercss.kognise.dev/ https://watercss.kognise.dev/
deleted 5y ago
[deleted]
ntoll 5y ago
This is a similar project (by a friend), that recreates the look and feel of the outstanding UK Government design system: https://gdcss.netlify.app/ https://gdcss.netlify.app/ Same idea and Pico (classless, simple, small etc).
- oceankid 5y ago
  Thanks for sharing. The UK Gov design system is a delight for my aging eyes.
- digitalsankhara 5y ago
  Both this and Pico are very inspiring. Looking through the gdcss docs was a lesson in itself - I was shown tags that I'd not previously known or thought about. Which is an admission that I tend to rely on (much to) large CSS frameworks to do their thing too much.
- dohliam 5y ago
  This is great! I've added it to this big list[0] of classless/minimal CSS frameworks (100+ frameworks) to make it easier to compare to other similar projects. For those interested in Pico (which is already on the list), you can preview it on some boilerplate HTML here[1] or use the Javascript bookmarklet[2] to preview how it would look on any arbitrary page, which can be helpful for prototyping a new site. [0]: https://github.com/dohliam/dropin-minimal-css https://github.com/dohliam/dropin-minimal-css [1]: https://dohliam.github.io/dropin-minimal-css/?pico https://dohliam.github.io/dropin-minimal-css/?pico [2]: https://github.com/dohliam/dropin-minimal-css#bookmarklet https://github.com/dohliam/dropin-minimal-css#bookmarklet
  - jxi 5y ago
    This is very cool! Maybe 2 feature requests, if you're taking them: - Have some popularity measure (github stars or otherwise) either in your list or hosted somewhere - Have screenshot previews of anything, hosted somewhere (would be a bit quicker to browse through the list).
  - thinkloop 5y ago
fifticon 5y ago
I wish more front-end stuff was oriented this way. This is how I want front-end coding to be: Rattle off what I need, semantically, and then by default it will be styled and presented in a sensible way. Then later, if our company stylist want our apps to look a particular kind of fancy, he can configure some styling that will apply to all. This is also why I hate Windows WPF so much: If you just add a label, a field, and two OK/Cancel buttons to a form, it will look horrendous by default. Only if you manually or deliberately set up some styling for it, will it start to look sensible. I want gui frameworks to look sensible out-of-the-box, without cluttering everything with piles of boilerplate crap.
- dotancohen 5y ago
  You might want to look into Qt for the native stuff. It's naturally cross-platform, but it also looks terrific too. It's got bindings for at least C++ and Python, it might have bindings for C# or wherever you're using WPF.
- disadvantage 5y ago
  > Only if you manually or deliberately set up some styling for it, will it start to look sensible I used to love those Javascript/jQuery widgets that attempted to create a whole new bespoke alternative to native form widgets, but I much prefer the OS to style them for me, since the JS (or even CSS) variants can break and look/feel borked on different devices. Inherited system UI FTW
- createunderrate 5y ago
  > Rattle off what I need, semantically, and then by default it will be styled and presented in a sensible way. Then later, if our company stylist want our apps to look a particular kind of fancy, he can configure some styling that will apply to all. You should check out Cascading Style Sheets. They let you write your document semantically in HTML, and then it is styled by a separate document created by the company stylist.
  - 9935c101ab17a66 5y ago
    Don’t know if the sarcasm was warranted, but you do make a valid point. The parent commenter does say they want something that “looks good” out of box, which I styled html does not.
loh 5y ago
Love the simplicity and minimalism! I'm a big believer in removing the bulk if possible. This does it very elegantly. Also, the demo does a great job of highlighting exactly how it works.
dotancohen 5y ago
This is very, very nice. Because it styles elements, not classes, it seems very similar to the reset.css files that were very popular once. Both those files and this project aim to set the default appearance of elements before they are explicitly styled.
thieu96 5y ago
On the surface this looks nice, until you start using 3rd party componentsand the defaults they assumed for the component are overwritten because the default is changed. It's no coincidence that we use classes to explicitly apply styles, I don't think this library is a good idea. It's the same issues as changing native prototypes in Javascript, stuff depends on the defaults to be exactly as specified. Explicit > Implicit Stuff magically working is great until you need to make an exception.
- s4i 5y ago
  You could namespace the Pico styles using SASS. Basically like [1] but you'd extend it to be e.g. .pico-enabled *:not(.piko-disabled) { @import "layout/document" @import "layout/sectioning" @import "layout/container" ... Then you can do this: <div class="piko-enabled"> ... <button>A button with Piko styling</button> <div class="piko-disabled"> <button>A vanilla browser button</button> ... and any 3rd party components/elements etc ... [1] https://github.com/picocss/pico/issues/31#issuecomment-913996475 https://github.com/picocss/pico/issues/31#issuecomment-91399...
otrahuevada 5y ago
I like this as a placeholder look and feel? Looks fairly pretty, lets me focus on building the thing, and is easy to throw away when actual themeing takes place later.
toastercat 5y ago
Check out https://www.cssbed.com/ https://www.cssbed.com/ for more classless CSS frameworks like this.
tshaddox 5y ago
This website lets you preview a ton of drop-in CSS frameworks, including Pico: https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/
pier25 5y ago
It looks nice, aesthetically speaking. It's ironic it declares itself to be semantic, but then tells you to use a link when you need an inline button. I'm guessing because, by default, their buttons are 100% width, which is a really weird default if you ask me. Also, there are no button or form element sizes? This is essential IMO for anything other than a simple login form.

413 points by brianzelip 5y ago

I really do not like this design. The text is a really hard to read low contrast blue-gray text on a blue-gray background. The flat design has zero UI affordances. I can't tell the difference between a highlight, a button, and a text field. I would never have guessed that the rectangle with a rectangle in it is a color picker.

Layke1123 5y ago
It's pretty self explanatory when you click on it. Or are you saying at a visual glance you should know it's a color picker? Do you have an example of how you would do it?
9935c101ab17a66 5y ago
I personally feel like the contrast is fine, but the light mode does fail the lighthouse contrast accessibility check, so you may have a point there. I disagree with your other complaints though. Buttons are pretty obvious based on context clues and placement, as are highlights. Text fields also rely on context to communicate their function and furthermore more, they are labeled. As is the colour picker… I’m curious to see examples of an inline color picker you like, as well as how you generally expect forms to be styled. I looked for a few minutes through some UI libraries I like and basically all of them handle the color picker the same way.
- maskros 5y ago
  It may be fine to you. It's still not fine to me. The other pickers have icons to indicate what they are (calendar and clock) so why not a color palette to provide a similar hint? Needing to read the context to figure out if it's a button or a text field does not help when quickly scanning the page. Figuring out the context and reading the labels is totally unnecessary extra work that a better design wouldn't require.

hbn 5y ago

Is "framework" really the right word for this? As far as I can tell it's just a stylesheet.

echelon 5y ago
Bootstrap, Bulma, etc. are CSS frameworks in that you have to use their opinionated HTML markup conventions for forms, grids, etc. They also attempt to cover the entire set of elements you might need in a website, such as jumbotron headers, profile images, news flashes, and more. The assortment is given attention to be a visually consistent design system.

nauticacom 5y ago

Frameworks like this are nice if a) you want your site to look exactly like every other site which uses this framework (rare) and b) every use of an element is for the exact same purpose (also rare). I suppose if you're throwing together some hacky admin page that 2 people are going to use in a year, it makes sense. Otherwise I don't see why you don't just design your site.

justinator 5y ago
I mean, yeah - sometimes you just gotta get some work done.
- duxup 5y ago
  I’d say most of the time.
  - nauticacom 5y ago
    I don't know what kind of stuff you all work on, but for the kind of things I work on if the interface isn't specifically designed and laid out after doing user research on the problem space, the whole project is a no-go, and is certainly not "getting work done."
    - duxup 5y ago
      I don’t quite follow you.
Ayesh 5y ago
To be fair, bootstrap and other classful frameworks look pretty similar to each other too, unless a skillful designer creates their own theme, at which point you might as well do it with frameworks like Pico.
sosborn 5y ago
If you use a framework and it looks like a bunch of other sites that use the same framework, the framework isn't the reason that happened.

keyle 5y ago

I'm an old timer and I've built many sites. Laughed at bootstrap since day one, especially when it's on job ads. That said I tried to use pico and bulma in small personal project and it's handy to have a baseline. The problem is that you inevitably spend most of the time later override and fighting the said frameworks that helped you get going quickly. So I wonder, if you know CSS, are you really saving time?

fermuch 5y ago
Back in the internet explorer times bootstrap was invaluable. Even if you were very good at CSS you just needed a different set of rules for ie. You might be interested in tailwind. I'm unsure how to explain it, but it is a pleasure to use once you get used to it.
- hamlsandwich 5y ago
  The key difference between tailwind and something like Pico is the semantics. Tailwind (AFAIK) totally divorces semantics and styles, so you as the dev have to apply everything. Pico aims to use as much of the HTML's semantics as possible, so you have to apply less yourself. Personally, I love the semantic value of a well-structured HTML document, but both approaches definitely have their advantages.
- andrei_says_ 5y ago
  It brings a certain immediacy and malleability which feel very empowering and eliminates the cost of naming things. At the price of a verbose class soup everywhere. I can’t bear to look at the soup so I don’t use it much.
28uwedj 5y ago
Yeah frameworks are terrible, But tailwind is amazing. once you get your config set up you chern out templates/designs. there is no fighting to override stuff either.
andrei_says_ 5y ago
If you apply inverted triangle css you apply general styles at first and then bring in more detail when needed. ITCSS makes you think and work with the cascade resulting in almost never reverting anything. Super efficient.

maxk42 5y ago

This is great! If you like small semantic CSS frameworks, you should take a look at mu: https://github.com/BafS/mu https://github.com/BafS/mu It's a complete base CSS framework in just over 1kb of code.

chrismorgan 5y ago

When this came up a couple of months ago, I wrote https://news.ycombinator.com/item?id=28860500 https://news.ycombinator.com/item?id=28860500: > Not fond of Pico.css’s weight, though: over 50KB, nowhere near as lightweight as the name suggests (even if it’s above-average compressible, 8KB gzipped—but I wouldn’t count even 8KB uncompressed as pico); in this case, if you flatten the variables and strip unused code, you’re left with under 4KB (~1.4KB gzipped). Lots of bloat from unused light mode support, things like form controls, and a fair bit of frivolous custom properties usage. This is the sort of place where I see the appeal of the likes of Tailwind, because they generate such huge amounts of CSS that you just about have to use an unused style remover. But it is another build step, and contrary to the deliberate intent here.

deleted 5y ago
[deleted]
deleted 5y ago
[deleted]
oxalorg 5y ago
I agree. That is why I actually just decided to use different css files for different themes in sakura.css (it comes in at 3.8k / ~1.8k gzipped) This also means that they can easily be used by others as well [1]. Have gotten some folks contribute their own themes over the years. I also had friends who didn't want to understand CSS, and adding in media queries, variables, and dark mode support would only just confuse them even more. [1]: https://github.com/oxalorg/sakura/tree/master/css https://github.com/oxalorg/sakura/tree/master/css

dikei 5y ago

Back when I was a web developer, I liked CSS pre-processor such as SASS/SCSS or LESS a lot. Popular framework at the times like Bootstrap or Foundation also had top-notch supports for CSS pre-propcessor. I wonder where they went.

hamlsandwich 5y ago
Bootstrap and Bulma are both based on SCSS still - it's as popular as it's ever been (though I still cling to my beloved classic SASS syntax, it's not very popular at all).
BigJono 5y ago
They're just not really needed now that their core features are provided by other parts of the stack. Variables are stable in CSS itself now, modularisation is done as part of DOM management with React etc, and composition is either done in code with JS or provided by something like CSS modules 'composes' property. You can still use a preprocessor like SASS with that stuff, but it's just another layer of complexity for not a whole lot of value outside of familiarity.
genezeta 5y ago
Looks like they are still in use. At least, this is SCSS based [0] according to the docs. Also, in another comment someone mentioned their own Sakura CSS and it's also SCSS based. [0] https://picocss.com/docs/#customization https://picocss.com/docs/#customization

mike_d 5y ago

I could see this being extremely useful for weekend projects where you just need to build a UI for something. Any recommendation for a lightweight and complementary JavaScript library? Validate forms, XHR wrapper, etc. without the bulk of jQuery.

dotancohen 5y ago
> Any recommendation for a lightweight and complementary JavaScript library? > Validate forms, XHR wrapper, etc. without the bulk of jQuery. Today, targeting modern web browsers? Vanilla Javascript, really. Since ES6 (2015) Vanilla Javascript has been very good. Form validation is free with HTML5, XHR is already wrapped with a one-line Promise API.
themodelplumber 5y ago
I used Zepto once for a weekend project without jQuery and it did what I needed very well. Though these days I would also check in with e.g. plain JS (way better support than when jQuery started) and projects like htmx at the other end of the "well but I need an app, but want to go light" direction. Seems there are some more ideas here: https://www.technotification.com/2019/06/5-lightweight-jquery-alternatives-2019.html https://www.technotification.com/2019/06/5-lightweight-jquer...
azophy_2 5y ago
vanilla javascript has improved a lot these years. however I've found that alpinejs is small & nice if you need better syntax for interactivity
andrei_says_ 5y ago
Stimulusjs, alpinejs.
girvo 5y ago
https://htmx.org/ https://htmx.org/ That does 90% of what I need when sprinkling backend AJAX-y interactivity on a straight HTML page with a backend that sends JSON or HTML back. https://htmx.org/examples/inline-validation/ https://htmx.org/examples/inline-validation/ For more jquery-esque fine-grained control for building custom elements/components on my pages I turn to: https://alpinejs.dev/ https://alpinejs.dev/ I love both of these libraries.

k__ 5y ago

Right now, I'm evaluating classless CSS frameworks for a project. Currently, Bamboo seems to make it, but I will checkout Pico!

hyuuu 5y ago
why not tailwind?
- gondo 5y ago
  because tailwind is not "classless"
  - agumonkey 5y ago
    somehow tailwind sits in between, maybe it's nameless ?
    - k__ 5y ago
      Does it? I had the impression, if Tailwind has one thing, it's a multitude of classes.
      - kingdomcome50 5y ago
        Yes Tailwind uses classes. But I think the parent might have meant that Tailwind is not semantic.
      - agumonkey 5y ago
        From the few I know, the classes are mostly shortcuts to css features (container are one of the exception), which are of course defined as custom classes but they don't create a new layer of (name,meaning) unlike what I assume we were all doing.
  - k__ 5y ago
    This. It's just a bunch of code examples and text, so no fancy layout or styling is needed. I just want a modern look, without much hassle.

longsien 5y ago

Reminds me of a framework I made 6 years ago (http://barecss.com http://barecss.com). If this sort of thing comes back into trend I might go back and modernise it (https://github.com/longsien/BareCSS https://github.com/longsien/BareCSS).

sykoh 5y ago

The most valuable aspect of these frameworks I have found personally is using it in combination with Marked for blogs/docs. Markdown to blog frameworks usually come with too much restriction and configuration overhead to justify those restrictions in my opinion. These frameworks allow me to write about 20 lines of code using Marked to get a docs site up and running and throw in Pico/other css framework for the entirety of the styles. Clients generally will have at least one request that would leave me battling a full markdown render framework but these stylesheets allow for greenfield changes to both the css via classes (keeping a clear separation) and the functional logic as you don't have to hook into any framework logic.

leoncvlt 5y ago

On a similar vein, I'm a fan of water.css for small / quick projects: https://watercss.kognise.dev/ https://watercss.kognise.dev/

deleted 5y ago

[deleted]

ntoll 5y ago

This is a similar project (by a friend), that recreates the look and feel of the outstanding UK Government design system: https://gdcss.netlify.app/ https://gdcss.netlify.app/ Same idea and Pico (classless, simple, small etc).

oceankid 5y ago
Thanks for sharing. The UK Gov design system is a delight for my aging eyes.
digitalsankhara 5y ago
Both this and Pico are very inspiring. Looking through the gdcss docs was a lesson in itself - I was shown tags that I'd not previously known or thought about. Which is an admission that I tend to rely on (much to) large CSS frameworks to do their thing too much.
dohliam 5y ago
This is great! I've added it to this big list[0] of classless/minimal CSS frameworks (100+ frameworks) to make it easier to compare to other similar projects. For those interested in Pico (which is already on the list), you can preview it on some boilerplate HTML here[1] or use the Javascript bookmarklet[2] to preview how it would look on any arbitrary page, which can be helpful for prototyping a new site. [0]: https://github.com/dohliam/dropin-minimal-css https://github.com/dohliam/dropin-minimal-css [1]: https://dohliam.github.io/dropin-minimal-css/?pico https://dohliam.github.io/dropin-minimal-css/?pico [2]: https://github.com/dohliam/dropin-minimal-css#bookmarklet https://github.com/dohliam/dropin-minimal-css#bookmarklet
- jxi 5y ago
  This is very cool! Maybe 2 feature requests, if you're taking them: - Have some popularity measure (github stars or otherwise) either in your list or hosted somewhere - Have screenshot previews of anything, hosted somewhere (would be a bit quicker to browse through the list).
- thinkloop 5y ago

fifticon 5y ago

I wish more front-end stuff was oriented this way. This is how I want front-end coding to be: Rattle off what I need, semantically, and then by default it will be styled and presented in a sensible way. Then later, if our company stylist want our apps to look a particular kind of fancy, he can configure some styling that will apply to all. This is also why I hate Windows WPF so much: If you just add a label, a field, and two OK/Cancel buttons to a form, it will look horrendous by default. Only if you manually or deliberately set up some styling for it, will it start to look sensible. I want gui frameworks to look sensible out-of-the-box, without cluttering everything with piles of boilerplate crap.

dotancohen 5y ago
You might want to look into Qt for the native stuff. It's naturally cross-platform, but it also looks terrific too. It's got bindings for at least C++ and Python, it might have bindings for C# or wherever you're using WPF.
disadvantage 5y ago
> Only if you manually or deliberately set up some styling for it, will it start to look sensible I used to love those Javascript/jQuery widgets that attempted to create a whole new bespoke alternative to native form widgets, but I much prefer the OS to style them for me, since the JS (or even CSS) variants can break and look/feel borked on different devices. Inherited system UI FTW
createunderrate 5y ago
> Rattle off what I need, semantically, and then by default it will be styled and presented in a sensible way. Then later, if our company stylist want our apps to look a particular kind of fancy, he can configure some styling that will apply to all. You should check out Cascading Style Sheets. They let you write your document semantically in HTML, and then it is styled by a separate document created by the company stylist.
- 9935c101ab17a66 5y ago
  Don’t know if the sarcasm was warranted, but you do make a valid point. The parent commenter does say they want something that “looks good” out of box, which I styled html does not.

loh 5y ago

Love the simplicity and minimalism! I'm a big believer in removing the bulk if possible. This does it very elegantly. Also, the demo does a great job of highlighting exactly how it works.

dotancohen 5y ago

This is very, very nice. Because it styles elements, not classes, it seems very similar to the reset.css files that were very popular once. Both those files and this project aim to set the default appearance of elements before they are explicitly styled.

thieu96 5y ago

On the surface this looks nice, until you start using 3rd party componentsand the defaults they assumed for the component are overwritten because the default is changed. It's no coincidence that we use classes to explicitly apply styles, I don't think this library is a good idea. It's the same issues as changing native prototypes in Javascript, stuff depends on the defaults to be exactly as specified. Explicit > Implicit Stuff magically working is great until you need to make an exception.

s4i 5y ago
You could namespace the Pico styles using SASS. Basically like [1] but you'd extend it to be e.g. .pico-enabled *:not(.piko-disabled) { @import "layout/document" @import "layout/sectioning" @import "layout/container" ... Then you can do this: <div class="piko-enabled"> ... <button>A button with Piko styling</button> <div class="piko-disabled"> <button>A vanilla browser button</button> ... and any 3rd party components/elements etc ... [1] https://github.com/picocss/pico/issues/31#issuecomment-913996475 https://github.com/picocss/pico/issues/31#issuecomment-91399...

otrahuevada 5y ago

I like this as a placeholder look and feel? Looks fairly pretty, lets me focus on building the thing, and is easy to throw away when actual themeing takes place later.

toastercat 5y ago

Check out https://www.cssbed.com/ https://www.cssbed.com/ for more classless CSS frameworks like this.

tshaddox 5y ago

This website lets you preview a ton of drop-in CSS frameworks, including Pico: https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/

pier25 5y ago

It looks nice, aesthetically speaking. It's ironic it declares itself to be semantic, but then tells you to use a link when you need an inline button. I'm guessing because, by default, their buttons are 100% width, which is a really weird default if you ask me. Also, there are no button or form element sizes? This is essential IMO for anything other than a simple login form.