[{"data":1,"prerenderedAt":1465},["Reactive",2],{"content-query-kfYYk1m0Tx":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":1461,"_id":1462,"_source":1463,"_file":1464,"_extension":121},"/docs/ui/breakpoints","ui",false,"","Breakpoints - Inkline","Inkline provides a set of predefined breakpoints that you can use in your Sass code to create responsive designs that adapt to different screen sizes.",{"type":11,"children":12,"toc":1453},"root",[13,22,28,34,193,205,210,217,229,642,673,679,690,1019,1045,1051,1062,1392,1419,1425,1448],{"type":14,"tag":15,"props":16,"children":18},"element","h1",{"id":17},"breakpoints",[19],{"type":20,"value":21},"text","Breakpoints",{"type":14,"tag":23,"props":24,"children":26},"h2",{"id":25},"inkline-provides-a-set-of-predefined-breakpoints-that-you-can-use-in-your-sass-code-to-create-responsive-designs-that-adapt-to-different-screen-sizes",[27],{"type":20,"value":9},{"type":14,"tag":29,"props":30,"children":31},"p",{},[32],{"type":20,"value":33},"The breakpoints are based on common device sizes and are designed to be easy to use and remember. Inkline provides the following breakpoints by default:",{"type":14,"tag":35,"props":36,"children":37},"table",{},[38,63],{"type":14,"tag":39,"props":40,"children":41},"thead",{},[42],{"type":14,"tag":43,"props":44,"children":45},"tr",{},[46,53,58],{"type":14,"tag":47,"props":48,"children":50},"th",{"align":49},null,[51],{"type":20,"value":52},"Name",{"type":14,"tag":47,"props":54,"children":55},{"align":49},[56],{"type":20,"value":57},"From",{"type":14,"tag":47,"props":59,"children":60},{"align":49},[61],{"type":20,"value":62},"To",{"type":14,"tag":64,"props":65,"children":66},"tbody",{},[67,90,111,132,153,174],{"type":14,"tag":43,"props":68,"children":69},{},[70,80,85],{"type":14,"tag":71,"props":72,"children":73},"td",{"align":49},[74],{"type":14,"tag":75,"props":76,"children":77},"code-inline",{},[78],{"type":20,"value":79},"xs",{"type":14,"tag":71,"props":81,"children":82},{"align":49},[83],{"type":20,"value":84},"0px",{"type":14,"tag":71,"props":86,"children":87},{"align":49},[88],{"type":20,"value":89},"575.99px",{"type":14,"tag":43,"props":91,"children":92},{},[93,101,106],{"type":14,"tag":71,"props":94,"children":95},{"align":49},[96],{"type":14,"tag":75,"props":97,"children":98},{},[99],{"type":20,"value":100},"sm",{"type":14,"tag":71,"props":102,"children":103},{"align":49},[104],{"type":20,"value":105},"576px",{"type":14,"tag":71,"props":107,"children":108},{"align":49},[109],{"type":20,"value":110},"767.99px",{"type":14,"tag":43,"props":112,"children":113},{},[114,122,127],{"type":14,"tag":71,"props":115,"children":116},{"align":49},[117],{"type":14,"tag":75,"props":118,"children":119},{},[120],{"type":20,"value":121},"md",{"type":14,"tag":71,"props":123,"children":124},{"align":49},[125],{"type":20,"value":126},"768px",{"type":14,"tag":71,"props":128,"children":129},{"align":49},[130],{"type":20,"value":131},"991.99px",{"type":14,"tag":43,"props":133,"children":134},{},[135,143,148],{"type":14,"tag":71,"props":136,"children":137},{"align":49},[138],{"type":14,"tag":75,"props":139,"children":140},{},[141],{"type":20,"value":142},"lg",{"type":14,"tag":71,"props":144,"children":145},{"align":49},[146],{"type":20,"value":147},"992px",{"type":14,"tag":71,"props":149,"children":150},{"align":49},[151],{"type":20,"value":152},"1199.99px",{"type":14,"tag":43,"props":154,"children":155},{},[156,164,169],{"type":14,"tag":71,"props":157,"children":158},{"align":49},[159],{"type":14,"tag":75,"props":160,"children":161},{},[162],{"type":20,"value":163},"xl",{"type":14,"tag":71,"props":165,"children":166},{"align":49},[167],{"type":20,"value":168},"1200px",{"type":14,"tag":71,"props":170,"children":171},{"align":49},[172],{"type":20,"value":173},"1399.99px",{"type":14,"tag":43,"props":175,"children":176},{},[177,185,190],{"type":14,"tag":71,"props":178,"children":179},{"align":49},[180],{"type":14,"tag":75,"props":181,"children":182},{},[183],{"type":20,"value":184},"2xl",{"type":14,"tag":71,"props":186,"children":187},{"align":49},[188],{"type":20,"value":189},"1400px",{"type":14,"tag":71,"props":191,"children":192},{"align":49},[],{"type":14,"tag":29,"props":194,"children":195},{},[196,198],{"type":20,"value":197},"The default breakpoints represent common device sizes. ",{"type":14,"tag":199,"props":200,"children":202},"a",{"href":201},"/docs/configuration/file#breakpoints",[203],{"type":20,"value":204},"Read about breakpoints configuration",{"type":14,"tag":29,"props":206,"children":207},{},[208],{"type":20,"value":209},"Inkline provides a set of mixins to help you work with breakpoints in your Sass code. The mixins are designed to make it easy to write responsive styles that adapt to different screen sizes.",{"type":14,"tag":211,"props":212,"children":214},"h3",{"id":213},"breakpoint-mixin",[215],{"type":20,"value":216},"Breakpoint Mixin",{"type":14,"tag":29,"props":218,"children":219},{},[220,222,227],{"type":20,"value":221},"The ",{"type":14,"tag":75,"props":223,"children":224},{},[225],{"type":20,"value":226},"breakpoint",{"type":20,"value":228}," mixin allows you to define styles for a specific breakpoint. The mixin takes a single argument, which is the name of the breakpoint you want to target. For example:",{"type":14,"tag":230,"props":231,"children":232},"content-tabs",{},[233,431],{"type":14,"tag":234,"props":235,"children":236},"template",{"v-slot:scss":7},[237],{"type":14,"tag":238,"props":239,"children":244},"code",{"className":240,"code":242,"language":243,"meta":7},[241],"language-scss","@import '@inkline/inkline/css/mixins';\n\n.my-class {\n  font-size: 16px;\n\n  @include breakpoint('md') {\n    font-size: 20px;\n  }\n}\n","scss",[245],{"type":14,"tag":246,"props":247,"children":248},"pre",{},[249],{"type":14,"tag":238,"props":250,"children":251},{"__ignoreMap":7},[252,281,290,305,339,347,383,413,422],{"type":14,"tag":253,"props":254,"children":257},"span",{"class":255,"line":256},"line",1,[258,264,270,276],{"type":14,"tag":253,"props":259,"children":261},{"class":260},"ct-149352",[262],{"type":20,"value":263},"@import",{"type":14,"tag":253,"props":265,"children":267},{"class":266},"ct-553616",[268],{"type":20,"value":269}," ",{"type":14,"tag":253,"props":271,"children":273},{"class":272},"ct-952708",[274],{"type":20,"value":275},"'@inkline/inkline/css/mixins'",{"type":14,"tag":253,"props":277,"children":278},{"class":266},[279],{"type":20,"value":280},";\n",{"type":14,"tag":253,"props":282,"children":284},{"class":255,"line":283},2,[285],{"type":14,"tag":253,"props":286,"children":287},{},[288],{"type":20,"value":289},"\n",{"type":14,"tag":253,"props":291,"children":293},{"class":255,"line":292},3,[294,300],{"type":14,"tag":253,"props":295,"children":297},{"class":296},"ct-762058",[298],{"type":20,"value":299},".my-class",{"type":14,"tag":253,"props":301,"children":302},{"class":266},[303],{"type":20,"value":304}," {\n",{"type":14,"tag":253,"props":306,"children":308},{"class":255,"line":307},4,[309,314,320,325,330,335],{"type":14,"tag":253,"props":310,"children":311},{"class":266},[312],{"type":20,"value":313},"  ",{"type":14,"tag":253,"props":315,"children":317},{"class":316},"ct-617022",[318],{"type":20,"value":319},"font-size",{"type":14,"tag":253,"props":321,"children":322},{"class":266},[323],{"type":20,"value":324},": ",{"type":14,"tag":253,"props":326,"children":327},{"class":316},[328],{"type":20,"value":329},"16",{"type":14,"tag":253,"props":331,"children":332},{"class":260},[333],{"type":20,"value":334},"px",{"type":14,"tag":253,"props":336,"children":337},{"class":266},[338],{"type":20,"value":280},{"type":14,"tag":253,"props":340,"children":342},{"class":255,"line":341},5,[343],{"type":14,"tag":253,"props":344,"children":345},{},[346],{"type":20,"value":289},{"type":14,"tag":253,"props":348,"children":350},{"class":255,"line":349},6,[351,355,360,364,368,373,378],{"type":14,"tag":253,"props":352,"children":353},{"class":266},[354],{"type":20,"value":313},{"type":14,"tag":253,"props":356,"children":357},{"class":260},[358],{"type":20,"value":359},"@include",{"type":14,"tag":253,"props":361,"children":362},{"class":266},[363],{"type":20,"value":269},{"type":14,"tag":253,"props":365,"children":366},{"class":296},[367],{"type":20,"value":226},{"type":14,"tag":253,"props":369,"children":370},{"class":266},[371],{"type":20,"value":372},"(",{"type":14,"tag":253,"props":374,"children":375},{"class":272},[376],{"type":20,"value":377},"'md'",{"type":14,"tag":253,"props":379,"children":380},{"class":266},[381],{"type":20,"value":382},") {\n",{"type":14,"tag":253,"props":384,"children":386},{"class":255,"line":385},7,[387,392,396,400,405,409],{"type":14,"tag":253,"props":388,"children":389},{"class":266},[390],{"type":20,"value":391},"    ",{"type":14,"tag":253,"props":393,"children":394},{"class":316},[395],{"type":20,"value":319},{"type":14,"tag":253,"props":397,"children":398},{"class":266},[399],{"type":20,"value":324},{"type":14,"tag":253,"props":401,"children":402},{"class":316},[403],{"type":20,"value":404},"20",{"type":14,"tag":253,"props":406,"children":407},{"class":260},[408],{"type":20,"value":334},{"type":14,"tag":253,"props":410,"children":411},{"class":266},[412],{"type":20,"value":280},{"type":14,"tag":253,"props":414,"children":416},{"class":255,"line":415},8,[417],{"type":14,"tag":253,"props":418,"children":419},{"class":266},[420],{"type":20,"value":421},"  }\n",{"type":14,"tag":253,"props":423,"children":425},{"class":255,"line":424},9,[426],{"type":14,"tag":253,"props":427,"children":428},{"class":266},[429],{"type":20,"value":430},"}",{"type":14,"tag":234,"props":432,"children":433},{"v-slot:output":7},[434],{"type":14,"tag":238,"props":435,"children":440},{"className":436,"code":438,"language":439,"meta":7},[437],"language-css",".my-class {\n    font-size: 16px;\n}\n\n@media screen and (min-width: 768px) and (max-width: 991.99px) {\n    .my-class {\n        font-size: 20px;\n    }\n}\n","css",[441],{"type":14,"tag":246,"props":442,"children":443},{},[444],{"type":14,"tag":238,"props":445,"children":446},{"__ignoreMap":7},[447,458,485,493,500,584,599,627,635],{"type":14,"tag":253,"props":448,"children":449},{"class":255,"line":256},[450,454],{"type":14,"tag":253,"props":451,"children":452},{"class":296},[453],{"type":20,"value":299},{"type":14,"tag":253,"props":455,"children":456},{"class":266},[457],{"type":20,"value":304},{"type":14,"tag":253,"props":459,"children":460},{"class":255,"line":283},[461,465,469,473,477,481],{"type":14,"tag":253,"props":462,"children":463},{"class":266},[464],{"type":20,"value":391},{"type":14,"tag":253,"props":466,"children":467},{"class":316},[468],{"type":20,"value":319},{"type":14,"tag":253,"props":470,"children":471},{"class":266},[472],{"type":20,"value":324},{"type":14,"tag":253,"props":474,"children":475},{"class":316},[476],{"type":20,"value":329},{"type":14,"tag":253,"props":478,"children":479},{"class":260},[480],{"type":20,"value":334},{"type":14,"tag":253,"props":482,"children":483},{"class":266},[484],{"type":20,"value":280},{"type":14,"tag":253,"props":486,"children":487},{"class":255,"line":292},[488],{"type":14,"tag":253,"props":489,"children":490},{"class":266},[491],{"type":20,"value":492},"}\n",{"type":14,"tag":253,"props":494,"children":495},{"class":255,"line":307},[496],{"type":14,"tag":253,"props":497,"children":498},{},[499],{"type":20,"value":289},{"type":14,"tag":253,"props":501,"children":502},{"class":255,"line":341},[503,508,512,517,521,526,531,536,540,545,549,554,558,562,567,571,576,580],{"type":14,"tag":253,"props":504,"children":505},{"class":260},[506],{"type":20,"value":507},"@media",{"type":14,"tag":253,"props":509,"children":510},{"class":266},[511],{"type":20,"value":269},{"type":14,"tag":253,"props":513,"children":514},{"class":316},[515],{"type":20,"value":516},"screen",{"type":14,"tag":253,"props":518,"children":519},{"class":266},[520],{"type":20,"value":269},{"type":14,"tag":253,"props":522,"children":523},{"class":260},[524],{"type":20,"value":525},"and",{"type":14,"tag":253,"props":527,"children":528},{"class":266},[529],{"type":20,"value":530}," (",{"type":14,"tag":253,"props":532,"children":533},{"class":316},[534],{"type":20,"value":535},"min-width",{"type":14,"tag":253,"props":537,"children":538},{"class":266},[539],{"type":20,"value":324},{"type":14,"tag":253,"props":541,"children":542},{"class":316},[543],{"type":20,"value":544},"768",{"type":14,"tag":253,"props":546,"children":547},{"class":260},[548],{"type":20,"value":334},{"type":14,"tag":253,"props":550,"children":551},{"class":266},[552],{"type":20,"value":553},") ",{"type":14,"tag":253,"props":555,"children":556},{"class":260},[557],{"type":20,"value":525},{"type":14,"tag":253,"props":559,"children":560},{"class":266},[561],{"type":20,"value":530},{"type":14,"tag":253,"props":563,"children":564},{"class":316},[565],{"type":20,"value":566},"max-width",{"type":14,"tag":253,"props":568,"children":569},{"class":266},[570],{"type":20,"value":324},{"type":14,"tag":253,"props":572,"children":573},{"class":316},[574],{"type":20,"value":575},"991.99",{"type":14,"tag":253,"props":577,"children":578},{"class":260},[579],{"type":20,"value":334},{"type":14,"tag":253,"props":581,"children":582},{"class":266},[583],{"type":20,"value":382},{"type":14,"tag":253,"props":585,"children":586},{"class":255,"line":349},[587,591,595],{"type":14,"tag":253,"props":588,"children":589},{"class":266},[590],{"type":20,"value":391},{"type":14,"tag":253,"props":592,"children":593},{"class":296},[594],{"type":20,"value":299},{"type":14,"tag":253,"props":596,"children":597},{"class":266},[598],{"type":20,"value":304},{"type":14,"tag":253,"props":600,"children":601},{"class":255,"line":385},[602,607,611,615,619,623],{"type":14,"tag":253,"props":603,"children":604},{"class":266},[605],{"type":20,"value":606},"        ",{"type":14,"tag":253,"props":608,"children":609},{"class":316},[610],{"type":20,"value":319},{"type":14,"tag":253,"props":612,"children":613},{"class":266},[614],{"type":20,"value":324},{"type":14,"tag":253,"props":616,"children":617},{"class":316},[618],{"type":20,"value":404},{"type":14,"tag":253,"props":620,"children":621},{"class":260},[622],{"type":20,"value":334},{"type":14,"tag":253,"props":624,"children":625},{"class":266},[626],{"type":20,"value":280},{"type":14,"tag":253,"props":628,"children":629},{"class":255,"line":415},[630],{"type":14,"tag":253,"props":631,"children":632},{"class":266},[633],{"type":20,"value":634},"    }\n",{"type":14,"tag":253,"props":636,"children":637},{"class":255,"line":424},[638],{"type":14,"tag":253,"props":639,"children":640},{"class":266},[641],{"type":20,"value":430},{"type":14,"tag":29,"props":643,"children":644},{},[645,647,651,653,658,660,664,666,671],{"type":20,"value":646},"In this example, the font size of the ",{"type":14,"tag":75,"props":648,"children":649},{},[650],{"type":20,"value":299},{"type":20,"value":652}," element will be ",{"type":14,"tag":75,"props":654,"children":655},{},[656],{"type":20,"value":657},"16px",{"type":20,"value":659}," by default. However, when the screen size is at exactly equal to the ",{"type":14,"tag":75,"props":661,"children":662},{},[663],{"type":20,"value":377},{"type":20,"value":665}," breakpoint size, the font size will change to ",{"type":14,"tag":75,"props":667,"children":668},{},[669],{"type":20,"value":670},"20px",{"type":20,"value":672},".",{"type":14,"tag":211,"props":674,"children":676},{"id":675},"breakpoint-up-mixin",[677],{"type":20,"value":678},"Breakpoint-up Mixin",{"type":14,"tag":29,"props":680,"children":681},{},[682,683,688],{"type":20,"value":221},{"type":14,"tag":75,"props":684,"children":685},{},[686],{"type":20,"value":687},"breakpoint-up",{"type":20,"value":689}," mixin allows you to define styles that will be applied from a specific breakpoint size and up. The mixin takes a single argument, which is the name of the breakpoint you want to target. For example:",{"type":14,"tag":230,"props":691,"children":692},{},[693,850],{"type":14,"tag":234,"props":694,"children":695},{"v-slot:scss":7},[696],{"type":14,"tag":238,"props":697,"children":700},{"className":698,"code":699,"language":243,"meta":7},[241],"@import '@inkline/inkline/css/mixins';\n\n.my-class {\n  font-size: 16px;\n\n  @include breakpoint-up('md') {\n    font-size: 20px;\n  }\n}\n",[701],{"type":14,"tag":246,"props":702,"children":703},{},[704],{"type":14,"tag":238,"props":705,"children":706},{"__ignoreMap":7},[707,726,733,744,771,778,809,836,843],{"type":14,"tag":253,"props":708,"children":709},{"class":255,"line":256},[710,714,718,722],{"type":14,"tag":253,"props":711,"children":712},{"class":260},[713],{"type":20,"value":263},{"type":14,"tag":253,"props":715,"children":716},{"class":266},[717],{"type":20,"value":269},{"type":14,"tag":253,"props":719,"children":720},{"class":272},[721],{"type":20,"value":275},{"type":14,"tag":253,"props":723,"children":724},{"class":266},[725],{"type":20,"value":280},{"type":14,"tag":253,"props":727,"children":728},{"class":255,"line":283},[729],{"type":14,"tag":253,"props":730,"children":731},{},[732],{"type":20,"value":289},{"type":14,"tag":253,"props":734,"children":735},{"class":255,"line":292},[736,740],{"type":14,"tag":253,"props":737,"children":738},{"class":296},[739],{"type":20,"value":299},{"type":14,"tag":253,"props":741,"children":742},{"class":266},[743],{"type":20,"value":304},{"type":14,"tag":253,"props":745,"children":746},{"class":255,"line":307},[747,751,755,759,763,767],{"type":14,"tag":253,"props":748,"children":749},{"class":266},[750],{"type":20,"value":313},{"type":14,"tag":253,"props":752,"children":753},{"class":316},[754],{"type":20,"value":319},{"type":14,"tag":253,"props":756,"children":757},{"class":266},[758],{"type":20,"value":324},{"type":14,"tag":253,"props":760,"children":761},{"class":316},[762],{"type":20,"value":329},{"type":14,"tag":253,"props":764,"children":765},{"class":260},[766],{"type":20,"value":334},{"type":14,"tag":253,"props":768,"children":769},{"class":266},[770],{"type":20,"value":280},{"type":14,"tag":253,"props":772,"children":773},{"class":255,"line":341},[774],{"type":14,"tag":253,"props":775,"children":776},{},[777],{"type":20,"value":289},{"type":14,"tag":253,"props":779,"children":780},{"class":255,"line":349},[781,785,789,793,797,801,805],{"type":14,"tag":253,"props":782,"children":783},{"class":266},[784],{"type":20,"value":313},{"type":14,"tag":253,"props":786,"children":787},{"class":260},[788],{"type":20,"value":359},{"type":14,"tag":253,"props":790,"children":791},{"class":266},[792],{"type":20,"value":269},{"type":14,"tag":253,"props":794,"children":795},{"class":296},[796],{"type":20,"value":687},{"type":14,"tag":253,"props":798,"children":799},{"class":266},[800],{"type":20,"value":372},{"type":14,"tag":253,"props":802,"children":803},{"class":272},[804],{"type":20,"value":377},{"type":14,"tag":253,"props":806,"children":807},{"class":266},[808],{"type":20,"value":382},{"type":14,"tag":253,"props":810,"children":811},{"class":255,"line":385},[812,816,820,824,828,832],{"type":14,"tag":253,"props":813,"children":814},{"class":266},[815],{"type":20,"value":391},{"type":14,"tag":253,"props":817,"children":818},{"class":316},[819],{"type":20,"value":319},{"type":14,"tag":253,"props":821,"children":822},{"class":266},[823],{"type":20,"value":324},{"type":14,"tag":253,"props":825,"children":826},{"class":316},[827],{"type":20,"value":404},{"type":14,"tag":253,"props":829,"children":830},{"class":260},[831],{"type":20,"value":334},{"type":14,"tag":253,"props":833,"children":834},{"class":266},[835],{"type":20,"value":280},{"type":14,"tag":253,"props":837,"children":838},{"class":255,"line":415},[839],{"type":14,"tag":253,"props":840,"children":841},{"class":266},[842],{"type":20,"value":421},{"type":14,"tag":253,"props":844,"children":845},{"class":255,"line":424},[846],{"type":14,"tag":253,"props":847,"children":848},{"class":266},[849],{"type":20,"value":430},{"type":14,"tag":234,"props":851,"children":852},{"v-slot:output":7},[853],{"type":14,"tag":238,"props":854,"children":857},{"className":855,"code":856,"language":439,"meta":7},[437],".my-class {\n    font-size: 16px;\n}\n\n@media screen and (min-width: 768px) {\n    .my-class {\n        font-size: 20px;\n    }\n}\n",[858],{"type":14,"tag":246,"props":859,"children":860},{},[861],{"type":14,"tag":238,"props":862,"children":863},{"__ignoreMap":7},[864,875,902,909,916,963,978,1005,1012],{"type":14,"tag":253,"props":865,"children":866},{"class":255,"line":256},[867,871],{"type":14,"tag":253,"props":868,"children":869},{"class":296},[870],{"type":20,"value":299},{"type":14,"tag":253,"props":872,"children":873},{"class":266},[874],{"type":20,"value":304},{"type":14,"tag":253,"props":876,"children":877},{"class":255,"line":283},[878,882,886,890,894,898],{"type":14,"tag":253,"props":879,"children":880},{"class":266},[881],{"type":20,"value":391},{"type":14,"tag":253,"props":883,"children":884},{"class":316},[885],{"type":20,"value":319},{"type":14,"tag":253,"props":887,"children":888},{"class":266},[889],{"type":20,"value":324},{"type":14,"tag":253,"props":891,"children":892},{"class":316},[893],{"type":20,"value":329},{"type":14,"tag":253,"props":895,"children":896},{"class":260},[897],{"type":20,"value":334},{"type":14,"tag":253,"props":899,"children":900},{"class":266},[901],{"type":20,"value":280},{"type":14,"tag":253,"props":903,"children":904},{"class":255,"line":292},[905],{"type":14,"tag":253,"props":906,"children":907},{"class":266},[908],{"type":20,"value":492},{"type":14,"tag":253,"props":910,"children":911},{"class":255,"line":307},[912],{"type":14,"tag":253,"props":913,"children":914},{},[915],{"type":20,"value":289},{"type":14,"tag":253,"props":917,"children":918},{"class":255,"line":341},[919,923,927,931,935,939,943,947,951,955,959],{"type":14,"tag":253,"props":920,"children":921},{"class":260},[922],{"type":20,"value":507},{"type":14,"tag":253,"props":924,"children":925},{"class":266},[926],{"type":20,"value":269},{"type":14,"tag":253,"props":928,"children":929},{"class":316},[930],{"type":20,"value":516},{"type":14,"tag":253,"props":932,"children":933},{"class":266},[934],{"type":20,"value":269},{"type":14,"tag":253,"props":936,"children":937},{"class":260},[938],{"type":20,"value":525},{"type":14,"tag":253,"props":940,"children":941},{"class":266},[942],{"type":20,"value":530},{"type":14,"tag":253,"props":944,"children":945},{"class":316},[946],{"type":20,"value":535},{"type":14,"tag":253,"props":948,"children":949},{"class":266},[950],{"type":20,"value":324},{"type":14,"tag":253,"props":952,"children":953},{"class":316},[954],{"type":20,"value":544},{"type":14,"tag":253,"props":956,"children":957},{"class":260},[958],{"type":20,"value":334},{"type":14,"tag":253,"props":960,"children":961},{"class":266},[962],{"type":20,"value":382},{"type":14,"tag":253,"props":964,"children":965},{"class":255,"line":349},[966,970,974],{"type":14,"tag":253,"props":967,"children":968},{"class":266},[969],{"type":20,"value":391},{"type":14,"tag":253,"props":971,"children":972},{"class":296},[973],{"type":20,"value":299},{"type":14,"tag":253,"props":975,"children":976},{"class":266},[977],{"type":20,"value":304},{"type":14,"tag":253,"props":979,"children":980},{"class":255,"line":385},[981,985,989,993,997,1001],{"type":14,"tag":253,"props":982,"children":983},{"class":266},[984],{"type":20,"value":606},{"type":14,"tag":253,"props":986,"children":987},{"class":316},[988],{"type":20,"value":319},{"type":14,"tag":253,"props":990,"children":991},{"class":266},[992],{"type":20,"value":324},{"type":14,"tag":253,"props":994,"children":995},{"class":316},[996],{"type":20,"value":404},{"type":14,"tag":253,"props":998,"children":999},{"class":260},[1000],{"type":20,"value":334},{"type":14,"tag":253,"props":1002,"children":1003},{"class":266},[1004],{"type":20,"value":280},{"type":14,"tag":253,"props":1006,"children":1007},{"class":255,"line":415},[1008],{"type":14,"tag":253,"props":1009,"children":1010},{"class":266},[1011],{"type":20,"value":634},{"type":14,"tag":253,"props":1013,"children":1014},{"class":255,"line":424},[1015],{"type":14,"tag":253,"props":1016,"children":1017},{"class":266},[1018],{"type":20,"value":430},{"type":14,"tag":29,"props":1020,"children":1021},{},[1022,1023,1027,1028,1032,1034,1038,1039,1043],{"type":20,"value":646},{"type":14,"tag":75,"props":1024,"children":1025},{},[1026],{"type":20,"value":299},{"type":20,"value":652},{"type":14,"tag":75,"props":1029,"children":1030},{},[1031],{"type":20,"value":657},{"type":20,"value":1033}," by default. However, when the screen size is greater than or equal to the ",{"type":14,"tag":75,"props":1035,"children":1036},{},[1037],{"type":20,"value":377},{"type":20,"value":665},{"type":14,"tag":75,"props":1040,"children":1041},{},[1042],{"type":20,"value":670},{"type":20,"value":1044}," and stay that way for larger screen sizes.",{"type":14,"tag":211,"props":1046,"children":1048},{"id":1047},"breakpoint-down-mixin",[1049],{"type":20,"value":1050},"Breakpoint-down Mixin",{"type":14,"tag":29,"props":1052,"children":1053},{},[1054,1055,1060],{"type":20,"value":221},{"type":14,"tag":75,"props":1056,"children":1057},{},[1058],{"type":20,"value":1059},"breakpoint-down",{"type":20,"value":1061}," mixin allows you to define styles that will be applied up to a specific breakpoint size. The mixin takes a single argument, which is the name of the breakpoint you want to target. For example:",{"type":14,"tag":230,"props":1063,"children":1064},{},[1065,1223],{"type":14,"tag":234,"props":1066,"children":1067},{"v-slot:scss":7},[1068],{"type":14,"tag":238,"props":1069,"children":1072},{"className":1070,"code":1071,"language":243,"meta":7},[241],"@import '@inkline/inkline/css/mixins';\n\n.my-class {\n  font-size: 16px;\n\n  @include breakpoint-down('md') {\n    font-size: 12px;\n  }\n}\n",[1073],{"type":14,"tag":246,"props":1074,"children":1075},{},[1076],{"type":14,"tag":238,"props":1077,"children":1078},{"__ignoreMap":7},[1079,1098,1105,1116,1143,1150,1181,1209,1216],{"type":14,"tag":253,"props":1080,"children":1081},{"class":255,"line":256},[1082,1086,1090,1094],{"type":14,"tag":253,"props":1083,"children":1084},{"class":260},[1085],{"type":20,"value":263},{"type":14,"tag":253,"props":1087,"children":1088},{"class":266},[1089],{"type":20,"value":269},{"type":14,"tag":253,"props":1091,"children":1092},{"class":272},[1093],{"type":20,"value":275},{"type":14,"tag":253,"props":1095,"children":1096},{"class":266},[1097],{"type":20,"value":280},{"type":14,"tag":253,"props":1099,"children":1100},{"class":255,"line":283},[1101],{"type":14,"tag":253,"props":1102,"children":1103},{},[1104],{"type":20,"value":289},{"type":14,"tag":253,"props":1106,"children":1107},{"class":255,"line":292},[1108,1112],{"type":14,"tag":253,"props":1109,"children":1110},{"class":296},[1111],{"type":20,"value":299},{"type":14,"tag":253,"props":1113,"children":1114},{"class":266},[1115],{"type":20,"value":304},{"type":14,"tag":253,"props":1117,"children":1118},{"class":255,"line":307},[1119,1123,1127,1131,1135,1139],{"type":14,"tag":253,"props":1120,"children":1121},{"class":266},[1122],{"type":20,"value":313},{"type":14,"tag":253,"props":1124,"children":1125},{"class":316},[1126],{"type":20,"value":319},{"type":14,"tag":253,"props":1128,"children":1129},{"class":266},[1130],{"type":20,"value":324},{"type":14,"tag":253,"props":1132,"children":1133},{"class":316},[1134],{"type":20,"value":329},{"type":14,"tag":253,"props":1136,"children":1137},{"class":260},[1138],{"type":20,"value":334},{"type":14,"tag":253,"props":1140,"children":1141},{"class":266},[1142],{"type":20,"value":280},{"type":14,"tag":253,"props":1144,"children":1145},{"class":255,"line":341},[1146],{"type":14,"tag":253,"props":1147,"children":1148},{},[1149],{"type":20,"value":289},{"type":14,"tag":253,"props":1151,"children":1152},{"class":255,"line":349},[1153,1157,1161,1165,1169,1173,1177],{"type":14,"tag":253,"props":1154,"children":1155},{"class":266},[1156],{"type":20,"value":313},{"type":14,"tag":253,"props":1158,"children":1159},{"class":260},[1160],{"type":20,"value":359},{"type":14,"tag":253,"props":1162,"children":1163},{"class":266},[1164],{"type":20,"value":269},{"type":14,"tag":253,"props":1166,"children":1167},{"class":296},[1168],{"type":20,"value":1059},{"type":14,"tag":253,"props":1170,"children":1171},{"class":266},[1172],{"type":20,"value":372},{"type":14,"tag":253,"props":1174,"children":1175},{"class":272},[1176],{"type":20,"value":377},{"type":14,"tag":253,"props":1178,"children":1179},{"class":266},[1180],{"type":20,"value":382},{"type":14,"tag":253,"props":1182,"children":1183},{"class":255,"line":385},[1184,1188,1192,1196,1201,1205],{"type":14,"tag":253,"props":1185,"children":1186},{"class":266},[1187],{"type":20,"value":391},{"type":14,"tag":253,"props":1189,"children":1190},{"class":316},[1191],{"type":20,"value":319},{"type":14,"tag":253,"props":1193,"children":1194},{"class":266},[1195],{"type":20,"value":324},{"type":14,"tag":253,"props":1197,"children":1198},{"class":316},[1199],{"type":20,"value":1200},"12",{"type":14,"tag":253,"props":1202,"children":1203},{"class":260},[1204],{"type":20,"value":334},{"type":14,"tag":253,"props":1206,"children":1207},{"class":266},[1208],{"type":20,"value":280},{"type":14,"tag":253,"props":1210,"children":1211},{"class":255,"line":415},[1212],{"type":14,"tag":253,"props":1213,"children":1214},{"class":266},[1215],{"type":20,"value":421},{"type":14,"tag":253,"props":1217,"children":1218},{"class":255,"line":424},[1219],{"type":14,"tag":253,"props":1220,"children":1221},{"class":266},[1222],{"type":20,"value":430},{"type":14,"tag":234,"props":1224,"children":1225},{"v-slot:output":7},[1226],{"type":14,"tag":238,"props":1227,"children":1230},{"className":1228,"code":1229,"language":439,"meta":7},[437],".my-class {\n    font-size: 16px;\n}\n\n@media screen and (max-width: 991.99px) {\n    .my-class {\n        font-size: 12px;\n    }\n}\n",[1231],{"type":14,"tag":246,"props":1232,"children":1233},{},[1234],{"type":14,"tag":238,"props":1235,"children":1236},{"__ignoreMap":7},[1237,1248,1275,1282,1289,1336,1351,1378,1385],{"type":14,"tag":253,"props":1238,"children":1239},{"class":255,"line":256},[1240,1244],{"type":14,"tag":253,"props":1241,"children":1242},{"class":296},[1243],{"type":20,"value":299},{"type":14,"tag":253,"props":1245,"children":1246},{"class":266},[1247],{"type":20,"value":304},{"type":14,"tag":253,"props":1249,"children":1250},{"class":255,"line":283},[1251,1255,1259,1263,1267,1271],{"type":14,"tag":253,"props":1252,"children":1253},{"class":266},[1254],{"type":20,"value":391},{"type":14,"tag":253,"props":1256,"children":1257},{"class":316},[1258],{"type":20,"value":319},{"type":14,"tag":253,"props":1260,"children":1261},{"class":266},[1262],{"type":20,"value":324},{"type":14,"tag":253,"props":1264,"children":1265},{"class":316},[1266],{"type":20,"value":329},{"type":14,"tag":253,"props":1268,"children":1269},{"class":260},[1270],{"type":20,"value":334},{"type":14,"tag":253,"props":1272,"children":1273},{"class":266},[1274],{"type":20,"value":280},{"type":14,"tag":253,"props":1276,"children":1277},{"class":255,"line":292},[1278],{"type":14,"tag":253,"props":1279,"children":1280},{"class":266},[1281],{"type":20,"value":492},{"type":14,"tag":253,"props":1283,"children":1284},{"class":255,"line":307},[1285],{"type":14,"tag":253,"props":1286,"children":1287},{},[1288],{"type":20,"value":289},{"type":14,"tag":253,"props":1290,"children":1291},{"class":255,"line":341},[1292,1296,1300,1304,1308,1312,1316,1320,1324,1328,1332],{"type":14,"tag":253,"props":1293,"children":1294},{"class":260},[1295],{"type":20,"value":507},{"type":14,"tag":253,"props":1297,"children":1298},{"class":266},[1299],{"type":20,"value":269},{"type":14,"tag":253,"props":1301,"children":1302},{"class":316},[1303],{"type":20,"value":516},{"type":14,"tag":253,"props":1305,"children":1306},{"class":266},[1307],{"type":20,"value":269},{"type":14,"tag":253,"props":1309,"children":1310},{"class":260},[1311],{"type":20,"value":525},{"type":14,"tag":253,"props":1313,"children":1314},{"class":266},[1315],{"type":20,"value":530},{"type":14,"tag":253,"props":1317,"children":1318},{"class":316},[1319],{"type":20,"value":566},{"type":14,"tag":253,"props":1321,"children":1322},{"class":266},[1323],{"type":20,"value":324},{"type":14,"tag":253,"props":1325,"children":1326},{"class":316},[1327],{"type":20,"value":575},{"type":14,"tag":253,"props":1329,"children":1330},{"class":260},[1331],{"type":20,"value":334},{"type":14,"tag":253,"props":1333,"children":1334},{"class":266},[1335],{"type":20,"value":382},{"type":14,"tag":253,"props":1337,"children":1338},{"class":255,"line":349},[1339,1343,1347],{"type":14,"tag":253,"props":1340,"children":1341},{"class":266},[1342],{"type":20,"value":391},{"type":14,"tag":253,"props":1344,"children":1345},{"class":296},[1346],{"type":20,"value":299},{"type":14,"tag":253,"props":1348,"children":1349},{"class":266},[1350],{"type":20,"value":304},{"type":14,"tag":253,"props":1352,"children":1353},{"class":255,"line":385},[1354,1358,1362,1366,1370,1374],{"type":14,"tag":253,"props":1355,"children":1356},{"class":266},[1357],{"type":20,"value":606},{"type":14,"tag":253,"props":1359,"children":1360},{"class":316},[1361],{"type":20,"value":319},{"type":14,"tag":253,"props":1363,"children":1364},{"class":266},[1365],{"type":20,"value":324},{"type":14,"tag":253,"props":1367,"children":1368},{"class":316},[1369],{"type":20,"value":1200},{"type":14,"tag":253,"props":1371,"children":1372},{"class":260},[1373],{"type":20,"value":334},{"type":14,"tag":253,"props":1375,"children":1376},{"class":266},[1377],{"type":20,"value":280},{"type":14,"tag":253,"props":1379,"children":1380},{"class":255,"line":415},[1381],{"type":14,"tag":253,"props":1382,"children":1383},{"class":266},[1384],{"type":20,"value":634},{"type":14,"tag":253,"props":1386,"children":1387},{"class":255,"line":424},[1388],{"type":14,"tag":253,"props":1389,"children":1390},{"class":266},[1391],{"type":20,"value":430},{"type":14,"tag":29,"props":1393,"children":1394},{},[1395,1396,1400,1401,1405,1407,1411,1412,1417],{"type":20,"value":646},{"type":14,"tag":75,"props":1397,"children":1398},{},[1399],{"type":20,"value":299},{"type":20,"value":652},{"type":14,"tag":75,"props":1402,"children":1403},{},[1404],{"type":20,"value":657},{"type":20,"value":1406}," by default. However, when the screen size is less than or equal to the ",{"type":14,"tag":75,"props":1408,"children":1409},{},[1410],{"type":20,"value":377},{"type":20,"value":665},{"type":14,"tag":75,"props":1413,"children":1414},{},[1415],{"type":20,"value":1416},"12px",{"type":20,"value":1418}," and stay that way for smaller screen sizes.",{"type":14,"tag":211,"props":1420,"children":1422},{"id":1421},"conclusion",[1423],{"type":20,"value":1424},"Conclusion",{"type":14,"tag":29,"props":1426,"children":1427},{},[1428,1430,1434,1436,1440,1442,1446],{"type":20,"value":1429},"Inkline's breakpoints provide a simple and effective way to create responsive designs that adapt to different screen sizes. Whether you use the default breakpoints or define your own, the ",{"type":14,"tag":75,"props":1431,"children":1432},{},[1433],{"type":20,"value":226},{"type":20,"value":1435},", ",{"type":14,"tag":75,"props":1437,"children":1438},{},[1439],{"type":20,"value":687},{"type":20,"value":1441},", and ",{"type":14,"tag":75,"props":1443,"children":1444},{},[1445],{"type":20,"value":1059},{"type":20,"value":1447}," mixins make it easy to write responsive styles that look great on any device.",{"type":14,"tag":1449,"children":1450},"style",[1451],{"type":20,"value":1452},".ct-149352{color:#D73A49;}\n.dark-theme .ct-149352{color:#F97583;}\n.ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-617022{color:#005CC5;}\n.dark-theme .ct-617022{color:#79B8FF;}",{"title":7,"searchDepth":283,"depth":283,"links":1454},[1455],{"id":25,"depth":283,"text":9,"children":1456},[1457,1458,1459,1460],{"id":213,"depth":292,"text":216},{"id":675,"depth":292,"text":678},{"id":1047,"depth":292,"text":1050},{"id":1421,"depth":292,"text":1424},"markdown","content:docs:ui:breakpoints.md","content","docs/ui/breakpoints.md",1794582257737]