Converted ResponsiveLayout.md
diff --git a/ResponsiveLayout.wiki b/ResponsiveLayout.md similarity index 95% rename from ResponsiveLayout.wiki rename to ResponsiveLayout.md index 35fd51c..108c4d7 100644 --- a/ResponsiveLayout.wiki +++ b/ResponsiveLayout.md
@@ -1,6 +1,3 @@ -#summary How Melange's Responsive Layout works - - For now we are using 4 breakpoints for 4 different type of screen, it's the default breakpoints of bootstrap framework. Bootstrap framework is mobile-first based, therefore we will not violate this concept. * Extra small devices - Phones (<768px) @@ -17,11 +14,11 @@ * Medium devices -> @screen-md-min * Large devices -> @screen-lg-min -We should define all common styles for any element for without any breakpoint (by default it's will be applied for all screen) and we must use media-queries for override or add custom properties to selector. +We should define all common styles for any element for without any breakpoint (by default it's will be applied for all screen) and we must use media-queries for override or add custom properties to selector. For example, our-block.less: -{{{ +``` /* it will be applied for all screen sizes, it will be block 100% width and 100% height parent block and have red background */ .our-block { @@ -47,4 +44,4 @@ } /* in result we will have 200x200 only on screens where width ≥ 768 < 992 for rest (medium, large) we have previous values (150x150) */ -}}} \ No newline at end of file +``` \ No newline at end of file