"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8002],{3905:function(e,n,t){t.d(n,{Zo:function(){return m},kt:function(){return u}});var r=t(7294);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function s(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var o=r.createContext({}),p=function(e){var n=r.useContext(o),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},m=function(e){var n=p(e.components);return r.createElement(o.Provider,{value:n},e.children)},c={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},d=r.forwardRef((function(e,n){var t=e.components,i=e.mdxType,a=e.originalType,o=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),d=p(t),u=i,v=d["".concat(o,".").concat(u)]||d[u]||c[u]||a;return t?r.createElement(v,s(s({ref:n},m),{},{components:t})):r.createElement(v,s({ref:n},m))}));function u(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var a=t.length,s=new Array(a);s[0]=d;var l={};for(var o in n)hasOwnProperty.call(n,o)&&(l[o]=n[o]);l.originalType=e,l.mdxType="string"==typeof e?e:i,s[1]=l;for(var p=2;p<a;p++)s[p]=t[p];return r.createElement.apply(null,s)}return r.createElement.apply(null,t)}d.displayName="MDXCreateElement"},7173:function(e,n,t){t.r(n),t.d(n,{frontMatter:function(){return l},contentTitle:function(){return o},metadata:function(){return p},toc:function(){return m},default:function(){return d}});var r=t(7462),i=t(3366),a=(t(7294),t(3905)),s=["components"],l={title:"Responsive",sidebar_position:4},o=void 0,p={unversionedId:"overview/responsive",id:"overview/responsive",isDocsHomePage:!1,title:"Responsive",description:"FlatifyCSS comes with some helper mixins to make your website responsive, if you use Sass in this case these mixins simplify the process of writing media queries.",source:"@site/docs/overview/responsive.mdx",sourceDirName:"overview",slug:"/overview/responsive",permalink:"/docs/overview/responsive",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/overview/responsive.mdx",tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Responsive",sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Typography",permalink:"/docs/overview/typography"},next:{title:"Grid system",permalink:"/docs/overview/grid-system"}},m=[{value:"Responsive breakpoints",id:"responsive-breakpoints",children:[],level:2},{value:"Responsive mixins",id:"responsive-mixins",children:[{value:"Extra small",id:"extra-small",children:[],level:3},{value:"Small",id:"small",children:[],level:3},{value:"Medium",id:"medium",children:[],level:3},{value:"Large",id:"large",children:[],level:3},{value:"Extra large",id:"extra-large",children:[],level:3},{value:"Extra extra large",id:"extra-extra-large",children:[],level:3}],level:2},{value:"Use responsive mixins",id:"use-responsive-mixins",children:[],level:2}],c={toc:m};function d(e){var n=e.components,t=(0,i.Z)(e,s);return(0,a.kt)("wrapper",(0,r.Z)({},c,t,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"FlatifyCSS comes with some helper mixins to make your website responsive, if you use Sass in this case these mixins simplify the process of writing ",(0,a.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries"},"media queries"),"."),(0,a.kt)("h2",{id:"responsive-breakpoints"},"Responsive breakpoints"),(0,a.kt)("p",null,"First read about ",(0,a.kt)("a",{parentName:"p",href:"/docs/overview/customization"},"customization"),". Responsive breakpoints are defined inside the ",(0,a.kt)("inlineCode",{parentName:"p"},"_config.scss")," file, and based on these breakpoints the mixins will be generated."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"$RESPONSIVE_BREAKPOINTS: (\n  xs: 575.98px,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px,\n  xxl: 1400px,\n) !default;\n")),(0,a.kt)("h2",{id:"responsive-mixins"},"Responsive mixins"),(0,a.kt)("p",null,"Here is the list of all available responsive mixins:"),(0,a.kt)("h3",{id:"extra-small"},"Extra small"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"break-xs()")),(0,a.kt)("h3",{id:"small"},"Small"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"break-sm()"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"break-sm-min()"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"break-sm-max()")),(0,a.kt)("h3",{id:"medium"},"Medium"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"break-md()"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"break-md-min()"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"break-md-max()")),(0,a.kt)("h3",{id:"large"},"Large"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"break-lg()"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"break-lg-min()"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"break-lg-max()")),(0,a.kt)("h3",{id:"extra-large"},"Extra large"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"break-xl()"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"break-xl-min()"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"break-xl-max()")),(0,a.kt)("h3",{id:"extra-extra-large"},"Extra extra large"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"break-xxl()"),(0,a.kt)("br",{parentName:"p"}),"\n",(0,a.kt)("inlineCode",{parentName:"p"},"break-xxl-max()")),(0,a.kt)("h2",{id:"use-responsive-mixins"},"Use responsive mixins"),(0,a.kt)("p",null,"The example below indicates how to use the mixins to make conditions for responsive design."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="custom-style.scss"',title:'"custom-style.scss"'},"body {\n  padding: 50px;\n\n  @include break-sm {\n    padding: 10px;\n  }\n}\n")),(0,a.kt)("p",null,"What will be compiled is:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="custom-style.css"',title:'"custom-style.css"'},"body {\n  padding: 50px;\n}\n\n/* Small breakpoint */\n@media screen and (min-width: 576px) and (max-width: 767px) {\n  body {\n    padding: 10px;\n  }\n}\n")))}d.isMDXComponent=!0}}]);