11 Animated social media share links

 

This chapter covers

  • Using the OOCSS, SMACSS, and BEM architecture patterns
  • Scoping CSS when working with components
  • Working with social media icons
  • Creating CSS transitions
  • Using JavaScript to overcome CSS limitations

One of the core reasons why the internet was created was to share and distribute information. One way we do this today is through social media. In this chapter, we’ll style and animate some links that can be used to share a web page via email or social media.

As in the previous chapters, we’ll be using HTML and CSS for this project without any frameworks. We chose this approach to focus on the CSS itself without the complexity and intricacies of using external packages. But many applications in the wild do use frameworks, some of which include the concept of the component.

A common reason to turn a piece of functionality into a component is to reuse the piece of code or element in multiple places in applications. With reusability comes the possibility of naming collisions. Some systems automatically restrict the scope of the CSS of the component to itself, preventing any possible collision between component styles. But many systems don’t restrict the scope, leaving it up to the developer to organize the code to prevent changing the styles in another component when styling a new one.

11.1 Working with CSS architecture

11.1.1 OOCSS

11.1.2 SMACSS

11.1.3 BEM

11.2 Setting up

11.3 Sourcing icons

11.3.1 Media icons

11.3.2 Icon libraries

11.4 Styling the block

11.5 Styling the elements

11.5.1 Share button

11.5.2 Share menu

11.5.3 Share links

11.5.4 scale()