#picocss — Public Fediverse posts

I'm using the pattern from this MDN example to provide visual feedback for HTML form validation with just CSS. This works just fine in Gecko (Firefox / Zen) and Codepen.io but does not work the same in Blink (Vivaldi / Chromium).

I have no idea what I'm doing so would love any help, here's the code snippet, which also show the pico.css include.

Edit: fixed typo and wanted to add that I'm getting very close to unleashing my total nonsense acoustic-coding Go project. I'm excited to share my fumblings and stumblings to make something just for giggles! I hope I can nerd-snipe some experts in to giving me some guidance on what I should do differently. Basically, I'll be asking for more help soon, so thanks in advance!

#HTML  #CSS #Gecko #Firefox #Zen #Blink #Vivaldi #Chromium #PicoCSS #GoLang #AcousticCoding

I'm using the pattern from this MDN example to provide visual feedback for HTML form validation with just CSS. This works just fine in Gecko (Firefox / Zen) and Codepen.io but does not work the same in Blink (Vivaldi / Chromium).

I have no idea what I'm doing so would love any help, here's the code snippet, which also show the pico.css include.

Edit: fixed typo and wanted to add that I'm getting very close to unleashing my total nonsense acoustic-coding Go project. I'm excited to share my fumblings and stumblings to make something just for giggles! I hope I can nerd-snipe some experts in to giving me some guidance on what I should do differently. Basically, I'll be asking for more help soon, so thanks in advance!

#HTML  #CSS #Gecko #Firefox #Zen #Blink #Vivaldi #Chromium #PicoCSS #GoLang #AcousticCoding

Still using ✨Pico.css?

Check out our community-driven successor: https://github.com/anyblades/pico

Modern CSS, Sass-free, opt-in Float Labels, and more.

#css #picocss #blades ✨🥷

𝗣𝗶𝗰𝗼 𝗖𝗦𝗦:

#CSS #Framework #Picocss

https://thewhale.cc/posts/pico-css

Minimal CSS Framework for semantic HTML. Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

@sknob @lminiero thank you for describing your journey to your new website 👍 It was fun to read 😃
What a performance boost, your work really paid off!

I've picked #PicoCSS as a lightweight frontend framework, so i didn't have to start from the ground up and still keep a small footprint. They have light/dark mode support. Maybe useful for the next incarnation of your website?

Are you looking for a lightweight CSS framework with #a11y and semantics in mind? Check out #picocss which brings you simple beautiful styling without adding tons of wrappers or utility classes to your markup.
https://picocss.com

Are you looking for a lightweight CSS framework with #a11y and semantics in mind? Check out #picocss which brings you simple beautiful styling without adding tons of wrappers or utility classes to your markup.
https://picocss.com

Are you looking for a lightweight CSS framework with #a11y and semantics in mind? Check out #picocss which brings you simple beautiful styling without adding tons of wrappers or utility classes to your markup. picocss.com

Pico CSS • Minimal CSS Framewo...

🎉 Wow, a "framework" so minimal it practically does nothing! 👏 Just slap on Pico #CSS, and behold: your HTML tags are magically... styled? 🔮✨ With fewer than 10 classes, it's like CSS for those who fear commitment. 🤷‍♂️ But hey, at least it’s not another bloated CSS framework, right? 🐘💨
https://picocss.com #minimalist #PicoCSS #noCommitment #lightweightFramework #webDesign #HackerNews #ngated

🎉 Wow, a "framework" so minimal it practically does nothing! 👏 Just slap on Pico #CSS, and behold: your HTML tags are magically... styled? 🔮✨ With fewer than 10 classes, it's like CSS for those who fear commitment. 🤷‍♂️ But hey, at least it’s not another bloated CSS framework, right? 🐘💨
https://picocss.com #minimalist #PicoCSS #noCommitment #lightweightFramework #webDesign #HackerNews #ngated

Pico CSS • Minimal CSS Framework for Semantic HTML

https://picocss.com

#HackerNews #PicoCSS #Minimalism #SemanticHTML #CSSFramework #WebDesign

Pico CSS • Minimal CSS Framework for Semantic HTML

https://picocss.com

#HackerNews #PicoCSS #Minimalism #SemanticHTML #CSSFramework #WebDesign

La web tiene cero JavaScript, ni cookies, ni tracking. Se podría quitar #picocss y dejar sólo el CSS que une quiera meterle, pero a mí el estilo de Pico me gusta y deja una web adaptada a móviles fetén.

Por otro lado, Hugo genera el RSS, un sitemap y se puede extender y complicar hasta donde te dé la paciencia y las ganas.

Y con el contenido mínimo que tiene da un 100% en la página de análisis de Google 🤘

La web tiene cero JavaScript, ni cookies, ni tracking. Se podría quitar #picocss y dejar sólo el CSS que une quiera meterle, pero a mí el estilo de Pico me gusta y deja una web adaptada a móviles fetén.

Por otro lado, Hugo genera el RSS, un sitemap y se puede extender y complicar hasta donde te dé la paciencia y las ganas.

Y con el contenido mínimo que tiene da un 100% en la página de análisis de Google 🤘

I built a tool + recipe that help to generate custom themes for #picocss @picocss 👉 https://github.com/lebouquetin/picocss-theme-generator

Here is the new #11ty website I made. I found writing a new website and template from scratch to be simple with #Picocss, and it does have quite a few features for being a simple site.

Hope there are some other folks out there who find this useful in starting their new #staticsite journey as well. It only took me about two years to finally make my own template with #eleventy. This was a fun little side project.

Demo: https://journa11ty.pages.dev/

