If you need the old docs - v3.x.x and under - you can find it here.

Install with npm:

npm install animate.css --save

Install with yarn:

yarn add animate.css

You can find the Animate.css documentation on the website.

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.

Daniel Eden	Elton Mesquita	Waren Gonzaga
Animate.css Creator	Maintainer	Core Contributor

Animate.css is licensed under the Hippocratic License.

This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code…

A modern alternative to CSS resets

NPM

npm install --save normalize.css

CDN

See https://yarnpkg.com/en/package/normalize.css

Download

See https://necolas.github.io/normalize.css/latest/normalize.css

• Preserves useful defaults, unlike many CSS resets.
• Normalizes styles for a wide range of elements.
• Corrects bugs and common browser inconsistencies.
• Improves usability with subtle modifications.
• Explains what code does using detailed comments.

• Chrome
• Edge
• Firefox ESR+
• Internet Explorer 10+
• Safari 8+
• Opera

Additional detail and explanation of the esoteric parts of normalize.css.

The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source.

Normally, using sub or sup affects the line-box height of text in all browsers. Source.

By default, Chrome on OS X and Safari on OS X allow very limited styling of select, unless a border property…

Bulma is a modern CSS framework based on Flexbox.

Bulma is constantly in development! Try it out now:

npm install bulma

or

yarn add bulma

bower install bulma

After installation, you can import the CSS file into your project using this snippet:

@import 'bulma/css/bulma.css'

https://www.jsdelivr.com/package/npm/bulma

Feel free to raise an issue or submit a pull request.

Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css

You can either use that file, "out of the box", or download the Sass source files to customize the variables.

There is no JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

Bulma uses autoprefixer to make (most) Flexbox…

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.

Demo | Tutorial

• Download/Install
• How To Use
  • A. Copy and Paste an Effect
  • B. Reference Hover.css
  • A Note on the display property
  • Using Icon Effects
• What's Included?
  • css
  • scss/less
  • Other
• Browser Support
• Using Grunt for Development
• Using Sass/LESS for Development
  • _hacks
  • _mixins
  • _options
• Contribute to Hover.css
• Licenses
  • Commercial License
  • Open-Source License
• Hire Ian Lunn

• NPM: npm install hover.css --save
• Bower: bower install hover --save
• Download Zip

Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd…

This is the main repository for all of the projects in the course.

• Course Link

Simple loading spinners animated with CSS. See demo. SpinKit only uses (transform and opacity) CSS animations to create smooth and easily customizable animations.

• Add spinkit.css or spinkit.min.css to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need)
• Add a spinner to your project by copy-pasting HTML from spinkit.css or examples.html
• Add the sk-center utility class to the spinner to center it (it sets margin to auto)
• By default, the width and height of all spinners are set to 40px. background-color is set to #333.
• Configure the spinner by overwriting the CSS variables, primarily --sk-size (spinner width & height) and --sk-color (spinner color). If you need broader browser support, remove the CSS variables.

…

English | 简体中文

Please be aware that the demos may exhibit significant accessibility issues, such as problems with keyboard navigation, speech synthesis, and progressive enhancement or degradation.

## <a id="DemoSubject"></a>Carousel

[<img src="images/image1.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="images/image2.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="images/image3.png" height="230" title="Demo 3">](http://url-to-page)

**[⬆ back to top](#quick-links)**

• You Don't Need JavaScript
• Style Guide:
• Quick links
• Accordion / Toggle
• Analog-clock
• Animated Button
• Animated Buttons
• Bonfire
• Bubble
• Burger Menu
• Button…

IMPORTANT NOTICE:

As of May, 2023, all 30-seconds content repositories have been merged into 30-seconds-of-code.

Please watch, star and follow relevant activity there.

Short CSS code snippets for all your development needs

• Visit our website to view our snippet collection.
• Use the Search page to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
• Browse the CSS Snippet collection to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
• Click on each snippet card to view the whole snippet, including code, explanation and examples.
• You can use the button at the bottom of a snippet card to view the snippet in Codepen.
• If you like the project, give…

Build mobile apps with simple HTML, CSS, and JS components.

• Getting started
• Documentation
• Support
• Contributing
• Troubleshooting
• Versioning
• Maintainers
• License

• Clone the repo with git clone https://github.com/twbs/ratchet.git or just download the bundled CSS and JS
• Read the docs to learn about the components and how to get a prototype on your phone
• Check out examples

Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the tagged downloads.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

ratchet/
├── css/
│   ├── ratchet.css
│   ├── ratchet.min.css
│   ├── ratchet-theme-android.css
│   ├── ratchet-theme-android.min.css
│   ├── ratchet-theme-ios.css
│   └── ratchet-theme-ios.min.css
├── js/
│   ├── ratchet.js
│   └── ratchet.min.js
└── fonts/
    ├──

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

View Site

The Solved by Flexbox site can be built with Node.js. If you have Node.js installed on your system, you can run the following commands to build and serve a local copy.

# Clone the git repository and cd into the cloned directory.
git clone https://github.com/philipwalton/solved-by-flexbox.git
cd solved-by-flexbox

# Install the dependencies
npm install

# Build and serve the site at http://localhost:4000
npm start

This starts up a local server on port 4000. To view the site in your browser, navigate to http://localhost:4000. If you want to use a different port, you can pass the port number as an argument to npm start:

npm start -- -p 8080

In addition to building the site and serving it locally, this will…