CSS (Cascading Stylesheets)
CSS

CSS (Cascading Style Sheets) is a stylesheet language used for styling colors, fonts, placement, layouts, and other necessities required for making beautiful websites. Many developers still use "straight" CSS and implement the new features that come when versions update, which is now on CSS3. There are also CSS preprocessors, sometimes called frameworks or libraries, such as SASS and Less. It's also become common for frameworks to mix prewritten CSS with Javascript, which is where Bootstrap, a now common framework, came from. There are other front end frameworks spawning and testing such as Modernizer and Pure. Modernizer mimics the Bootstrap framework but is much more lightweight and tests the user's browser then reflects back HTML, CSS, and JavaScript can be offered by the browser. However, each developer always has their preference and style for CSS just as they do with "backend" programming.

For additional information, CSS Tricks is a wonderful resource as well as training/tutorial hub for beginner developers.

Additionally, many great examples of sites and web applications using heavy CSS can be found at CSS ZenGarden (or view the gallery directly).

Animate.css

Animate.css was created by Daniel Eden and is as simple to use as a developer's own CSS starter stylesheet framework. It is applied by using classes and sub-classes that define the animation, the animation name, and the duration of the animation. You can also apply more than one animation sequence to an element if a design ever calls for it.

For example, hovering over the black box below will trigger Animate.css's flash class of keyframes to make the image blink. By default, when including infinite as one of the classes, it would blink on the page once it was loaded and as long as the page was on your monitor.

Let's show another example. We're seeing animation again, however, this time it is upon page load and using the slideInRight class.

As you may imagine, in many cases, this would quickly annoy the user as it will repeat, well, infinitely. With a little Javascript, that can be changed. To help show an example, the button below the gold box will turn the animation on/and off. Though the animation is set to an infinite loop, this enables toggling functionality.


The JavaScript flips this on and on by adding and removing classes associated with that particular element's ID and triggered, in this case, by a button.

function slideDelay(){
var allClasses = document.getElementById("delay-img").classList;

if(allClasses.contains("slideInRight")){
allClasses.remove("slideInRight");
} else {
allClasses.add("animated", "infinite", "slideInRight");

}