Created wiki page through web user interface, copying from an email from Denys.
diff --git a/ResponsiveLayout.wiki b/ResponsiveLayout.wiki
new file mode 100644
index 0000000..35fd51c
--- /dev/null
+++ b/ResponsiveLayout.wiki
@@ -0,0 +1,50 @@
+#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)
+ * Small devices - Tablets (≥768px)
+ * Medium devices - Desktops (≥992px)
+ * Large devices - Desktops (≥1200px)
+
+Documentation: http://getbootstrap.com/css/#responsive-utilities
+
+In LESS files we can use this breakpoints as variables together with media-queries.
+
+ * Extra small devices -> @screen-xs
+ * Small devices -> @screen-sm-min
+ * 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.
+
+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 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background-color: red;
+}
+/* it will be applied to all screen starting from small devices where screen width ≥ 768px */
+@media (min-width: @screen-sm-min) {
+.our-block {
+ width: 150px;
+ height: 150px;
+}
+}
+
+/* if we want to set property only for one breakpoint we should set up min-width and max-width */
+@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+.our-block {
+ width: 200px;
+ height: 200px;
+}
+}
+/* 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
