CSS Breakpoints Battle (Tailwind vs Material UI vs CSS)

C
andrewgbliss
2 days ago

This is a intro article on how to use breakpoints in CSS and other frameworks.

. . .

This article will cover Tailwind CSS, Material UI, Vanilla CSS, and compare the different ways on how to use breakpoints in each framework. Breakpoints are important to know in order how to style your website and make you components more responsive to make it look good on different screen sizes.

Github Repo:

https://github.com/EntryLevelDeveloperTraining/css-breakpoint-battle

Learning Resources:

Tailwind CSS

export default function Page() {
  return (
    <div>
      <div className="container mx-auto">
        <div className="bg-blue-300 h-screen">
          <div className="p-2 sm:p-5 md:p-10 lg:p-14 xl:p-20 2xl:p-20">
            <div className="bg-green-200 flex flex-wrap">
              {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
                return (
                  <div
                    key={i}
                    className="bg-white m-1 w-6 h-6 sm:w-12 sm:h-12 md:w-24 md:h-24 lg:w-48 lg:h-48 xl:w-72 xl:h-72 2xl:w-72 2xl:h-72 sm:m-2 md:m-5 lg:m-5 xl:m-5 2xl:m-5"
                  >
                    {i}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Tailwind Custom Breakpoints

module.exports = {
  theme: {
    screens: {
      sm: '640px',
      // => @media (min-width: 640px) { ... }

      md: '768px',
      // => @media (min-width: 768px) { ... }

      lg: '1024px',
      // => @media (min-width: 1024px) { ... }

      xl: '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },
  },
};

Pros and Cons

Tailwind CSS is becoming a popular utility framework for CSS classes. It's really easy to get something up and running with responsive breakpoints without having to write a lot of CSS.

It does however become cluttered in that you have a ton of CSS classes. You could create your own custom CSS classes to help with this issue. But for me it's not that big of an issue.

Material UI

import { Container, Grid, Box } from '@material-ui/core';
import { Theme, makeStyles, createStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    box: {
      backgroundColor: 'white',
      width: theme.spacing(6),
      height: theme.spacing(6),
      [theme.breakpoints.only('sm')]: {
        width: theme.spacing(12),
        height: theme.spacing(12),
      },
      [theme.breakpoints.only('md')]: {
        width: theme.spacing(24),
        height: theme.spacing(24),
      },
      [theme.breakpoints.only('lg')]: {
        width: theme.spacing(48),
        height: theme.spacing(48),
      },
      [theme.breakpoints.only('xl')]: {
        width: theme.spacing(72),
        height: theme.spacing(72),
      },
      [theme.breakpoints.only('xxl')]: {
        width: theme.spacing(72),
        height: theme.spacing(72),
      },
    },
  })
);

export default function Page() {
  const classes = useStyles();
  return (
    <div>
      <Container disableGutters maxWidth="xl">
        <div className="bg-blue-300 h-screen">
          <Box p={{ xs: 2, sm: 5, md: 10, lg: 15, xl: 20, xxl: 20 }}>
            <Grid className="bg-green-200" container>
              {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
                return (
                  <Grid key={i} item>
                    <Box
                      className={classes.box}
                      m={{ xs: 1, sm: 2, md: 5, lg: 5, xl: 5, xxl: 5 }}
                    >
                      {i}
                    </Box>
                  </Grid>
                );
              })}
            </Grid>
          </Box>
        </div>
      </Container>
    </div>
  );
}

Material UI Custom Breakpoints

const theme = createMuiTheme({
  palette: {
    primary: blue,
  },
  spacing: (factor) => `${0.25 * factor}rem`,
  breakpoints: {
    values: {
      xs: 0,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
    },
  },
});

Pros and Cons

Material UI comes with a lot of prebuilt CSS and components right of out the box. Which is really useful. It's easy to create styles just for the components you are working on.

It does seem like all the styles look the same and to get something custom you need to write a bunch of objects, which do have helper functions, but its seems like a lot of work just to get something I liked.

Vanilla CSS

export default function Page() {
  return (
    <div>
      <div className="vanilla-container">
        <div className="bg-blue-300 h-screen">
          <div className="container-padding">
            <div className="bg-green-200 flex-container">
              {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
                return <div className="box">{i}</div>;
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Custom CSS

.vanilla-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container-padding {
  padding: 0.5rem;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  background-color: white;
  margin: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 640px) {
  .vanilla-container {
    max-width: 640px;
  }
  .container-padding {
    padding: 1.25rem;
  }
  .box {
    margin: 0.5rem;
    width: 3rem;
    height: 3rem;
  }
}

@media (min-width: 768px) {
  .vanilla-container {
    max-width: 768px;
  }
  .container-padding {
    padding: 2.5rem;
  }
  .box {
    margin: 1.25rem;
    width: 6rem;
    height: 6rem;
  }
}

@media (min-width: 1024px) {
  .vanilla-container {
    max-width: 1024px;
  }
  .container-padding {
    padding: 3.5rem;
  }
  .box {
    margin: 1.25rem;
    width: 12rem;
    height: 12rem;
  }
}

@media (min-width: 1280px) {
  .vanilla-container {
    max-width: 1280px;
  }
  .container-padding {
    padding: 5rem;
  }
  .box {
    margin: 1.25rem;
    width: 18rem;
    height: 18rem;
  }
}

@media (min-width: 1536px) {
  .vanilla-container {
    max-width: 1536px;
  }
  .container-padding {
    padding: 5rem;
  }
  .box {
    margin: 1.25rem;
    width: 18rem;
    height: 18rem;
  }
}

Pros and Cons

Vanilla CSS is the way to go if you are just using HTML and CSS. If you don't need another framework then use this. You will have complete control over your CSS.

Writing CSS and Breakpoints by hand in Vanilla CSS is tedious. Which is why these frameworks exist.


C
andrewgbliss
2 days ago