174 lines (119 loc) · 5.85 KB

Tools for the programming language CSS with respect to graphics

Foraging/Inspiration

CSSMania*🔌, CSS-Tricks*

CSS/HTML themes/templates:
Free CSS*, HTML5 UP!,

General Visual Effects

Toptal's CSS3Maker☁

Framework-free Non-CSS-Reset UI Libraries

Blaze UI, modern-normalize, Normalize.css, Reseter.css, Shoelace

CSS Frameworks

Blocks:
blocks.css, paper.css, wickedblocks*

Minimalism:
chota (GitHub), Water.css

Classless:
classless-css list💩, Almond.css, CSS Bed, Simple.css (GitHub)

Specific Elements

Bootstrap 4 Cheat Sheet*, codrops' CSS Reference*

Blobs:
MagicPattern's Blob Generator☁

Triangles:
10015's CSS Triangle Generator☁

Clip path:
10015's CSS Clip Path Generator☁

Cubic bezier:
10015's Cubic Bezier Generator☁

Responsive Design

Centering:
How to Center in CSS*

Loader element:
10015's CSS Loader Generator☁

Responsive grids:
ungrid (GitHub)

Responsive grid generator:
CSS Grid Generator☁ (GitHub), Interactive CSS Grid Generator☁ (GitHub)

Colors

Color filters:
filters.css (GitHub)

Dark mode:
Night Eye's Dark CSS Generator☁

Gradients:
10015's CSS Gradient Generator☁ CSS Gradient*

Gradients with hover effects:
Colorion's Gradient Buttons*

Supporting Elements - Animations

Animate.css* (GitHub)

Image hover effects:
imagehover.css☁ (GitHub)

Keyframes:
Keyframes.app's Animate☁

SVG animations:
Vivus Instant☁ (GitHub)

Supporting Elements - Decorations

Border radius:
10015's CSS Border Radius Generator☁

Frosted glass:
10015's CSS Glassmorphism Generator☁, Glassmorphism☁

Shadows:
10015's CSS Box Shadow Generator☁, brumm.af's SmoothShadows☁, Keyframes.app's Animate☁, Trendy CSS Text Shadows by Mixfont☁

Supporting Elements - Background Patterns

Geometric patterns:
10015's CSS Background Pattern Generator☁, CSS3 Patterns Gallery*, Hero Patterns*, MagicPattern's CSS Background Patterns☁ patterns.css* (GitHub), Subtle Patterns, Transparent Textures

Live backgrounds:
makebackground.io☁

Triangle patterns:
Trianglify.io☁ (with 🔌Trianglify JS library)

Frameworks/Engines

Utility-first:
Tailwind CSS

Data visualizations:
Charts.css

Theme Management

Automatic theme generation:
Bootstrap Magic☁ (GitHub)

CSS reset:
a11y-css-reset,

Frameworks/Engines - Foraging/Inspiration

Bootstrap themes/templates:
Bootswatch, Creative Tim's Free Templates, Material Design for Bootstrap 5 & 4

Tailwind components:
daisyUI, Tailwind UI Tailwind UI Kit

Testing/Debugging

A11y issues:
a11y.css⇉ (GitHub), Checka11y.css (GitHub)

Validation/linting:
CSS Lint☁

Minifier/optimizing:
10015's CSS Minifier☁