pico
Grav
Our great sponsors
pico | Grav | |
---|---|---|
64 | 83 | |
11,969 | 14,258 | |
6.8% | 0.5% | |
9.3 | 8.6 | |
15 days ago | 7 days ago | |
CSS | PHP | |
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
-
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]
-
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
-
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); } } };
-
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.
-
Modern CSS Framework or Library for Static Websites?
Do you want to customize it or get something that looks decent out of the box? Consider something like Pico.css which is just a stylesheet that can even be used classless. It just styles the native HTML elements in a nice way and nothing more.
-
Getting started with Pico CSS
According to its homepage, Pico is a minimal CSS framework for semantic HTML. Pico styles the built-in HTML elements so that when you’re building a small app, you don’t need to write a lot of custom CSS.
Here, Pico CSS comes into the picture. In some ways, it is the anti-Tailwind library. Pico CSS discourages using a large number of .classes in your application. Instead, it styles the semantic HTML elements in such a way that you don’t need to write a lot of code yourself.
-
how to choose a tech stack for a personal project
For styling you could try daisyUI on top of tailwind or you could use something like https://picocss.com
-
Ask HN: How do I make a website in 2023?
I still write basic HTML, styled using any of a number of simple classless CSS templates, like Pico.
Grav
- Soupault: A static website management tool
- Grav is a modern open-source flat-file CMS
-
It Took Me a Decade to Find the Perfect Personal Website Stack – Ghost+Fathom
I took a more traditional approach, focusing on something that's "good enough", which in my case was a cheap VPS and an install of Grav: https://getgrav.org/
Some optional customization for page templates/fonts/CSS, some CI so I can build and deploy it inside of a Docker container, Matomo for analytics that respect privacy (which I already use elsewhere) and some additional web server configuration to hide anything interesting behind an additional login and I'm good. Maybe backups and uptime monitoring if I'm feeling brave, which is what most sites should also have (so copy + paste there).
All of that for under 100 euros per year (could also pay half of that if I didn't host anything else on the server), the blog has actually survived getting on the front page of HN once or twice and requires relatively little maintenance, at least a bit less than a proper install of WordPress, due to its larger surface area.
The best thing is that it's simple enough for me to understand how it works, to be able to move it anywhere as needed and use more or less plain Markdown for writing the blog posts. Here's a quick example of a recent post: https://blog.kronis.dev/articles/ever-wanted-to-read-thousan...
Now all that's left is to find motivation to write more, but at least 90% of my time doesn't go into tinkering with custom fancy solutions, no matter how much I'd love that. Then again, nothing wrong with the alternatives either: 400 euros might be perfectly worth it for some, whereas working with static site generators or even custom CMSes would be a fun experience for others!
-
Gravity - A new, open source DNS/DHCP server with Adblocking and inbuilt config replication
Also, there is a CMS called Grav. Both Gravity and Grav use a very similar (but not identical) font for their logo.
-
How to create a nice looking website for your game that is reasonably low effort and cost
As an alternative to a static site with Hugo you can use grav for dynamic sites. Can't use it with GitHub pages, of course, but it does allow you to add searches and such to your site, while still writing your content in markdown files.
-
Advice for a complete beginner who's learning how to create a novel hosting site
If not, then it's grav cms which is more than enough for you.
- Ask HN: Simplest CMS for blog type website
- Using PHP Forms to Update HTML Website
- Ask HN: What's on Your Home Server?
-
best php-based cms/tech choice
Another area of CMS Systems are Flat File System based CMS which I did last time not hear a lot around but there was a lot of noice in the past from Kirby CMS and Grav CMS. Instead of a database they store all there data inside files and I mostly saw more for simpler website build with it where not specific security releated user context based content where used.
What are some alternatives?
Pico - Pico is a stupidly simple, blazing fast, flat file CMS.
october - Self-hosted CMS platform based on the Laravel PHP Framework.
Bolt - Bolt is a simple CMS written in PHP. It is based on Silex and Symfony components, uses Twig and either SQLite, MySQL or PostgreSQL.
Bludit - Simple, Fast, Secure, Flat-File CMS
Strapi - 🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable and developer-first.
GetSimple CMS - GetSimple CMS
Tailwind CSS - A utility-first CSS framework for rapid UI development.
Kirby - Kirby's core application folder
eleventy 🕚⚡️ - A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
ProcessWire - ProcessWire 3.x is a friendly and powerful open source CMS with a strong API.
WordPress - WordPress, Git-ified. This repository is just a mirror of the WordPress subversion repository. Please do not send pull requests. Submit pull requests to https://github.com/WordPress/wordpress-develop and patches to https://core.trac.wordpress.org/ instead.
Hugo - The world’s fastest framework for building websites.