Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

reponsive.less 1.0

  • Loading branch information...
commit 9c19edcc4f35c4d2965d41746725ccb10f627da1 1 parent 494f271
@paulmist authored
Showing with 96 additions and 18 deletions.
  1. +49 −4 responsive.less
  2. +47 −14 styles.less
View
53 responsive.less
@@ -1,13 +1,18 @@
/*
-Responsive Less
+Responsive.less
+Author: Paul Mist
+Twitter: @paulmist
*/
-.width(@target: 100px, @context:100px){
+//Convert px based width to %
+
+.width(@context:100px, @target: 100px){
@percent: (@target/@context)*100;
- @percent-fixed: ~`@{percent}.toFixed(2) + "%"`;
- width: @percent-fixed;
+ width: ~`Number(@{percent}).toFixed(2) + "%"`;
}
+//Convert px based padding (shorthand) to %
+
.padding(@context, @top: 0, @right: 0, @bottom: 0, @left: 0){
@top-percent: (@top/@context)*100;
@right-percent: (@right/@context)*100;
@@ -16,10 +21,50 @@ Responsive Less
padding: ~`Number(@{top-percent}).toFixed(2) + "% " + Number(@{right-percent}).toFixed(2) + "% " + Number(@{bottom-percent}).toFixed(2) + "% " + Number(@{left-percent}).toFixed(2) + "%"`;
}
+//Convert px based padding to %
+
+.padding-top(@context, @top: 0){
+ @percent:(@top/@context)*100;
+ padding-top: ~`Number(@{percent}).toFixed(2) + "%"`;
+}
+.padding-right(@context, @right: 0){
+ @percent:(@right/@context)*100;
+ padding-right: ~`Number(@{percent}).toFixed(2) + "%"`;
+}
+.padding-bottom(@context, @bottom: 0){
+ @percent:(@bottom/@context)*100;
+ padding-bottom: ~`Number(@{percent}).toFixed(2) + "%"`;
+}
+.padding-left(@context, @left: 0){
+ @percent:(@left/@context)*100;
+ padding-left: ~`Number(@{percent}).toFixed(2) + "%"`;
+}
+
+//Convert px based margin (shorthand) to %
+
.margin(@context, @top: 0, @right: 0, @bottom: 0, @left: 0){
@top-percent: (@top/@context)*100;
@right-percent: (@right/@context)*100;
@bottom-percent: (@bottom/@context)*100;
@left-percent: (@left/@context)*100;
margin: ~`Number(@{top-percent}).toFixed(2) + "% " + Number(@{right-percent}).toFixed(2) + "% " + Number(@{bottom-percent}).toFixed(2) + "% " + Number(@{left-percent}).toFixed(2) + "%"`;
+}
+
+//Convert px based margin to %
+
+.margin-top(@context, @top: 0){
+ @percent:(@top/@context)*100;
+ margin-top: ~`Number(@{percent}).toFixed(2) + "%"`;
+}
+.margin-right(@context, @right: 0){
+ @percent:(@right/@context)*100;
+ margin-right: ~`Number(@{percent}).toFixed(2) + "%"`;
+}
+.margin-bottom(@context, @bottom: 0){
+ @percent:(@bottom/@context)*100;
+ margin-bottom: ~`Number(@{percent}).toFixed(2) + "%"`;
+}
+.margin-left(@context, @left: 0){
+ @percent:(@left/@context)*100;
+ margin-left: ~`Number(@{percent}).toFixed(2) + "%"`;
}
View
61 styles.less
@@ -1,20 +1,53 @@
@import 'responsive.less';
-h1{
- border: 1px solid red;
- color: red;
+/*
+EXAMPLE USAGE
+-------------
+
+--- .width() ---
+
+Convert px based width to %
+where 480px is our desired element width
+and 960px is the context in which it
+sits, or it parent's width -
+
+#div{
+ .width(960, 480);
+}
+
+--- .padding() ---
+
+Convert px based padding to %
+where 10px (the usual 'top right bottom left' order applies)
+is our desired element's padding
+and 480px is the element width
+
+#div{
+ .padding(480, 10, 10, 10, 10);
}
-#wrapper{
- width: 80%;
- margin: 0 auto;
- background: #ddd;
+Individual properties are also available e.g.
+
+#div{
+ .padding-left(480, 10);
+}
+
+--- .margin() ---
+
+Convert px based margin to %
+where 10px (the usual 'top right bottom left' order applies)
+is our desired element's margin
+and 480px is the context in which it
+sits, or it parent's width -
+
+#div{
+ .margin(480, 10, 10, 10, 10);
+}
+
+Individual properties are also available e.g.
+
+#div{
+ .margin-left(480, 10);
}
-#box{
- .width(400, 960);
- .padding(400, 20, 4, 4,4);
- .margin(960, 10, 96, 10, 10);
- background: #ccc;
- border: 1px solid red;
-}
+*/
Please sign in to comment.
Something went wrong with that request. Please try again.