CodeVoyager

CSS Dump

Edit Page

CSS Dump

CSS Tricks

Position anything centrally without setting explicit width / height

Comments are important My favorite CSS hack - DEV Community 👩‍💻👨‍💻 Responses – Medium 108 byte CSS Layout Debugger · GitHub

CSS Animation Libraries

I’m willing to use only CSS animations, no JS. It’s a common to do just that, CSS3 for animations and a very small JS just for triggering start of an animation when element enters viewing area by scrolling.

Animate.css + some tiny JS

As for CSS3-only animation libraries, the best one is Animate.css. You just need to use JavaScript and calculate the scroll position, then add the animation class you want the element to have. That can also be done in plain-JS: Animate elements when scrolled into view

  • AIV - Animate In View is small JS library that only changes CSS class when element condition is triggered. Can be easily used with Animate.css or anything else CSS. I like it because is so versatile for me also

  • WOW.js is exactly that, Animate.css and JS combo that just works. Besides AOS, it is the most popular solution out there.

AOS

AOS is already a CSS + JS combo, and seems to be the most popular. Stated somewhere: every aspect of animation is handled by CSS. JS is only for triggering.

Oxygen Builder is using AOS to animate their “On-Scroll Effects”.

The idea behind AOS is straightforward: watch all elements and their positions based on settings you provide them. Then add/remove the class “aos-animate”.

More about library: https://css-tricks.com/aos-css-driven-scroll-animation-library/

Others

… and many others

CSS Libraries

Tailwind CSS

Why Tailwind?

11 Benefits of Tailwind CSS

  • No Naming Things
  • Customization tailwind.config.js
  • No more switching from HTML to CSS hundreds of times to get a design looking just right; No Context Switching
  • Creating Components Is Easy - Extracting Components
  • Small Size (after PurgeCSS); Typically as a project grows, your CSS file grows as well. This is not the case when using Tailwind, since you’re using a standardized set of classes.

I don’t know about any full admin templates available, but you can watch Adam Wathan (Tailwind’s creator) build these on his youtube channel which will hopefully provide you with what you need. Also, keep an eye on Tailwind UI, which will likely provide more of what you need. Finally, you might want to check out Awesome Tailwind.

Interesting:

Awesome Tailwind CSS: aniftyco/awesome-tailwindcss

date 12. Sep 2019 | modified 18. May 2020
filename: CSS » Dump
Article Content