Responsive Breakpoints

Breakpoints are customizable widths that determine how your responsive layout and components behave across device screens or viewport sizes in Phenix Design System.

Core concepts

• Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted to a particular viewport or device size.
• Use media queries to architect your CSS by breakpoint. Media queries are a feature of CSS that allows you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use min-width in our media queries.
• Mobile-first, responsive design is the goal. Phenix’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.

Available breakpoints

Phenix includes ten default breakpoints, for building responsive layouts and components. two breakpoints for each set of screen size’s start point of the set and the end point of set and These breakpoints can be customized from Sass files

SASS Breakpoints

sass breakpoints are a collection of mixin to create media query breakpoints for multiple screen sizes that match phenix responsive layout and utilities, components, etc, and each screen size has a start point as the minimum width and an endpoint as the maximum width and you can toggle between the flow of the query up/down by adding the parameter "down" to the mixin function, you learn more from the examples below,

For each mixin of the responsive breakpoints mixins you can either, set custom css from the start point of the screen size to the infinity size of the screen, or you can reverse and start from the endpoint of the screen size to 0px size,

Extra Small Screens

/*====> Extra Small [0 => infinite] Screens Media Query <====*/
@include xSmall() {
/*===> Set CSS for Extra Small Screens and Up //*/
};
/*====> Extra Small [480 => 0]px Screens Media Query <====*/
@include xSmall('down') {
/*===> Set CSS for Extra Small Screens and Down //*/
};

Small Screens

/*====> Small [576 => infinite] Screens Media Query <====*/
@include small() {
/*===> Set CSS for small screens and Up //*/
};
/*====> Small [700 => 0]px Screens Media Query <====*/
@include small('down') {
/*===> Set CSS for small screens and Down //*/
};

Medium Screens

/*====> Medium [768 => infinite] Screens Media Query <====*/
@include medium() {
/*===> Set CSS for medium screens and Up //*/
};
/*====> Medium [1100 => 0] Screens Media Query <====*/
@include medium('down') {
/*===> Set CSS for medium screens and Down //*/
};

Large Screens

/*====> Large [1200 => infinite] Screens Media Query <====*/
@include large() {
/*===> Set CSS for large screens and Up //*/
};
/*====> Large [1366 => 0]px Screens Media Query <====*/
@include large('down') {
/*===> Set CSS for large screens and Down //*/
};

Extra Large Screens

/*====> xLarge [1400 => infinite] Screens Media Query <====*/
@include xlarge() {
/*===> Set CSS for xlarge screens and Up //*/
};
/*====> xLarge [2560 => 0]px Screens Media Query <====*/
@include xlarge('down') {
/*===> Set CSS for xlarge screens and Down //*/
};

Media Query

phenix media query is a js alternative for the CSS Media Query which let you execute a js callback depending on the screen size mediaQuery(breakpoint, callback(), mobile_first); the method is designed with presets of breakpoints like the Responsive Breakpoints and you can also create a custom breakpoint by defining a number instead of a preset name.

/*====> Extra Small [480 => 0]px Screens Media Query <====*/
Phenix(document).mediaQuery('xsmall', callback => { /*-- Your Code --*/ });
/*====> Extra Small [0 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('xsmall', callback => {/*-- Your Code --*/}, true);

/*====> Small [576 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('small', callback => { /*-- Your Code --*/ });
/*====> Small [700 => 0]px Screens Media Query <====*/
Phenix(document).mediaQuery('small', callback => {/*-- Your Code --*/}, true);

/*====> Medium [768 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('medium', callback => { /*-- Your Code --*/ });
/*====> Medium [1100 => 0] Screens Media Query <====*/
Phenix(document).mediaQuery('medium', callback => {/*-- Your Code --*/}, true);

/*====> Large [1200 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('large', callback => { /*-- Your Code --*/ });
/*====> Large [1366 => 0]px Screens Media Query <====*/
Phenix(document).mediaQuery('large', callback => {/*-- Your Code --*/}, true);

/*====> xLarge [1400 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('xlarge', callback => { /*-- Your Code --*/ });
/*====> xLarge [2560 => 0]px Screens Media Query <====*/
Phenix(document).mediaQuery('xlarge', callback => {/*-- Your Code --*/}, true);

Options Table