Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 19, 2022 12:15 pm GMT

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 +
  • normalize.css Github stars: 48.4k +
  • Bulma Github stars: 45.9k +
  • Hover.css Github stars: 26.2k +
  • 50 Projects in 50 Days Github stars: 20.2k +
  • SpinKit Github stars: 18.9k +
  • You Don't Need JavaScript Github stars: 17.4k +
  • 30 Seconds of CSS Github stars: 15.6k +
  • Ratchet Github stars: 14.5k +
  • Solved by Flexbox Github stars: 13k +

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

Install with yarn:

yarn add animate.css

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 EdenElton MesquitaWaren Gonzaga
Daniel EdenElton MesquitaWaren Gonzaga
Animate.css CreatorMaintainerCore 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 licensechangeloggitter

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

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 scalingof font-size for preformatted text. The duplication of monospace isintentional. Source.

sub, sup

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

select

By default, Chrome on OS X and Safari on OS X allow very limited styling ofselect, 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.

GithubnpmnpmAwesomeJoin the chat at https://gitter.im/jgthms/bulmaBuild Status

Bulma: a Flexbox CSS framework

Quick install

Bulma is constantly in development! Try it out now:

NPM

npm install bulma

or

Yarn

yarn add bulma

Bower

bower install bulma

Import

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

@import 'bulma/css/bulma.css'

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

Were 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 spinnerthere 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 dont have to use JavaScript to do many things that can be done with CSS alone.

Github stars: 17.4k +

Github

You Dont 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;

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 ReleaseBuild StatusdevDependency 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.gitcd solved-by-flexbox# Install the dependenciesnpm install# Build and serve the site at http://localhost:4000npm 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

Remote Jobs

Give Me Great Power

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


Original Link: https://dev.to/martinageradams/10-github-repositories-to-become-a-css-master-9h4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To