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
- There is also amazing ScrollMagic
… and many others
CSS Libraries
Tailwind CSS
- A free repository for community components using Tailwind CSS: Tailwind CSS Components
Why Tailwind?
- 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
-
Tailwind CSS Components; Community Components using TailwindCSS and similar: Tailwind Blocks
-
Chakra UI; React Component library using Tailwind CSS Exploring the Chakra UI React Component Library ← Alligator.io