css
This project is a way for people to use CSS Grid features quickly to create dynamic layouts.
You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.
a ridiculously small responsive css framework.
lit has two modules: lit and util. Both of them are designed to be as small as possible, and easy to extend.
I've had to implement the same hero for several years now, so like a good lazy programmer, I figured I'd automate it. This generator is intended to get you going, it doesn't provide every value but the code output should give you a nice jumping off point :)
What does it do? It generates the code for the example above based on your preferences.
A design system for building faithful recreations of old UIs.
98.css is a CSS library for building interfaces that look like Windows 98.
Background Patterns in CSS. CSS only library to fill your empty background with beautiful patterns.
Responsive CSS motion paths!
A micro-library for scaling CSS motion path strings.
Quickly build HTML emails with utility-first CSS.
Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing.
MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove DOM elements with beautiful animations.
MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts and compatible with inline-flow, percentages, media queries, flexbox and more.
Create Stunning Layouts with Ease using TailSurge. A layout generator to easily create the code for Tailwind CSS.
Make browsers render all elements more consistently. A modern, HTML5-ready alternative to CSS resets.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
A website that allows you to create your own gradient
Like jq, but for HTML. Uses CSS selectors to extract bits of content from HTML files.
Color picker and converter for OKLCH and LCH color space. OKLCH is a new way to encode colors (like hex, RGBA, or HSL):
- OKLCH has native browser support.
- It can encode more colors for modern screens (P3, Rec. 2020, and beyond).
- Unlike HSL, OKLCH always has predictable contrast after color transformation.
- In contrast with LCH and Lab, no hue shift on chroma changes.
- Provides great accessibility on palette generation.
A rapid layers animation of images as a splash intro or page transition on a website.
Modern UI component library for Tailwind CSS. Build your website quickly with Sailboat UI. Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open source Tailwind CSS components, make it easy to build your products.
Tool to create nice color palettes based on multi-color gradients.
A minimalist stylesheet for HTML elements
No class names, no frameworks, just semantic HTML and you're done.
Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths.
Colorful shadows for your images. 🎨 cosha lets you add colorful shadows to your images. Try it out and look for yourself—it really couldn't be easier to set up!
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
Minimal CSS Framework for semantic HTML. Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.
HTML Cheat Sheet contains useful code examples and web developer tools, markup generators and more on a single page. Switch to other web developer sheets, like CSS or JavaScript. These pages were created as a quick guide for those who already know how to work with these languages. Make sure you bookmark this site for a quick and easy access!
Catchy gradients, Stunning templates. Handpicked collection of linear gradients with premium website templates.
Simple tool written in vanilla Javascript to generate a plasma background for your website.
A Free, Modern Toolbox Built for Developers. 200+ tools builtin with more to come. Boosts your productivity with smart search, type detection, and hotkeys. Let it be your best companion in daily dev tasks.
700+ CSS Icons, Customizable, Retina Ready & API. Open-source CSS, SVG and Figma UI Icons.
Available in SVG Sprite, styled-components, NPM & API.
CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency. It’s designed to work with the medium that you’re working in—often the browser—rather than against it.
A modern responsive front-end framework based on Material Design
JavaScript animation engine. Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
Related contents:
Versatile metallic finish for your CSS. MetalliCSS is a tiny, dependency-free JavaScript library that makes your CSS literally shine. Using the library is as simple as adding the class metallicss, and using CSS properties for configuration (try it out here).
A list of classless CSS themes/frameworks with screenshots. This is a list of classless CSS themes and frameworks. "Classless" means a style sheet does not define special classes you must add to your HTML elements to style these elements. As a result, you can style any plain-HTML page just by linking to the style sheet. This is useful, for example, in prototyping.
clapper Scene.js is an JavaScript & CSS timeline-based animation library.
Sass library to make isometric 2D without javascript. Sass library of isometric functions. IsometricSass is a Sass framework that requires no JavaScript. It was created to be able to fully use the CSS 3D transformations to create 3D scenes.
Short JavaScript code snippets for all your development needs
Free repeatable SVG background patterns for your web projects. A collection of repeatable SVG background patterns for you to use on your web projects.
A collection of loading indicators animated with CSS. Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.
Your Unique and Free Generator Tools in One Place. Design tools present you with a choice of ready-made works and with advanced customization possibilities in just a couple of clicks. Using our generators, you can create design from scratch, visually observing your creation, and the generator will give you the best on completion of the work.
Remix and Tailwind CSS simple page block editor.
CSS templates for buttons, box-shadows, form inputs, color palettes & emojis.
Generate clothoid rounded corners by CSS clip-path
One image for all screen resolutions and different devices is not enough. An image per pixel is too much - so how can someone automatically choose the optimal responsive image sizes?
Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. It's time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.
Style BEM DOM elements using Sass. Cell is used for styling DOM elements that follow the Cell naming convention (which is almost identical to BEM).
This site is a collection of examples, video and other information to help you learn CSS Grid Layout.
Typetura’s powerful technology scales your text to any layout, on any device. Launch products up to 30% faster with 90% fewer text styles.
missing.css is the CSS library we wished already existed. The goal of missing.css is to reduce needed intervention in HTML.
Generate your very own trendy textured background
Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.
Reliable and fast alternative to the masonry and mosaic layout. Creative layouts like masonry (Pinterest style) and mosaic are used all over the web. UHUGRID is a new alternative. It is fast and it offers something none of the above could offer. It generates items that are visually appealing by using aspect ratios that are suited best for the available free space. Named UHU because of its default behaviour. Glue all items together and don't waste any free space. Everytime you refresh the page or request a layout change, a new layout will be generated even if the screen size stays the same.
Let's build a better web together. We give anyone the power to create, share, and use beautiful custom elements made with CSS and HTML.
A nice, colorful collection of CSS animations for your projects. Nice collection of CSS animations for your awesome web projects.
Basic styles for HTML Elements. Providing a mostly-reasonable set of styles without classes. Use it for simple static sites or as a starting point and add your own classes. This is not a complete solution with layout grids, components, utility classes, and the like.
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext
Related contents:
- Please Just Fucking Try HTMX.
- Next.js to htmx — A Real World Example @ htmx.
- Less htmx is More @ Unplanned Obsolescence.
- Bookmarkable by Design: URL-Driven State in HTMX @ Loren Stewart.
- MESH: I tried HTMX, then ditched it @ Alex Moon.
- The fetch()ening @ HTMX.
- Modern Frontend Complexity: essential or accidental? @ I0I.