reduce magic number on sass modules, fully use markdown on module page

suitmedia · Jul 4, 2017 · 542d288 · 542d288
1 parent 8c7855d
commit 542d288
Show file tree

Hide file tree

Showing 39 changed files with 76 additions and 329 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/dev/sass/main.scss b/dev/sass/main.scss
@@ -54,8 +54,8 @@ a {
 
 
 .container {
-    width: 95%;
-    max-width: 1024px;
+    width: 90%;
+    max-width: 900px;
     margin: 0 auto;
 }
 
@@ -70,20 +70,19 @@ a {
 }
 
 .box {
-    margin: 210px 0 30px 0;
+    margin: ($space * 10) 0 $space 0;
     position: relative;
     z-index: 1;
-    min-height: 65vh;
     background: $white;
-    padding: 32px 12px;
+    padding: $space $space/2;
 
     .container {
-        max-width: 860px;
+        max-width: 800px;
     }
 
     @media #{$large} {
-        margin: 150px 0 30px 0;
-        padding: 56px 0;
+        margin: ($space * 7) 0 ($space * 2) 0;
+        padding: ($space * 2) 0;
     }
 }
 

diff --git a/dev/sass/modules/_header.scss b/dev/sass/modules/_header.scss
@@ -2,10 +2,10 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	padding: 32px 0;
+	padding: ($space * 2) 0;
 	z-index: 1;
 	width: 100%;
-	min-height: 45vh;
+	min-height: $space * 14;
 	background: $orange;
 	box-sizing: border-box;
 }
@@ -24,10 +24,9 @@
 	}
 }
 
