Minimal snippets for modern CSS layouts and components. With visible, tweakable examples.
JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy.
Maybe you can include a few lines of utility code, or a mixin, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.
This site is fully copied from youmightnotneedjquery.com, an excellent resource for vanilla JavaScript created by @adamfschwartz and @zackbloom. But this time, we take a look at the power of modern native HTML and CSS as well as some of the syntactic sugar of Sass. Because, you might not need scripts for that task at all!
Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project. 26,000 icons and counting.
How to use a few CSS tricks to implement light mode/dark mode on a website.
An article that teaches how to add CSS animations to hyperlinks.
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
Github: https://github.com/IanLunn/Hover
Maybe I can use this for links?
A simple, aesthetic tabletop dice rolling simulator featuring d4, d6, d8, d10, d12, d20 and d100! Use offline or host it yourself!
You can also use it online: https://bkis.github.io/dice-or-die/
You can also select a combination of dice to roll (such as 1d4 and 2d6 and 3d20) and the app will roll them and total them up for you.
Or use mine: https://amoebatron.virtadpt.net/
A small but highly customisable site template, ideal for a project documentation homepage.
Might be addable to my website's theme.
A nice, retro-looking dashboard for organizing your environments. Instant local search, keyboard shortcuts, themable, customizable. YAML config file. Icons can be customized as well. Theoretically small enough to carry around on your mobile device. Uses yarn to install dependencies and compile. Themes can be switched out in realtime.
Reminds me a bit of GEOS or Workbench.
Serve with any web server; the Docker container uses nginx, but use whatever.
Hey! I'm @rstacruz and this is a modest collection of cheatsheets I've written.
A lightweight CSS framework for personal sites.
Somebody's user.css file for a Shaarli instance.
pup is a command line tool for processing HTML. It reads from stdin, prints to stdout, and allows the user to filter parts of the page using CSS selectors.
Inspired by jq, pup aims to be a fast and flexible way of exploring HTML from the terminal.
Use this starter kit to create a viable, good looking, production-ready website whose entire size does not exceed 2 KB compressed when opened in a browser. Ideally, the total size of all assets (HTML, CSS, favicon, etc.) downloaded by the browser when opening the page will be under 2 KB. You need npm and gulp installed to assemble it, but once you have it everything you need will be in the dist/ subdirectory.
A data visualization framework written in CSS. Uses the semantic HTML5 tags to identify data to process, the data goes inside the HTML markup in the form of tables. No Javascript is needed to pull data out of APIs for processing (unless you want to roll that way, I guess). The core CSS file can be downloaded and put to use more or less immediately.
Material design icon font and CSS framework for self hosting the icons.
Demo and visual directory of icons: https://marella.me/material-icons/demo/