Hi, I’m your super cat, a super cat who doesn’t like fish and doesn’t like cats

If CSS is a girl, it must be like the picture above 🤩 ~

Introduction to the

While most people check Wechat moments, Weibo, TV shows and Zhihu when they’re not busy, some people check GitHub when they’re not busy to see what’s trending.

Over time, this gap is getting bigger and bigger, so there is always an asymmetry of open source information and not knowing which good open source front-end projects are worth learning from.

Perhaps the biggest gap between the initial front end and the advanced front end is the information gap.

It’s almost five years since Super Cat joined GitHub in 2016, and now 2020.

I’ve been in the habit of visiting GitHub every day since 2018, usually in the morning before work or during my lunch break.

See every day open source which good front-end projects, and the use of mainstream front-end technology stack is what, worth me to learn.

Therefore, I also collect a lot of good open source projects and recommend them to you here. There will be one to three elite articles pushed every week.

Hopefully, as you browse and learn about these open source projects recommended by Supercat, you’ll learn more about programming, improve your programming skills, and have fun.

Public account: front-end GitHub, focused on mining good GitHub front-end open source projects, smooth out your front-end information asymmetry, covering JavaScript, Vue, React, Node, miniprograms, Flutter, Deno, HTML, CSS, data structures and algorithms, and more.

How to find a good open source project? Check out this article: GitHub Mining Tips – How to Find a Good Open source Project

Here are the highlights of GitHub episode 7.

Here are 10 popular CSS projects on GitHub. I hope you find some inspiration for writing CSS here!

Meow ~ meow ~ meow ~ the text begins, sit firmly on the car and hold it

You-need-to-know-css

This project is the implementation of various effects of CSS, especially animation effects.

The author of his own harvest and work in the common use of some CSS small style summary into this document.

The document currently contains 43 CSS styles (constantly updated…) “, so it’s still a good project to learn CSS.

For example: typing effects

<style>
  main {
    width: 100%; height: 229px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  span {
    display: inline-block;
    width: 21ch;
    font: bold 200% Consolas, Monaco, monospace;   /* Constant width font */
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    border-right: 1px solid transparent;
    animation: typing 10s steps(21), caret .5s steps(1) infinite;
  }
  @keyframes typing{
    from {
        width: 0; }}@keyframes caret{
    50% { border-right-color: currentColor}
  }
</style>
<template>
  <main class="main">
    <span>The front lot</span>
  </main>
</template>
<script>
</script>
Copy the code

Lhammer. Cn/You — the need to…

CSS-Inspiration

Here you can find inspiration to use or learn CSS, in the form of categories, and show different CSS properties or different topics to use CSS to solve various ways.

Contains: Layout, Box-shadow, drop-shadow, Pseudo-class/pseudo-element, Filter (Fliter), border (border), background/Gradient (Linear-gradient/draft-gradient /conic-gradient) , mix-blend-mode/background-blend-mode, 3D, Transition/Animation, Clip-Path, text class, synthesis, CSS-doodle, SVG, etc.

For example: smart use of CSS to achieve cool charging animation

Github.com/chokcoco/CS…

css_tricks

This project summarizes some common CSS styles, records some new CSS properties and a few quirks.

For example, the effect of prompting bubbles

<div class="poptip BTN ">poptip</div>Copy the code
$poptipBg: #30363d; $color: #fff; $triangle: 8px; $distance: -12px; .poptip { position: relative; z-index: 101; &::before, &::after { visibility: hidden; opacity: 0; transform: translate3d(0, 0, 0); Transition: all 0.3s ease 0.2s; box-sizing: border-box; } &::before { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-width: $triangle $triangle 0 $triangle; border-color: $poptipBg transparent transparent transparent; left: calc(50% - #{$triangle}); top: 0px; transform: translateX(0%) translateY($distance); } &::after { font-size: 14px; color: $color; content: attr(aria-controls); position: absolute; padding: 6px 12px; white-space: nowrap; z-index: -1; left: 50%; bottom: 100%; transform: translateX(-50%) translateY($distance); background: $poptipBg; line-height: 1; border-radius: 2px; } &:hover::before, &:hover::after { visibility: visible; opacity: 1; } } .btn { min-width: 100px; The line - height: 1.5; padding: 5px 10px; color: #fff; background: #00adb5; border-radius: 4px; text-align: center; cursor: pointer; }Copy the code

Effect:

Github.com/QiShaoXuan/…

animista

The project has a variety of CSS implementation effects, as well as code demos, easy to copy code directly, but also copy compressed code, if you are looking for a CSS effect, you can look here.

animista.net/

spinkit

A collection of CSS code snippets to achieve various loading effects.

SpinKit uses only CSS animations (Transform and Opacity) to create smooth and easy to customize animations.

tobiasahlin.com/spinkit/

Master CSS3 in 10 days

This is the front end of the big desert out of a free CSS3 tutorial, for a certain CSS2 experience partners, can let you learn the system CSS3, quickly understand and master the application in the work.

It has explanations, it has code drills, and when you’re done, you can practice the API, which is really nice.

Super cat entry front-end, also learned the contents of it, although now forget almost 😂, but learned! .

www.imooc.com/learn/33

Animate

Css3 is an interesting, cross-browser cSS3 animation library, built-in many typical CSS3 animation, good compatibility and easy to use.

The use of animate. CSS is simple because it binds different animations to different classes, so all you need to do to determine which animations to use is add the generic animated and corresponding classes to the element.

As a front-end development, not knowing this library is a real failure.

animate.style/

sass

Sass is a precompiled CSS language that brings more power to CSS.

It provides functions such as variables, nested rules, mixins, and functions, and is fully compatible with CSS syntax.

Sass can help make complex stylesheets more organized and make it easier to share designs within and across projects.

Sass.bootcss.com/documentati…

less

Less is a CSS preprocessing language that extends the CSS language by adding variables, mixins, functions, and other features.

Less can run on Node or browser.

less.bootcss.com/

stylus

Expressive, dynamic, robust CSS.

It provides an efficient, dynamic, and expressive way to generate CSS. Supports both indent syntax and regular CSS styles.

stylus-lang.com/

CSS preprocessor technology is very mature, and more and more CSS preprocessor frameworks are emerging.

Sass, less, and stylus are all commonly used in vue and React projects. The usage of sass, less, and stylus is very simple. Once you learn one, the other two are easy to use.

The last

Recently overtime is a bit serious, all the articles update a lot slower, the same is a working cat, life is not easy!

Well, we’re done with GitHub episode 7.

More exciting content please pay attention to the warehouse below:

Original address: github.com/FrontEndGit…

For more information on how to spot good open source projects, check out these two articles: Tips for Mining on GitHub – How to Spot Good Open Source Projects and Tips for searching accurately if you may not even be using GitHub search.

Can add super cat WX: CB834301747, together chat front end.

Find it useful? Like the collection, by the way, click like it, your support is my biggest encouragement!

Past pure text

  • Here are 10 popular front-end interview projects on GitHub to build your own raise trove!

  • 11 super hot factory front-end code specifications, you can write the same code as poetry!

  • With all due respect, you probably don’t even know how to use GitHub search

  • GitHub’s most popular data structures and algorithms to learn from! No one of

  • The world’s most popular WEB development learning route! No one! In three days on GitHub, it has nearly 1 million likes

  • Github has a 1.6w + star, and the “unspoken rules” that programmers have to know have become popular again. If I had known, I wouldn’t have gone bald