-.header-title--container {
+.header-title-container {
 	position: relative;
 	text-align: center;
-	margin: 20px 0 0 0;
 
 	@media #{$large} {
 		float: right;
@@ -47,10 +46,10 @@
 
 .header-title {
 	color: $white;
-	margin-bottom: 0px;
+	margin-bottom: 0;
 	font-weight: 300;
 
-	&.--sub {
+	&.header-title--sub {
 		font-weight: 400;
 	}
 }
diff --git a/dev/sass/modules/_highlight.scss b/dev/sass/modules/_highlight.scss
@@ -74,4 +74,5 @@
 }
 pre {
     background: #1d1f21;
+    padding: $space;
 }
diff --git a/dev/sass/modules/_home.scss b/dev/sass/modules/_home.scss
@@ -1,12 +1,13 @@
 .home-quote {
 	position: relative;
 	margin: 0;
-	font-size: 1.3em;
+	margin-bottom: $space * 2.5;
+	font-size: $base_font_size * 1.3;
 	text-align: center;
 
 	&:after {
 		position: absolute;
-		bottom: -24px;
+		bottom: -($space);
 		left: 50%;
 		width: 56px;
 		height: 1px;
@@ -57,66 +58,63 @@
 .home-links {
 	display: flex;
 	flex-wrap: wrap;
-	margin: 0 12%;
-	margin-top: 80px;
 	justify-content: center;
 
 	@media #{$large} {
-		justify-content: space-between;
+		justify-content: space-around;
 	}
 }
 
-.home-links--item {
-	display: inline-block;
-	margin-bottom: 20px;
-	min-width: 280px;
-	line-height: 56px;
-	font-size: 1.5em;
-	font-weight: 700;
-	white-space: nowrap;
+.home-links-item {
+	margin-bottom: $space;
+	width: 100%;
 
 	@media #{$large} {
-		min-width: 300px;
+		width: 40%;
 	}
 }
 
-.home-links--icon {
+.home-links-anchor {
+	display: block;
+	line-height: $base_line_height * 1.5;
+	font-size: $base_font_size * 1.5;
+	font-weight: 700;
+	white-space: nowrap;
+}
+
+.home-links-icon {
 	display: inline-block;
 	width: 56px;
 	height: 56px;
-	margin-right: 4px;
+	margin-right: $space / 4;
 	border-radius: 100px;
 	background: $black;
 	text-align: center;
 	color: $white;
 	transition: all 0.2s ease;
 
-	.home-links--item:hover & {
+	.home-links-item:hover & {
 		background: $orange;
 	}
-
-	@media #{$large} {
-		margin-right: 12px;
-	}
 }
 
-.home-links--name {
+.home-links-name {
 	position: relative;
 	display: inline-block;
 
 	&:after {
+		content: '';
 		position: absolute;
-		bottom: 5px;
+		top: $space * 1.5;
 		left: 0;
 		width: 100%;
 		height: 1px;
 		background: $orange;
-		content: '';
 		transform: scaleX(0);
 		transform-origin: left;
 		transition: all 0.4s ease;
 
-		.home-links--item:hover & {
+		.home-links-item:hover & {
 			transform: scaleX(1);
 		}
 	}

diff --git a/dev/sass/modules/_section.scss b/dev/sass/modules/_section.scss
@@ -10,7 +10,7 @@
     padding: 12px 0;
     text-align: center;
     background: $black;
-    border-radius: 300px;
+    border-radius: 100px;
     color: $white;
     transition: all 0.4s ease;
 
@@ -46,19 +46,19 @@ code {
 }
 
 .section {
-    margin-bottom: 56px;
+    margin-bottom: $space * 3;
 
     &:last-child {
         margin-bottom: 0;
     }
 
     h2 {
         position: relative;
-        margin-bottom: 36px;
+        margin-bottom: $space * 1.5;
 
         &:after {
             position: absolute;
-            bottom: -16px;
+            bottom: -($space / 1.5);
             left: 0;
             width: 72px;
             height: 1px;

diff --git a/home.html b/home.html
@@ -8,28 +8,28 @@
         </footer>
     </blockquote>
     <ul class="home-links list-nostyle">
-        <li>
-            <a class="home-links--item" href="#!html">
-                <span class="home-links--icon"><i class="fa fa-code"></i></span>
-                <span class="home-links--name">HTML Guideline</span>
+        <li class="home-links-item">
+            <a class="home-links-anchor" href="#!html">
+                <span class="home-links-icon"><i class="fa fa-code"></i></span>
+                <span class="home-links-name">HTML Guideline</span>
             </a>
         </li>
-        <li>
-            <a class="home-links--item" href="#!css">
-                <span class="home-links--icon">CSS</span>
-                <span class="home-links--name">CSS/SASS Guideline</span>
+        <li class="home-links-item">
+            <a class="home-links-anchor" href="#!css">
+                <span class="home-links-icon">CSS</span>
+                <span class="home-links-name">CSS/SASS Guideline</span>
             </a>
         </li>
-        <li>
-            <a class="home-links--item" href="#!js">
-                <span class="home-links--icon">JS</span>
-                <span class="home-links--name">JavaScript Guideline</span>
+        <li class="home-links-item">
+            <a class="home-links-anchor" href="#!js">
+                <span class="home-links-icon">JS</span>
+                <span class="home-links-name">JavaScript Guideline</span>
             </a>
         </li>
-        <li>
-            <a class="home-links--item" href="#!tools">
-                <span class="home-links--icon"><i class="fa fa-wrench"></i></span>
-                <span class="home-links--name">Tools &amp; Plugins</span>
+        <li class="home-links-item">
+            <a class="home-links-anchor" href="#!tools">
+                <span class="home-links-icon"><i class="fa fa-wrench"></i></span>
+                <span class="home-links-name">Tools &amp; Plugins</span>
             </a>
         </li>
     </ul>

diff --git a/index.html b/index.html
@@ -40,9 +40,9 @@
             <a href="#!">
                 <img class="logo" src="assets/img/logo.png">
             </a>
-            <div class="header-title--container">
+            <div class="header-title-container">
                 <h2 class="header-title">front-end styleguides</h1>
-                <h1 class="header-title --sub ng-cloak">{{ $route.current.scope.pageHeader }}</h1>
+                <h1 class="header-title header-title--sub ng-cloak">{{ $route.current.scope.pageHeader }}</h1>
             </div>
         </div>
     </header>
@@ -51,7 +51,7 @@ <h1 class="header-title --sub ng-cloak">{{ $route.current.scope.pageHeader }}</h
         <div class="main-background"></div>
         <div class="container">
             <div class="box">
-                <a class="back-button" href="#!" ng-show="$route.current.scope.sectionNumber">
+                <a class="back-button ng-cloak" href="#!" ng-show="$route.current.scope.sectionNumber">
                     <i class="fa fa-angle-left fa-2x"></i>
                     <i class="fa fa-angle-left fa-2x"></i>
                 </a>

diff --git a/module/css1.html b/module/css1.html
@@ -1,6 +1,4 @@
 ## CSS Declaration
-<div class="bzg">
-<div class="bzg_c" data-col="l5" data-sticky>
 
 Urutan deklarasi properti CSS adalah:
 1. Mixin
@@ -13,8 +11,6 @@
 8. Pseudo class
 9. Media Queries
 
-</div>
-<div class="bzg_c" data-col="l7" data-sticky>
 
 ```css
 selector {
@@ -74,5 +70,3 @@
     }
 }
 ```
-
-</div>
diff --git a/module/css10.html b/module/css10.html
@@ -1,13 +1,7 @@
 ## Don't use BEM SCSS shortcut
 
-<div class="bzg">
-<div class="bzg_c" data-col="l5" data-sticky>
-
 Memang memudahkan jadi tidak perlu menulis berulang-ulang, namun itu membuat file .scss susah untuk di index/search dan akan merepotkan developer penerus.
 
-</div>
-<div class="bzg_c" data-col="l7" data-sticky>
-
 ```
 /* NO! */
 .highlight {
@@ -35,6 +29,3 @@
     ...
 }
 ```
-
-</div>
-</div>
diff --git a/module/css11.html b/module/css11.html
@@ -1,16 +1,11 @@
 ## Don't use CSS @import
-<div class="bzg">
-<div class="bzg_c" data-col="l5" data-sticky>
 
 Alasan kenapa jangan menggunakan CSS `@import` adalah:
 
 * File CSS yang dipanggil via @import tidak di cache di browser.
 * File CSS yang dipanggil via @import tidak dapat didownload oleh browser secara paralel.
 * Mengurangi performance web.
 
-</div>
-
-<div class="bzg_c" data-col="l7" data-sticky>
 
 ```
 /* NO! */
@@ -21,6 +16,3 @@
 &lt;link rel="stylesheet" href="hello.css"&gt;
 &lt;!-- or use scss import -->
 ```
-
-</div>
-</div>
diff --git a/module/css12.html b/module/css12.html
@@ -1,6 +1,4 @@
 ## Use transform and opacity for high performance animation
-<div class="bzg">
-<div class="bzg_c" data-col="l5" data-sticky>
 
 Untuk membuat animasi contoh pada saat image di hover, image membesar, jangan gunakan width dan height.
 Gunakan property `transform` agar dapat dirender menggunakan GPU, bukan CPU. Pada dasarnya, untuk mendapatkan high performance animation, gunakan:
@@ -10,8 +8,6 @@
 * Rotate
 * Opacity
 
-</div>
-<div class="bzg_c" data-col="l7" data-sticky>
 
 ```css
 /* NO! */
@@ -35,5 +31,3 @@
     }
 }
 ```
-</div>
-</div>
diff --git a/module/css2.html b/module/css2.html
@@ -1,13 +1,7 @@
 ## Avoid deep nesting
 
-<div class="bzg">
-<div class="bzg_c" data-col="l5" data-sticky>
-
 Maksimal nesting adalah 3 level, lebih dari itu hindari. Nesting level paling akhir apabila adalah Pseudo Class atau Pseudo Element diperbolehkan.
 
-</div>
-<div class="bzg_c" data-col="l7" data-sticky>
-
 ```css
 // Bad
 ul {
@@ -39,6 +33,3 @@
     }
 }
 ```
-
-</div>
-</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -74,4 +74,5 @@ @@
     }
     pre {
         background: #1d1f21;
+        padding: $space;
     }