10 GitHub Repositories to Become a CSS Master

August 19, 2022


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

On a side note, you can hire me at Upwork if you need to



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

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

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 modeExit fullscreen mode

Install with yarn:

yarn add animate.css
Enter fullscreen modeExit 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

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

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

[![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

A modern alternative to CSS resets

Normalize Logo

A modern alternative to CSS resets

npm license
changelog
gitter

NPM

npm install --save normalize.css
Enter fullscreen modeExit 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

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>

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

Modern CSS framework based on Flexbox

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 modeExit fullscreen mode

or

Yarn

yarn add bulma
Enter fullscreen modeExit fullscreen mode

Bower

bower install bulma
Enter fullscreen modeExit fullscreen mode

Import

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

@import 'bulma/css/bulma.css'
Enter fullscreen modeExit 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

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

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

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.

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

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

[![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

50+ mini web projects using HTML, CSS & JS

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

…



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

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.

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

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

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>

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



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

Short CSS code snippets for all your development needs

Logo

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

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

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

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with 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 modeExit 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 modeExit fullscreen mode

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



Source link

Comments 0

Leave a Reply

Your email address will not be published. Required fields are marked *