pico
Water.css
pico | Water.css | |
---|---|---|
67 | 34 | |
12,629 | 8,222 | |
2.0% | - | |
9.1 | 0.0 | |
2 days ago | 4 months ago | |
CSS | CSS | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
pico
-
List of awesome CSS frameworks, libraries and software
picocss/pico - Minimal CSS Framework for semantic HTML
- Show HN: Pico: An open-source Ngrok alternative built for production traffic
-
How to use Tailwind with any CSS framework
Tailwind is great, but creating everything from scratch is annoying. A nice base of components which can be extended with tailwind would be great. There are a few tailwind frameworks like Flowbite, Daisy Ui, but I like Bulma, PicoCSS and Bootstrap.
-
Concrete.css
Modern CSS stylesheets include configurability via CSS variables on the root element so maybe that's where the "framework" comes from.
Also note: This project looks like an even more minimized version of PicoCSS [1]
[1] https://picocss.com/
-
Show HN: A template for Markdown-based sites (no static site generator required)
The templates grabs Markdown file data with XMLHttpRequest and converts it to HTML with https://showdownjs.com/ . Classless styles are done with https://picocss.com/ and code block syntax highlighting is done with https://highlightjs.org/ .
GitHub repo: https://github.com/dandalpiaz/markdown-pages
-
HTML Web Components: An Example
This is exactly why I love HTMX [1] in combination with PicoCSS[2]. HTMX is just the regular html elements with ajax extensions built into the tags (it is a js library currently but they plan on lobbying to have these as default functionalities with HTML in the future) and picoCSS also works without classes so you are "trained" to use the semantic tags for the page to be rendered beautifully
[1] https://htmx.org/
[2] https://picocss.com/
-
Crafting A Minimalist Portfolio Website with SvelteKit and Pico CSS
/*! * Minimal theme switcher * * Pico.css - https://picocss.com * Copyright 2019-2023 - Licensed under MIT */ /** * Minimal theme switcher * * @namespace * @typedef {Object} ThemeSwitcher * @property {string} _scheme - The current color scheme ("auto", "light", or "dark"). * @property {string} menuTarget - The selector for the menu element that contains theme switchers. * @property {string} buttonsTarget - The selector for theme switcher buttons. * @property {string} buttonAttribute - The attribute name used for theme switcher buttons. * @property {string} rootAttribute - The attribute name used for the root HTML element to store the selected theme. * @property {string} localStorageKey - The key used to store the preferred color scheme in local storage. */ export const ThemeSwitcher = { // Config _scheme: 'auto', menuTarget: "details[role='list']", buttonsTarget: 'a[data-theme-switcher]', buttonAttribute: 'data-theme-switcher', rootAttribute: 'data-theme', localStorageKey: 'picoPreferredColorScheme', /** * Initialize the theme switcher. * * @function * @memberof ThemeSwitcher */ init() { this.scheme = this.schemeFromLocalStorage || this.preferredColorScheme; this.initSwitchers(); }, /** * Get the color scheme from local storage or use the preferred color scheme. * * @function * @memberof ThemeSwitcher * @returns {string|null} The color scheme ("light", "dark", or null). */ get schemeFromLocalStorage() { if (typeof window.localStorage !== 'undefined') { if (window.localStorage.getItem(this.localStorageKey) !== null) { return window.localStorage.getItem(this.localStorageKey); } } return this._scheme; }, /** * Get the preferred color scheme based on user preferences. * * @function * @memberof ThemeSwitcher * @returns {string} The preferred color scheme ("light" or "dark"). */ get preferredColorScheme() { return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; }, /** * Initialize the theme switcher buttons and their click events. * * @function * @memberof ThemeSwitcher */ initSwitchers() { const buttons = document.querySelectorAll(this.buttonsTarget); buttons.forEach((button) => { button.addEventListener( 'click', (event) => { event.preventDefault(); // Set scheme this.scheme = button.getAttribute(this.buttonAttribute) || 'auto'; // Close dropdown document.querySelector(this.menuTarget)?.removeAttribute('open'); }, false ); }); }, /** * Set the selected color scheme and update the UI. * * @function * @memberof ThemeSwitcher * @param {string} scheme - The color scheme to set ("auto", "light", or "dark"). */ set scheme(scheme) { if (scheme == 'auto') { this.preferredColorScheme == 'dark' ? (this._scheme = 'dark') : (this._scheme = 'light'); } else if (scheme == 'dark' || scheme == 'light') { this._scheme = scheme; } this.applyScheme(); this.schemeToLocalStorage(); }, /** * Get the current color scheme. * * @function * @memberof ThemeSwitcher * @returns {string} The current color scheme ("auto", "light", or "dark"). */ get scheme() { return this._scheme; }, /** * Apply the selected color scheme to the HTML root element. * * @function * @memberof ThemeSwitcher */ applyScheme() { document.querySelector('html')?.setAttribute(this.rootAttribute, this.scheme); }, /** * Store the selected color scheme in local storage. * * @function * @memberof ThemeSwitcher */ schemeToLocalStorage() { if (typeof window.localStorage !== 'undefined') { window.localStorage.setItem(this.localStorageKey, this.scheme); } } };
-
The What, Why and How of JavaScript bundlers
To understand the core problem, let's consider a very simple traditional web app, with HTML, CSS and a script tag injecting an index.js which acts as the entry point for JavaScript. To add some styling we're also injecting some external UI library like Pico CSS via a CDN and linking the same.
-
A More Modern CSS Reset
This is excellent if bare bones. It's meant for "the clean slate" style of CSS development. To be honest, I do less and less of starting from zero.
Another style is a more built up starting point like PicoCSS. https://picocss.com/
Both have their place and their use cases.
-
Why everybody speaks only about Tailwind, what happened to Boo0strap?
I personally prefer Bootstrap to Tailwind, but my favorite is https://picocss.com/
Usually, I just want decent-looking default CSS styles. The benefits of a CSS framework have diminishing returns when using frameworks with styles scoped to components (like SvelteKit/Vue/React).
The fact Tailwind removes all styles so you can't even tell a button is a button unless you add classes is annoying. If you know the class names, sometimes it's a little more convenient to add Tailwind classes, but for the most part it just clutters the HTML. And it makes it difficult to update entire "classes" of elements: you have to update each element one at a time.
Water.css
-
List of awesome CSS frameworks, libraries and software
kognise/water.css - A drop-in collection of CSS styles to make simple websites just a little nicer
-
Where Is Noether's Principle in Machine Learning?
Thank you!
In the beginning, I used kognise'z water.css [1], so most of the smart decisions (background/text color, margins, line spacing I think) probably come from there. Since then it's been some amount of little adjustments. The font is by Jean François Porchez, called Le Monde Livre Classic [2].
I draft in Obsidian [3] and build the site with a couple python scripts and KaTeX.
[1] https://watercss.kognise.dev/
[2] https://typofonderie.com/fr/fonts/le-monde-livre-classic
[3] https://obsidian.md/
-
Ask HN: Experience Starting a Blog
Thank you!
I must give credit to Kognise though, the style is simply their formidable water.css layout. It saved me a lot of time and anguish when I was about to get my blog started.
https://watercss.kognise.dev/
- CSS for readability
-
No CSS Club – because no JavaScript was not hardcore enough
https://watercss.kognise.dev/ I would argue classless css is the way to go, you just include a single css file, then write your html without touching any css anymore, all related tags in html are inherently css-ed for you. a nice trade off for me sometimes.
- Filenames and Pathnames in Shell: How to Do It Correctly
-
Classless.css – Less Classes. Less Overhead
Like the previous submitter ( https://news.ycombinator.com/item?id=30885700 April 2022 ) I found clasless.css while investigating semantic html-oriented css libraries and this one stood out to me as having a good balance. I'm not ideologically opposed to using classes, but using them for every bit of styling seems off and I'd rather see good default styles for regular semantically structured html. For example, classless.css uses the "card" class for cards which don't have a clear analog in among standard html tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Other libraries:
Water.css: https://watercss.kognise.dev/
MVP.css: https://andybrewer.github.io/mvp/
Missing.css: https://missing.style/
-
Ur Go-To on UI with Flask?
WaterCSS, very basic but good-looking UI in my opinion
- О заметках в markdown файлах
-
Looks great on my machine
Slap this on it and you're good: https://github.com/kognise/water.css/
What are some alternatives?
Tailwind CSS - A utility-first CSS framework for rapid UI development.
classless-css - A list of classless CSS themes/frameworks with screenshots
Alpine.js - A rugged, minimal framework for composing JavaScript behavior in your markup.
Rust Language Server - Repository for the Rust Language Server (aka RLS)
unocss - The instant on-demand atomic CSS engine.
reagent - A minimalistic ClojureScript interface to React.js
Grav - Modern, Crazy Fast, Ridiculously Easy and Amazingly Powerful Flat-File CMS powered by PHP, Markdown, Twig, and Symfony
hyperscript - Create HyperText with JavaScript.
htmx - </> htmx - high power tools for HTML
prism-themes - A wider selection of Prism themes
astro - The web framework for content-driven websites. ⭐️ Star to support our work!
sakura - :cherry_blossom: a minimal css framework/theme.