877 Repositories
JavaScript css-transitions Libraries
A sandbox coding environment, desktop app, inspired by CodePen and JSFiddle
CodeBox CodeBox is a coding environment with HTML, CSS and JavaScript editors with a live preview panel to show what the code would look like in the b
Vue injects CSS variables
vue-cssvar Vue 注入 CSS 变量控制样式 (兼容 vue2 , vue3) 样例:点击 div。div 以及其 hover伪类会变色。 template div v-css="{a,b}" class="box" @click="changeColor"/div /t
Easily create css variables without the need for a css file!
Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u
A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!
Amazon Clone with ReactJS A small web app that tries to imitate the desktop web version of amazon site, you can add items to the basket, delete them,
A terminal built on web technologies
For more details, head to: https://hyper.is Project goals The goal of the project is to create a beautiful and extensible experience for command-line
📦🚀 Blazing fast, zero configuration web application bundler
Features 🚀 Blazing fast bundle times - multicore compilation, and a filesystem cache for fast rebuilds even after a restart. 📦 Out of the box suppor
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bu
Cross-platform project template using Electron and Angular with the Phaser game engine. Project has Flexbox integrated for easy and responsive organization of components around the Phaser canvas.
Coher3nTS Project This is an Angular project template with Phaser nested inside, set up to run with Electron. Cross-Platform & Responsive The template
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.
Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp
Javascript and SVG odometer effect library with motion blur
SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti
Pure css cross-browser loading animations.
[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can
🔮 CSS loading animations made by single element.
Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only
CSS loading animations with minimal effort!
Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! 😅 ). It started as a drop in CSS file to get
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
Pure CSS ripple effect (no JavaScript) CSS-only implementation of Android Material design "ripple" animation on click event Main advantage of this sol
The incredible effect of rain of letters in the style of the Matrix trilogy.
O Efeito Matrix O incrível efeito da chuva de letras no estilo da trilogia Matrix. "Cedo ou tarde, você vai aprender, assim como eu aprendi, que exist
Some ideas for modern multi-layer page transitions using CSS Animations.
Multi-Layer Page Reveal Effects Some ideas for modern multi-layer page transitions using CSS Animations. Article on Codrops Demo Sponsor Demo sponsore
A slideshow that uses a CSS glitch effect for slide transitions.
Glitch Slideshow A slideshow that uses the CSS Glitch Effect to transition between slides. Article on Codrops Demo Credits Images by Unsplash.com imag
Transition effect for Cocos Creator
Transitions This project is based on Cocos Creator 2.3.0. Online Demo : http://2youyou2.com/transitions Usage Add transitions node to the scene, the t
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.
Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions
Pure CSS Image Hover Effect Library
imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable
sync CSS 3D transformations to a WebGL scene
gl-css3d Synchronize CSS 3D transformations to a WebGL scene Usage: var createCSS3D = require('gl-css3d'); // pass an HTML DOM element node, such as
An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
CSS Space Shooter Play The Game This is an experiment I made to investigate the capabilities of CSS 3D transforms. Having played about with this techn
CSS 3D renderer for Three.js.
CSS3D.js by Steven Wittens CSS 3D renderer for Three.js Note: this library is mostly obsolete now that Three.js has its own CSS 3D renderer which is i
Pure CSS animated 3D Super Mario Icon
Pure CSS Super Mario This is the transferred source of a little sideproject I did in 2010. I initially did this without any CSS preprocessor and event
3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)
cube.less 3D (animated) cube using only CSS (LESS). Demo See this demo page. There's also a live production site (WIP) using these cubes. Install $ bo
CSS 3D Dropdown Concept
Makisu An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin. Check out the demo (you'll need a CSS 3D capable browser, such as Chrom
:package: Introduction to CSS 3D transforms
Intro to CSS 3D transforms By David DeSandro 3dtransforms.desandro.com Tutorial, examples, and discussion all about CSS 3D transforms. Originally writ
.qube -- The Quintessential Responsive 3D CSS Cube
.qube Quintessential Responsive 3D CSS Cube Created by @zacharyjohnson — zachstronaut.com Hello web friend! The styles defined in "src/qube.css" provi
Simple jQuery plugin for 3d Hover effect
jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015
A motion hover effect for a background grid of images.
Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo
🎉 Personal landing page template
Landing Page Personal landing page template. Designed to keep simplicity in mind in both setup and UI. Stack HTML CSS Font Awesome Themes Couple custo
:page_facing_up::briefcase::tophat: A simple Jekyll + GitHub Pages powered resume template.
Resume template A simple Jekyll + GitHub Pages powered resume template. Docs Running locally To test locally, run the following in your terminal: Clon
🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.
landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi
Landing page starter
👋 Fresh Fresh is a free landing page starter built by cssninjaStudio. ✌️ preview Check out the live demo by clicking here. Fresh is built with Bulma
Tailwind CSS Starter Template - Landing Page
Tailwind Toolbox - Landing Page Template Landing Page is an open source, generic landing page template for Tailwind CSS created by Tailwind Toolbox. G
Esri GitHub landing page
esri.github.io Landing page for Esri open source projects. Both the project categories and search suggestions in http://esri.github.io are powered by
A Lightweight Sass Tool Set
A Lightweight Sass Tool Set Bourbon is a library of Sass mixins and functions that are designed to make you a more efficient style sheet author. It is
A CSS bookmarklet that puts pink error boxes (with messages in comic sans) everywhere you write bad HTML.
REVENGE.CSS The premise of revenge.css is simple: A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in com
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)
Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox
☝️One div. Many possibilities.
SingleDivProject ☝️ One div. Many possibilities. What is this? This project focuses on exploring all the possibilities that can be done with a singl
Text-based user interface CSS library
TuiCss Text-based user interface CSS library -- Documentation -- About TuiCss is a library focused to create web applications using an interface based
Break free from CSS prefix hell!
-prefix-free Break free from CSS prefix hell! Project homepage A script that lets you use only unprefixed CSS properties everywhere. It works behind t
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors
Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo
A library to make creating CSS polyfills much easier.
UPDATE (2016-12-22): I am no longer supporting this library for all the reasons I address in my post The Dark Side of Polyfilling CSS. If you choose t
🐒 Normalize browsers' default style
My open source work is supported by the community Special thanks to: Differences from normalize.css Smaller Includes only normalizations for the lates
A built-time CSS library for styling React components.
Stylin Stylin is a build-time CSS library that offers an elegant way to style React components. It extends CSS Modules and adds some missing features
🚿 A modern CSS reset
Modern CSS reset Installation npm install --save ress or bower install --save ress Features Apply box-sizing: border-box; in all elements. Reset paddi
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 Looking for v5? The master branch is un
A bare-bones CSS reset for modern web development.
A modern CSS reset A tiny little reset that you can use as the basis of your CSS projects. You can read a breakdown of it here. Installation NPM: npm
Full CSS support for JSX without compromises
styled-jsx Need help? Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client). Code and docs are for v3 which w
Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation
react-with-styles Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or Reac
JSS is an authoring tool for CSS which uses JavaScript as a host language.
JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue
CSS Loader
css-loader The css-loader interprets @import and url() like import/require() and will resolve them. Getting Started To begin, you'll need to install c
:sparkles: Modular, scoped CSS with ES6
CSJS allows you to write modular, scoped CSS with valid JavaScript. Features Extremely simple and lightweight Zero dependencies, ~2KB minified and gzi
A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the `className` prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server.
babel-plugin-css-in-js A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y
Easily create and maintain style guides using CSS comments
mdcss lets you easily create and maintain style guides with CSS comments using Markdown. /*--- title: Buttons section: Base CSS --- Button styles c
Dropbox’s (S)CSS authoring style guide
Dropbox (S)CSS Style Guide “Every line of code should appear to be written by a single person, no matter the number of contributors.” —@mdo General Do
:book: Opinionated CSS styleguide for scalable applications
css Opinionated CSS styleguide for scalable applications This guide was heavily inspired by experiments, awesome people like @fat and @necolas and awe
Principles of writing consistent, idiomatic CSS.
Principles of writing consistent, idiomatic CSS The following document outlines a reasonable style guide for CSS development. These guidelines strongl
Collected dispatches from The Quest for Scalable CSS
A Scalable CSS Reading List A list of things to read or watch that address these two questions: What is scalable CSS? and How do we create scalable CS
Unstyle CSS - Forget inconsistencies, let us start with a blank slate.
unstyle.css Specialised stylesheet for removing user agent styles. For a demo against the HTML5 Kitchen Sink: http://codepen.io/nexii/pen/WwQXZe?edito
A best-practices CSS foundation
sanitize.css sanitize.css is a CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults. It is d
A tiny modern CSS reset
minireset.css A tiny modern CSS reset that covers the basics: resets the font sizes: so that using semantic markup doesn't affect the styling resets t
Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
Note You might also like my more recent take on this project, Utility OpenType: CSS utility classes for advanced typographic features. Normalize-OpenT
A modern alternative to CSS resets
normalize.css A modern alternative to CSS resets NPM npm install --save normalize.css CDN See https://yarnpkg.com/en/package/normalize.css Download Se
Reseter.css - A Futuristic CSS Reset / CSS Normalizer
Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all
Reasonable System for CSS Stylesheet Structure
Viewing this from GitHub? Visit the website for the full experience. rscss.io → rscss Styling CSS without losing your sanity Reasonable System for CSS
light – weight css preprocessor
STYLIS A Light–weight CSS Preprocessor. Installation Use a Direct Download: script src=stylis.js/script Use a CDN: script src=unpkg.com/stylis/
Sass makes CSS fun!
Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well
Transforming styles with JS plugins
PostCSS PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS
Less. The dynamic stylesheet language.
Chat with Less.js users and contributors This is the Less.js monorepo, managed via Lerna. More information For general information on the language, co
Modern CSS to all browsers
stylecow: modern CSS for all browser Node library to fix your css code and make it compatible with all browsers. Created by Óscar Otero. License: MIT
Plugin framework for CSS preprocessing in Node.js
rework CSS manipulations built on css, allowing you to automate vendor prefixing, create your own properties, inline images, anything you can imagine!
Transforming styles with JS plugins
PostCSS PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS
Collection of parsers written in JavaScript
CSS Parser Introduction The ParserLib CSS parser is a CSS3 SAX-inspired parser written in JavaScript. It handles standard CSS syntax as well as valida
A decent CSS parser.
mensch A decent CSS parser. usage npm install mensch var mensch = require('mensch'); var ast = mensch.parse('p { color: black; }'); var css = mensch.
CSS parser with support of preprocessors
Gonzales PE @dev Gonzales PE is a CSS parser which plays nicely with preprocessors. Currently those are supported: SCSS, Sass, LESS. Try out Gonzales
A tool set for CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations
CSSTree CSSTree is a tool set for CSS: fast detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and match
CSS Object Model implemented in pure JavaScript. It's also a parser!
CSSOM CSSOM.js is a CSS parser written in pure JavaScript. It is also a partial implementation of CSS Object Model. CSSOM.parse("body {color: black}")
A utility-first CSS framework for rapid UI development.
A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For
A new flexbox based CSS micro-framework.
Strawberry CSS What Strawberry is a new flexbox based CSS micro-framework. A set of common flexbox's utilities focused on making your life easier and
Feature rich CSS framework for the new decade https://shorthandcss.com
Shorthand Shorthand is a CSS framework and does not include any javascript. You can customize the framework by using .scss only. Size Dist File URL Li
The epic event-driven, front-end only, reactive JavaScript framework with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?
Active CSS Power-up your CSS with actions! Is the CSS of the future a full-on programming language? Active CSS is a JavaScript plugin that adds event-
Materialize, a CSS Framework based on Material Design
MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows
Semantic is a UI component framework based around useful principles from natural language.
Semantic UI Semantic is a UI framework designed for theming. Key Features 50+ UI elements 3000 + CSS variables 3 Levels of variable inheritance (simil
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat
Scaffolding utility for vanilla-js
scaffold-static lets you automate the local development environment setup and build static sites (vanilla-JS) with ease. Installation npm install -g s
:skull: An ancient tiny JS and CSS loader from the days before everyone had written one. Unmaintained.
LazyLoad Note: LazyLoad is no longer being maintained. I'm not responding to issues or pull requests, since I don't use this project anymore and don't
curl.js is small, fast, extensible module loader that handles AMD, CommonJS Modules/1.1, CSS, HTML/text, and legacy scripts.
curl (cujoJS resource loader) All development for curl.js and cram.js has stopped. For the foreseeable future, we will continue to respond to issues o
📦🚀 Blazing fast, zero configuration web application bundler
Features 🚀 Blazing fast bundle times - multicore compilation, and a filesystem cache for fast rebuilds even after a restart. 📦 Out of the box suppor
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bu
Beautifier for javascript
JS Beautifier This little beautifier will reformat and re-indent bookmarklets, ugly JavaScript, unpack scripts packed by Dean Edward’s popular packer,
Prettier is an opinionated code formatter.
Opinionated Code Formatter JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML Your favorite
NativeScript empowers you to access native api's from JavaScript directly. Angular, Vue, Svelte, React and you name it compatible.
NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile de
JavaScript library for HTML5 & CSS3 time sheets
Timesheet.js Simple JavaScript library to create HTML time sheets. Wrapped in an example project using Middleman … You only have to include dist/times
JS / CSS / files loader + key/value storage
bag.js - JS / CSS loader + KV storage bag.js is loader for .js / .css and other files, that uses IndexedDB/ WebSQL / localStorage for caching. Conside