Skip to content

ryanoglesby08/exposing-css-hidden-complexities

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

Exposing CSS Hidden Complexities

Accompanying blog post outlining the development of this repo: http://ryanogles.by/css/javascript/react/2017/11/17/exposing-css-hidden-complexities-with-react.html

Motivation

This repo is an exploration of shifting complexity out of CSS and into JavaScript, using React as the core view library.

I use a "simple" button as the example and focus on 3 common CSS complexity hot-spots:

  1. Pseudo-classes (specifically :hover)
  2. Media queries
  3. Animations (specifically transition)

The inner workings

"src/components" contains the explorations. Each component builds on the previous ones. By the time I get to AnimatedButton, the CSS properties are nothing more than a simple description of the static styles of the component.

  1. CssButton is the plain CSS implementation. Just a React component and a style sheet.
  2. HoverButton moves the hover pseudo-class into JavaScript using the onMouseEnter and onMouseLeave events paired with React's built-in state management, setState.
  3. ResponsiveButton moves the media query into JavaScript using the react-media package, which uses the matchMedia DOM API under the hood.
  4. AnimatedButton moves the transition animation into JavaScript using the react-transition-group package, which lets you describe a transition from one component state to another over time with a simple declarative API.

Getting Started

yarn install

# Run tests
yarn test

# Run the live showcase/playground in dev server mode
yarn styleguide

open localhost:6060

About

An exploration of exposing CSS complexity with JavaScript and React.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published