Permalink
Browse files

Code is more readable, some shorthands are added and some mixins remo…

…ved.

- indent properties and align values
- add mixing `margin()`, `padding()` and `border-width()`
- remove `lrswap2()`: no really critical use case & confusing
- `$rtl` has a default value
- prefer `$val` to `$value` and `$values`, more explicit
- tests are in a separate file
  • Loading branch information...
kaelig committed Oct 8, 2012
1 parent 199ae2e commit e6f25add2d1e27a71a0aef344119663d7bf0cf86
Showing with 349 additions and 387 deletions.
  1. +15 −8 css/ltr.css
  2. +17 −8 css/rtl.css
  3. +21 −21 ltr.html
  4. +2 −141 sass/_core.scss
  5. +141 −205 sass/_helpers.scss
  6. +146 −0 sass/_test.scss
  7. +3 −2 sass/ltr.scss
  8. +4 −2 sass/rtl.scss
View
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
margin: 0;
padding: 0; }
@@ -18,6 +19,9 @@ h1 {
background: #CCC;
position: relative; }
+/* ==========
+ * = Testing
+ * ========== */
/* background */
#background-position {
background-position: 8px 100px; }
@@ -110,6 +114,9 @@ h1 {
margin-right: 8px; }
/* padding */
+#padding-0-8px-16px-24px {
+ padding: 0 8px 16px 24px; }
+
#padding-left {
padding-left: 8px; }
@@ -127,10 +134,10 @@ h1 {
text-indent: 8px; }
/* 4 value swaps */
-#lrswap {
- padding: 0px 8px 16px 24px;
- margin: 0px 8px 16px 24px; }
-
-#lrswap2 {
- padding: 0px 8px 16px 24px;
- margin: 0px 8px 16px 24px; }
+#lrswap-0-8px-16px-24px {
+ /* Should return the same 2 values: */
+ padding: 0 8px 16px 24px;
+ padding: 0 8px 16px 24px;
+ /* Should return the same 2 values: */
+ margin: 0 8px 16px 24px;
+ margin: 0 8px 16px 24px; }
View
@@ -1,4 +1,7 @@
-html, body {
+@charset "UTF-8";
+/* Values should be inverted (left/right…) */
+html,
+body {
margin: 0;
padding: 0; }
@@ -18,6 +21,9 @@ h1 {
background: #CCC;
position: relative; }
+/* ==========
+ * = Testing
+ * ========== */
/* background */
#background-position {
background-position: -8px 100px; }
@@ -110,6 +116,9 @@ h1 {
margin-left: 8px; }
/* padding */
+#padding-0-8px-16px-24px {
+ padding: 0 24px 16px 8px; }
+
#padding-left {
padding-right: 8px; }
@@ -127,10 +136,10 @@ h1 {
text-indent: -8px; }
/* 4 value swaps */
-#lrswap {
- padding: 0px 24px 16px 8px;
- margin: 0px 24px 16px 8px; }
-
-#lrswap2 {
- padding: 0px 24px 16px 8px;
- margin: 0px 24px 16px 8px; }
+#lrswap-0-8px-16px-24px {
+ /* Should return the same 2 values: */
+ padding: 0 24px 16px 8px;
+ padding: 0 24px 16px 8px;
+ /* Should return the same 2 values: */
+ margin: 0 24px 16px 8px;
+ margin: 0 24px 16px 8px; }
View
@@ -1,37 +1,37 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
- <meta charset="utf-8"/>
- <title>LTR Sample Page</title>
- <link rel="stylesheet" href="css/ltr.css"/>
+ <meta charset="utf-8" />
+ <title>LTR Sample Page</title>
+ <link rel="stylesheet" href="css/ltr.css" />
</head>
<body>
- <div id="container">
- <h1>LTR Sample Page</h1>
+ <div id="container">
+ <h1>LTR Sample Page</h1>
- <h2>Background</h2>
+ <h2>Background</h2>
- <h2>Border</h2>
+ <h2>Border</h2>
- <h2>Direction</h2>
+ <h2>Direction</h2>
- <h2>Float</h2>
- <div id="float-origin-left" class="box">Float origin left</div>
- <div id="float-origin-right" class="box">Float origin right</div>
+ <h2>Float</h2>
+ <div id="float-origin-left" class="box">Float origin left</div>
+ <div id="float-origin-right" class="box">Float origin right</div>
- <h2>Clear</h2>
- <div id="clear-origin-left" class="box">Clear origin left</div>
- <div id="clear-origin-right" class="box">Clear origin right</div>
+ <h2>Clear</h2>
+ <div id="clear-origin-left" class="box">Clear origin left</div>
+ <div id="clear-origin-right" class="box">Clear origin right</div>
- <h2>Left/Right</h2>
+ <h2>Left/Right</h2>
- <h2>Margin</h2>
+ <h2>Margin</h2>
- <h2>Padding</h2>
+ <h2>Padding</h2>
- <h2>Text-align</h2>
+ <h2>Text-align</h2>
- <h2>Text-indent</h2>
- </div>
+ <h2>Text-indent</h2>
+ </div>
</body>
</html>
View
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
margin: 0;
padding: 0;
}
@@ -19,143 +20,3 @@ h1 {
position: relative;
}
-
-
-/* background */
-#background-position {
- @include background-position(8px 100px);
-}
-#background-position-left {
- @include background-position(left 100px);
-}
-#background-position-right {
- @include background-position(right 100px);
-}
-#background-position-center {
- @include background-position(center 100px);
-}
-
-#background-5-left {
- @include background(#FFF url(img.ext) no-repeat left center);
-}
-#background-4-left {
- @include background(url(img.ext) no-repeat left center);
-}
-#background-5-right {
- @include background(#FFF url(img.ext) no-repeat right center);
-}
-#background-4-right {
- @include background(url(img.ext) no-repeat right center);
-}
-#background-5-center {
- @include background(#FFF url(img.ext) no-repeat center center);
-}
-#background-4-center {
- @include background(url(img.ext) no-repeat center center);
-}
-#background-5 {
- @include background(#FFF url(img.ext) no-repeat 8px center);
-}
-#background-4 {
- @include background(url(img.ext) no-repeat 8px center);
-}
-
-
-/* border */
-#border-left {
- @include border-left(1px solid #FFF);
-}
-#border-right {
- @include border-right(1px solid #FFF);
-}
-
-
-/* border-radius */
-#border-top-left-radius {
- @include border-top-left-radius(2px);
-}
-#border-top-right-radius {
- @include border-top-right-radius(2px);
-}
-#border-bottom-left-radius {
- @include border-bottom-left-radius(2px);
-}
-#border-bottom-right-radius {
- @include border-bottom-right-radius(2px);
-}
-
-
-/* clear */
-#clear-origin-left {
- @include float(left);
- @include clear(left);
-}
-#clear-origin-right {
- @include float(right);
- @include clear(right);
-}
-
-
-/* direction */
-#direction {
- @include direction;
-}
-
-
-/* float */
-#float-origin-left {
- @include float(left);
-}
-#float-origin-right {
- @include float(right);
-}
-
-
-/* position */
-#left {
- @include left(8px);
-}
-#right {
- @include right(8px);
-}
-
-
-/* margin */
-#margin-left {
- @include margin-left(8px);
-}
-#margin-right {
- @include margin-right(8px);
-}
-
-
-/* padding */
-#padding-left {
- @include padding-left(8px);
-}
-#padding-right {
- @include padding-right(8px);
-}
-
-
-/* text */
-#text-align-left {
- @include text-align(left);
-}
-#text-align-right {
- @include text-align(right);
-}
-#text-indent {
- @include text-indent(8px);
-}
-
-
-/* 4 value swaps */
-#lrswap {
- @include lrswap(padding, 0px 8px 16px 24px);
- @include lrswap(margin, 0px 8px 16px 24px);
-}
-#lrswap2 {
- @include lrswap2(padding, 0px, 8px, 16px, 24px);
- @include lrswap2(margin, 0px, 8px, 16px, 24px);
-}
Oops, something went wrong.

0 comments on commit e6f25ad

Please sign in to comment.