Welcome to the streamlined and intuitive breakpoint system tailored for today's multi-device world. This repository offers a simple yet efficient system for managing breakpoints using SASS mixins. By establishing a coherent set of breakpoints, designers and developers can build websites that effortlessly adapt across a multitude of devices.
Features:
- Defined standard breakpoints catering to modern screen sizes.
- Use of SASS mixins for precise and clear implementation.
- Flexibility to define styles from mobile-only to specific device sizes like iPad.
Stay ahead of the curve and ensure your website looks stunning, irrespective of the device it's viewed on.
// Using CSS variables
@import './assets/styles/breakpoints.module.scss';
:root {
--primary: #0daec9;
--primary-dark: #068298;
--surface: #181d1f;
--max-width: #{$xlBreakpoint};
}
// General use
@import 'breakpoints.module.scss';
.cardWrapper {
width: 100%;
@include min-md {
width: calc((100% - rem(32px)) / 3);
}
}
Why is this a good way to arrange breakpoints?
-
Intuitive Names: Breakpoints are named according to screen sizes (
xs,sm,md,lg,xl) which is easy to understand and use. -
Flexibility: The mixins provided cater to specific ranges (e.g.,
between-sm-mdfor iPad styles) allowing for targeted styling. -
Adaptable: The system can be easily expanded or adjusted based on emerging screen sizes or project requirements.
-
Clean Implementation: With the use of mixins, adding styles for specific devices or screen sizes becomes clutter-free and more maintainable.
Make your responsive web design journey smoother and more efficient with this enhanced breakpoint system!