DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 10 GitHub Repositories to Become a CSS Master
Martin Adams
Martin Adams

Posted on • Originally published at Medium

10 GitHub Repositories to Become a CSS Master

Many back-end and front-end partners think that CSS is hard to learn and that becoming a CSS Master is even more challenging.

We suggest that you know from Github's best open-source CSS projects.

So, I chose 10 repositories on Github to share with you so that we can all learn together and become CSS Masters.

I work full-time freelancer, and these CSS libraries have helped me make money more quickly.

To become CSS Masters, using them is not enough; we also need to study and learn the code.

I'm a full-time Freelancer. Hire me on Upwork.

Table of Contents

Animate.css

โญ Github stars: 75.4k +

๐Ÿฟ A cross-browser library of CSS animations. As easy to use as an easy thing.

It is easy to use its animation effects in our projects. We can learn how to use CSS animations.

Github

Animate.css Github Repository โ€” How to Become a CSS Master

GitHub logo animate-css / animate.css

๐Ÿฟ A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css

GitHub Version Github Star Github Fork License

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

Just-add-water CSS animation

Installation

Install with npm:

npm install animate.css --save
Enter fullscreen mode Exit fullscreen mode

Install with yarn:

yarn add animate.css
Enter fullscreen mode Exit fullscreen mode

Getting started

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

Accessibility

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.

Core Team

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

License

Animate.css is licensed under the Hippocratic License.

Code of Conduct

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โ€ฆ

Size

Animate.css Size โ€” How to Become a CSS Master

animate.css v4.1.1 โ˜ Bundlephobia

Find the size of javascript package animate.css v4.1.1. Bundlephobia helps you find the performance impact of npm packages.

favicon bundlephobia.com

NPM

Animate.css NPM โ€” How to Become a CSS Master

animate.css - npm

