Public Notes by reorx Tagged #css

An Interactive Guide to CSS Grid www.joshwcomeau.com

CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.

#css #grid #tutorial #learning #interactive #visualization

Rome Toolchain rome.tools

GitHub - KonghaYao/chinese-free-web-font-storage: 这是一个放置中文免费 web 字体的库，可以通过 css 载入。This is a library for placing Chinese free Web fonts, which can be loaded with CSS. github.com

cdn •
chinese •
css •
font •
hosting •
web

CSS Pro | A re-imagined Devtools for web design csspro.com

Easily make changes to any website's design and try your ideas in seconds with a visual editor that generates code for you. Say goodbye to coding and hello to speed, joy, and stunning designs in just a few clicks. #css #devtools #web #chrome #extension #design

chrome •
css •
design •
devtools •
extension •
web

vanilla-extract-css/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript github.com

Zero-runtime Stylesheets-in-TypeScript. Contribute to vanilla-extract-css/vanilla-extract development by creating an account on GitHub. #typescript #css #library #theming

css •
library •
theming •
typescript

Scrollbar scrollbar.app

Simple CSS scrollbar editor. #css #scrollbar #code #generator

code •
css •
generator •
scrollbar

nostalgic-css/NES.css: NES-style CSS Framework | ファミコン風CSSフレームワーク github.com

css •
nes •
pixel •
retro •
ui

An Interactive Guide to Flexbox in CSS www.joshwcomeau.com

css •
flex •
flexbox •
guide •
interactive •
tutorial

ChartsCSS/charts.css: Open source CSS framework for data visualization. github.com

Open source CSS framework for data visualization. Contribute to ChartsCSS/charts.css development by creating an account on GitHub. #css #chart #framework #library

chart •
css •
framework •
library

milesmcc/a17t: An atomic design toolkit for pragmatists github.com

An atomic design toolkit for pragmatists. Contribute to milesmcc/a17t development by creating an account on GitHub. #css #ui #framework #tailwind #atomic

atomic •
css •
framework •
tailwind •
ui

themesberg/flowbite: The most popular library of interactive UI components built with Tailwind CSS github.com

css •
library •
tailwind •
ui

Website themes and skins — UserStyles.world userstyles.world

A new free and open-source, community-driven, modern alternative to userstyles.org. #userscript #css #style #sharing #community

community •
css •
sharing •
style •
userscript

Defensive CSS defensivecss.dev

Practical CSS and design tips that helps in building future-proof user interfaces. #css #tips #learning #ui #snippet

css •
learning •
snippet •
tips •
ui

lukeed/clsx: A tiny (228B) utility for constructing `className` strings conditionally. github.com

A tiny (228B) utility for constructing `className` strings conditionally. - lukeed/clsx: A tiny (228B) utility for constructing `className` strings conditionally. #react #jsx #css #class-name #library

class-name •
css •
jsx •
library •
react

CSS Scan - The fastest and easiest way to check, copy and edit CSS getcssscan.com

copy •
css •
inspection

marijnh/style-mod github.com

Contribute to marijnh/style-mod development by creating an account on GitHub. #css-in-js #javascript #library #css

jenil/chota: A micro (3kb) CSS framework github.com

A micro (3kb) CSS framework. Contribute to jenil/chota development by creating an account on GitHub. #css #framework

css •
framework

Code Guide by @mdo codeguide.co

css •
html •
styleguide

Cuberto/mouse-follower: A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website. github.com

css •
cursor •
javascript •
mouse

unocss/unocss: The instant on-demand atomic CSS engine. github.com

atomic •
css •
framework •
utility

mcntsh/use-utility-classes: A hook for making classNames more reactive github.com

markmead/hyperui: Free open source Tailwind CSS components 🐳 github.com

component •
css •
tailwind •
ui

ben-rogerson/twin.macro: 🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time. github.com

css •
react •
styled •
tailwind

VisBug visbug.web.app

Tab & Shift + Tab traverse laterally Enter & Shift + Enter traverse lineage #chrome #extension #css #html #debugging #web

chrome •
css •
debugging •
extension •
html •
web

sindresorhus/modern-normalize: 🐒 Normalize browsers' default style github.com

🐒 Normalize browsers' default style. Contribute to sindresorhus/modern-normalize development by creating an account on GitHub. #css #normalize #reset #pub

css •
normalize •
pub •
reset