ITCSS - Where are the animation files?

Question

I’m studying ITCSS as a way to better structure my folders and CSS files - I’m using it in conjunction with RSCSS.

At first I was putting the animations together with the components or objects that would be animated, but I thought the best way would be to separate them into different files and save in a folder to be reused.

Answer 1

Felipe, if we go to the theoretical side of the thing I believe that the correct thing is to put the animations in Tools (Tools), I will explain pq.

Once you can turn an animation @keyframes in a @mixin and that according to the documentation @mixins should be in the folder Tools the correct would be to put the animations in Tools.

Tools
It is the place where you will store your mixins and functions needed to build your layouts. It can be anything from font-face mixins to mixins of animations, etc..

Source: https://willianjusten.com.br/organizando-seu-css-com-itcss/#tools

The idea is that separating the animations into toos then vc can use them on any element for example. Note that the class is independent of the element itself

<div class="animation-slide-in-up"></div>

Example of @mixin animated

@mixin keyframes( $animationName ) {
    @keyframes $animationName {
        @content;
    }
}

//Uso

@include keyframes( incrediblehulk ) {
    0% {
        color: #f8d2c0;
        // you can also use mixins inside this mixin!
        @include transform( scale(1) );
    }
    100% {
        color: #0f0;
        @include transform( scale(3) );
    }
}

And here is a very interesting link to how to create a library of animations

http://brandonbrule.github.io/scss-animation-keyframe-mixin/