[![GitHub Version](https://img.shields.io/github/release/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Star](https://img.shields.io/github/stars/daneden/animate.css.svg?style=for-the-badge)](https://github. Latest version: 4.1.1, last published: 2 years ago. Start using animate.css in your project by running `npm i animate.css`. There are 1319 other projects in the npm registry using animate.css.

favicon npmjs.com

normalize.css

โญ Github stars: 45.9k +

A modern alternative to CSS resets

When we design our own website CSS styles, we usually CSS resets in order to avoid the impact of browser default styles.

Github

Normalize.css Github โ€” How to Become a CSS Master

GitHub logo necolas / normalize.css

A modern alternative to CSS resets

normalize.css

Normalize Logo

A modern alternative to CSS resets

npm license changelog gitter

NPM

npm install --save normalize.css
Enter fullscreen mode Exit fullscreen mode

CDN

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

Download

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

What does it do?

  • 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.

Browser support

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

Extended details and known issues

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

pre, code, kbd, samp

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

sub, sup

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

select

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

Size

Normalize.css Sizeโ€” How to Become a CSS Master

normalize v0.3.1 โ˜ Bundlephobia

Find the size of javascript package normalize v0.3.1. Bundlephobia helps you find the performance impact of npm packages.

favicon bundlephobia.com

NPM

Normalize.css NPM โ€” How to Become a CSS Master<br>

normalize - npm

Stylus porting of normalize.css. Latest version: 0.3.1, last published: 10 years ago. Start using normalize in your project by running `npm i normalize`. There are 19 other projects in the npm registry using normalize.

favicon npmjs.com

Bulma

โญ Github stars: 48.4k +

Modern CSS framework based on Flexbox

We can look at Bulma's code to learn about CSS FlexBox.

Github

Bulma Github โ€” How to Become a CSS Master

GitHub logo jgthms / bulma

Modern CSS framework based on Flexbox

Bulma

Bulma is a modern CSS framework based on Flexbox.

Github npm npm Awesome Join the chat at https://gitter.im/jgthms/bulma Build Status

Bulma: a Flexbox CSS framework

Quick install

Bulma is constantly in development! Try it out now:

NPM

npm install bulma
Enter fullscreen mode Exit fullscreen mode

or

Yarn

yarn add bulma
Enter fullscreen mode Exit fullscreen mode

Bower

bower install bulma
Enter fullscreen mode Exit fullscreen mode

Import

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

@import 'bulma/css/bulma.css'
Enter fullscreen mode Exit fullscreen mode

CDN

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

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

CSS only

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.

Browser Support

Bulma uses autoprefixer to make (most) Flexboxโ€ฆ

Size

Bulma Size โ€” How to Become a CSS Master

bulma v0.9.4 โ˜ Bundlephobia

Find the size of javascript package bulma v0.9.4. Bundlephobia helps you find the performance impact of npm packages.

favicon bundlephobia.com

NPM

Bulma NPM โ€” How to Become a CSS Master

bulma - npm

Modern CSS framework based on Flexbox. Latest version: 0.9.4, last published: 3 months ago. Start using bulma in your project by running `npm i bulma`. There are 883 other projects in the npm registry using bulma.

favicon npmjs.com

Hover.css

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.

โญ Github stars: 26.2k +

Github

Hover.css Github โ€” How to Become a CSS Master

GitHub logo IanLunn / Hover

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.

Hover.css

Buy Me A Coffee

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

Contents

Download/Install

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

How To Use

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โ€ฆ

Size

Hover.css Size โ€” How to Become a CSS Master

hover.css v2.3.2 โ˜ Bundlephobia

Find the size of javascript package hover.css v2.3.2. Bundlephobia helps you find the performance impact of npm packages.

favicon bundlephobia.com

NPM

Hover.css NPM โ€” How to Become a CSS Master

hover.css - npm

[![Join the chat at https://gitter.im/IanLunn/Hover](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/IanLunn/Hover?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge). Latest version: 2.3.2, last published: 4 years ago. Start using hover.css in your project by running `npm i hover.css`. There are 16 other projects in the npm registry using hover.css.

favicon npmjs.com

50 Projects in 50 Days

Github

50 Projects in 50 Days โ€” How to Become a CSS Master

SpinKit

A collection of loading indicators animated with CSS

Weโ€™re going to add the animation to the page load ourselves, so make sure to look at its code.

โญ Github stars: 18.9k +

Github

SpinKit Github โ€” How to Become a CSS Master

GitHub logo tobiasahlin / SpinKit

A collection of loading indicators animated with CSS

SpinKit

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

Usage

  • 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.

โ€ฆ

Size

SpinKit Size โ€” How to Become a CSS Master

react-spinkit v3.0.0 โ˜ Bundlephobia

Find the size of javascript package react-spinkit v3.0.0. Bundlephobia helps you find the performance impact of npm packages.

favicon bundlephobia.com

NPM

SpinKit โ€” How to Become a CSS Master

react-spinkit - npm

A collection of loading indicators animated with CSS for React. Latest version: 3.0.0, last published: 5 years ago. Start using react-spinkit in your project by running `npm i react-spinkit`. There are 133 other projects in the npm registry using react-spinkit.

favicon npmjs.com

You Don't Need JavaScript

CSS is powerful, you can do a lot of things without JS.

Here, we can find out a lot of interesting things. You donโ€™t have to use JavaScript to do many things that can be done with CSS alone.

โญ Github stars: 17.4k +

Github

You Donโ€™t Need JavaScript โ€” How to Become a CSS Master<br>

GitHub logo you-dont-need / You-Dont-Need-JavaScript

CSS is powerful, you can do a lot of things without JS.

English | ็ฎ€ไฝ“ไธญๆ–‡

You Don't Need JavaScript

Join the community on Spectrum

Please note these demos should be considered as CSS "Proofs of Concepts". They may have serious issues from accessibility point of view (keyboard navigation, speech synthesis, etc.), or progressive enhancement/degradation/etc.

Style Guide:

## Subject
[<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)

***
&nbsp;
Enter fullscreen mode Exit fullscreen mode

ย 

Quick links

  1. Accordion / Toggle
  2. Carousel
  3. Counter of checked check-boxes
  4. Flip on click
  5. Floating label on Textfield
  6. Font-Face (Latin)
  7. Info on hover/ Popover
  8. Image Gallery
  9. Loaders
  10. Dropdown Menu
  11. Mobile menu off canvas
  12. Burger menu
  13. Fancy menu
  14. Modal/Popup
  15. Mouse tracking
  16. Parallax scrolling
  17. Tabs
  18. Todo List
  19. Tooltips
  20. Treeview
  21. Twitter Heart Animation
  22. Dynamic Image Colorizing
  23. Ripple Effect
  24. Responsive Counter Showing # of Items That Didn't Fit Screen
  25. Neumorphism Card Design

Accordion / Toggle

โฌ† back to top


ย 

Carousel

โฌ† back to top


ย 

Counter of checked check-boxes

โฌ† back toโ€ฆ

30 Seconds of CSS

Short CSS code snippets for all your development needs.

Here, we can learn a lot of cool CSS tricks.

โญ Github stars: 15.6k +

Github

30 Seconds of CSS โ€” How to Become a CSS Master

GitHub logo 30-seconds / 30-seconds-of-css

Short CSS code snippets for all your development needs

Logo

30 seconds of code

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 it a star. It means a lot to the people maintaining it.

Want to contribute?

  • If you want to help us improve, take aโ€ฆ

Ratchet

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

โญ Github stars: 14.5k +

Github

Ratchet โ€” How to Become a CSS Master

GitHub logo twbs / ratchet

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

Ratchet

GitHub Release Build Status devDependency Status

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

Table of contents

Getting started

  • 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.

What's included

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/
    โ”œโ”€โ”€
โ€ฆ

Solved by Flexbox

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

We can learn a lot about how to use CSS FlexBox here.

โญ Github stars: 13k +

Github

solved-by-flexbox - How to Become a CSS Master

GitHub logo philipwalton / solved-by-flexbox

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

Solved by Flexbox

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

View Site

Viewing the Site Locally

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

In addition to building the site and serving it locally, this willโ€ฆ

Remote Jobs

Give Me Great Power

I'm a full-time Freelancer. Hire me on Upwork.

Writing has always been my passion, and it gives me the pleasure of helping and inspiring people. If you have any questions, feel free to reach out!

Welcome to Connect me on Twitter, LinkedIn, and GitHub!

Top comments (0)

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.