Repo: https://github.com/cjerrington/journa11ty

Here is the new #11ty website I made. I found writing a new website and template from scratch to be simple with #Picocss, and it does have quite a few features for being a simple site.

Hope there are some other folks out there who find this useful in starting their new #staticsite journey as well. It only took me about two years to finally make my own template with #eleventy. This was a fun little side project.

Demo: https://journa11ty.pages.dev/

Repo: https://github.com/cjerrington/journa11ty

Le #buildinpublic #algoo de la semaine 39/2024 👉 https://www.algoo.fr/fr/actualites/article/le-build-in-public-algoo-de-la-semaine-39-2024

On y parle notamment de #tracim #galae, documentation, appels d'offres et minimalisme #css avec #picocss

We're working on a website re-design. Made some decisions today. Will be simplifying the design concept to cards representing each of the website sections and then a search that eliminates cards that do not match the search.

This allowed us to remove the bulky menus that the previous version of the website had and simplify the primary use of the website, which is to quickly find information.

Will be using #PicoCSS, #Lapis #Lua and #HTMX

• https://picocss.com/
• https://leafo.net/lapis/
• https://www.lua.org/
• https://htmx.org/

#webdev

We're working on a website re-design. Made some decisions today. Will be simplifying the design concept to cards representing each of the website sections and then a search that eliminates cards that do not match the search.

This allowed us to remove the bulky menus that the previous version of the website had and simplify the primary use of the website, which is to quickly find information.

Will be using #PicoCSS, #Lapis #Lua and #HTMX

• https://picocss.com/
• https://leafo.net/lapis/
• https://www.lua.org/
• https://htmx.org/

#webdev

@[email protected] I also use Pico in my Pelican blog https://www.paulox.net/ and on Python Pescara static website https://pescara.python.it/

#pelican #blog #picocss #static #website

@miclgael I also use Pico in my Pelican blog https://www.paulox.net/ and on Python Pescara static website https://pescara.python.it/

#pelican #blog #picocss #static #website

Pico CSS v2 has been released! 🎉

A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. ✨

https://picocss.com/docs/v2

#Pico #PicoCSS #CSS #HTML #Semantic #Web

Pico CSS v2 has been released! 🎉

A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. ✨

https://picocss.com/docs/v2

#Pico #PicoCSS #CSS #HTML #Semantic #Web

I've been using the web since 1995, and I still struggle with web UIs and CSS.

Currently I primarily use Simple.css and Pico.css.

The problem is that I need a little more pre-made elements than even Pico.css gives me.

I know people tout Tailwinds.

How should I ground myself in making good web apps. I want to make something like this todo example in tailwinds... but it seems like a big investment to learn/use tailwinds?

https://tailwindflex.com/@kofi-osei/todo-list-in-tailwlind

#webdev #css #picocss #tailwinds

I've been using the web since 1995, and I still struggle with web UIs and CSS.

Currently I primarily use Simple.css and Pico.css.

The problem is that I need a little more pre-made elements than even Pico.css gives me.

I know people tout Tailwinds.

How should I ground myself in making good web apps. I want to make something like this todo example in tailwinds... but it seems like a big investment to learn/use tailwinds?

https://tailwindflex.com/@kofi-osei/todo-list-in-tailwlind

#webdev #css #picocss #tailwinds

Le make:crud de Symfony, c'est bien pratique, mais ce n'est pas super joli ni dynamique 😫
Dans cette vidéo (41min), découvrez quelques astuces pour booster un admin avec l'utilisation de #Symfony Turbo (et un peu de #picoCSS).
Le tout avec des petits chatons 🐈

https://www.youtube.com/watch?v=qDIqD4z_ZPw

#Picocss is better because you can still be a web artisan.

#Picocss se uno si sbatte poi le risposte le trova (da solo) 😂

:root {
--spacing: 0;
}

https://github.com/picocss/pico/discussions/390#discussioncomment-6518656

#CSS

#Picocss non è malaccio dai, forse ci sono un po' di margin/padding da ridurre ma questo è il default

Allora, su #desktop si vede bene, #minimalista come piace a me, mentre su #mobile un po' meno (comunque #Picocss mi sta piacendo)

Qualcuno usa #Picocss ?

https://laravista.altervista.org/UI/catlink/

#UI #catlink

Pretty in Pink - working on my #Mastodon #VueJs #StarterKit. I got pretty far tonight. The concept here isn’t to have a full fledged app, just enough to have some fun and tinker.

Some cleanup to do, but all (and a little bit more) of the features I wanted to include are there.

#PicoCss is handling the styling well. Don’t have to think much about it.

From my point of view it is clever that #picocss uses <details> for nav dropdowns. Would be interesting to hear what the #a11y experts think about this? 🤔 (And not sure why dir=rtl is used in the examples)
Demo: https://picocss.com/examples/company/
Docs: https://picocss.com/docs/dropdowns.html

Mhh... I would love to take the #bootscore theme and use it with #picocss instead of bootstrap. Bootscore is based on underscores https://underscores.me, but it seems that the bootscore devs put in some extra (awesome) work into their fork. 🤔 #WordPress

Just discovered the amazing Pico CSS library! It's lightweight, customizable, and perfect for streamlining my web development process. A must-try for all CSS enthusiasts out there #CSS #PicoCSS #webdevelopment

https://picocss.com/

i got a crud app working

- #rust + axum
- #picoCSS (no css, just html)
- #htmx (no javascript, just html)
- #postgres + sqlx

all extra files (.html, .css, .sql, etc.) are statically linked into the binary, so no need for docker

i’m satisfied with how little accidental complexity there is. some rust awkwardness, but not much