Optimize some code

Author: moyus

README.md

@@ -1,6 +1,11 @@
 #Point
 A flexible CSS Framework for building modern responsive web apps.
 
+- Built with Flexbox
+- Mobile-First
+- BEM, Namespaces, Modular, Beautiful code
+- 14KB gzipped
+
 ## Setup
 There are two ways to start
 
@@ -23,7 +28,7 @@ yarn
 ```
 
 ### 2. Override variables
-All initial variables are located in `src/_vars.scss`.
+All initial variables are located in `scss/_vars.scss`.
 
 ### 3. Compile
 Run the command below to start compiling your own customized **Point**, you can

dist/point.css

@@ -1,3 +1,10 @@
+/*
+ * Point
+ * version: 0.8.4
+ * url: http://getpoint.io
+ * Copyright 2017 moyu
+ * Licensed under MIT (https://github.com/moyus/point/blob/master/LICENSE)
+ */
 /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 /**
  * 1. Change the default font family in all browsers (opinionated).
@@ -524,7 +531,7 @@ hr {
   margin: 32px 0;
   height: 0;
   border: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid #e5e5e5;
   box-sizing: content-box;
 }
 
@@ -1635,7 +1642,7 @@ abbr[title] {
 .form-select[disabled],
 .form-textarea[readonly],
 .form-textarea[disabled] {
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
   opacity: 1;
 }
 
@@ -1758,7 +1765,7 @@ input[type="checkbox"].form-checkbox:checked:after {
 label.form-checkbox input[type="checkbox"]:disabled,
 input[type="checkbox"].form-checkbox:disabled {
   opacity: 0.75;
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
 }
 
 label.form-checkbox {
@@ -1783,7 +1790,7 @@ label.form-checkbox.is-disabled {
 
 label.form-checkbox.is-disabled input {
   pointer-events: none;
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
 }
 
 label.form-radio input[type="radio"],
@@ -1822,7 +1829,7 @@ input[type="radio"].form-radio:checked:after {
 label.form-radio input[type="radio"]:disabled,
 input[type="radio"].form-radio:disabled {
   opacity: 0.75;
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
 }
 
 label.form-radio {
@@ -1847,7 +1854,7 @@ label.form-radio.is-disabled {
 
 label.form-radio.is-disabled input {
   pointer-events: none;
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
 }
 
 input[type="checkbox"].form-switch {
@@ -2036,7 +2043,7 @@ input[type="checkbox"].form-switch:checked:after {
   font-size: 14px;
   border: 1px solid #ccc;
   border-radius: 3px;
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
 }
 
 .form-static {
@@ -2738,11 +2745,11 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
 }
 
 .table--striped tbody tr:nth-of-type(odd) {
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
 }
 
 .table--hover tbody tr:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f5f5f5;
 }
 
 @media (max-width: 1024px) {
@@ -2753,7 +2760,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
     display: block;
   }
   .table--responsive tr:not(:last-child) {
-    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 3px solid #e5e5e5;
   }
   .table--responsive th, .table--responsive td {
     display: block;
@@ -2777,7 +2784,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
   font-size: 12px;
   line-height: 1;
   color: #333333;
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
   text-align: center;
   vertical-align: middle;
   padding: 4px 8px;
@@ -3021,15 +3028,15 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
 }
 
 .progress[value] {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #f5f5f5;
 }
 
 .progress[value]::-moz-progress-bar {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #f5f5f5;
 }
 
 .progress[value]::-webkit-progress-bar {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: #f5f5f5;
 }
 
 .progress[value]::-moz-progress-value {
@@ -3473,7 +3480,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
   margin-bottom: 32px;
   color: #333333;
   border: 1px solid #ddd;
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
 }
 
 .c-note.has-close {
@@ -3530,7 +3537,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
   color: #333333;
   line-height: 1.2;
   padding: 8px 16px;
-  background-color: #f2f2f2;
+  background-color: #f5f5f5;
   border: 1px solid #ddd;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
@@ -3621,7 +3628,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
 .c-list__item.is-disabled,
 .c-list__link.is-disabled {
   cursor: not-allowed;
-  color: rgba(51, 51, 51, 0.5);
+  opacity: .65;
 }
 
 .c-list__link {
@@ -3630,13 +3637,13 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
 }
 
 .c-list__link:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f5f5f5;
 }
 
 .c-list__link.is-active {
-  color: #fff;
-  background-color: #7872ff !important;
-  border-color: #7872ff !important;
+  color: #fff !important;
+  background-color: #7872ff !important !important;
+  border-color: #7872ff !important !important;
   z-index: 2;
 }
 
@@ -3731,7 +3738,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
 }
 
 .c-nav--menus > .c-nav__item > .c-nav__link:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f5f5f5;
 }
 
 .c-nav--menus > .c-nav__item > .c-nav__link.is-active {
@@ -3743,7 +3750,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
   height: 1px;
   margin-top: 4px;
   margin-bottom: 4px;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: #e5e5e5;
 }
 
 .c-nav--pills {
@@ -3763,7 +3770,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
 }
 
 .c-nav--pills > .c-nav__item > .c-nav__link:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f5f5f5;
 }
 
 .c-nav--pills > .c-nav__item > .c-nav__link.is-active {
@@ -3785,14 +3792,14 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
 }
 
 .c-nav--tabs > .c-nav__item > .c-nav__link {
-  color: #333333;
+  color: #888888;
   padding: 6px 12px;
   border-radius: 3px 3px 0 0;
   border: 1px solid transparent;
 }
 
 .c-nav--tabs > .c-nav__item > .c-nav__link:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f5f5f5;
 }
 
 .c-nav--tabs > .c-nav__item .c-nav__link.is-active {
@@ -3897,7 +3904,6 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
   margin: 0;
   padding: 0;
   list-style: none;
-  font-size: 14px;
   color: #888888;
 }
 
@@ -3948,6 +3954,10 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
   z-index: 400;
 }
 
+.c-drop__content--always {
+  display: block;
+}
+
 .c-drop__content--topStart {
   top: auto;
   right: auto;
@@ -4067,14 +4077,15 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
   min-width: 34px;
   font-size: 14px;
   line-height: 1.42857143;
+  color: #0073AA;
   padding: 6px 12px;
   border-radius: 3px;
   border: 1px solid transparent;
   background-color: #fff;
 }
 
 .c-pagination__item:hover {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: #f5f5f5;
 }
 
 .c-pagination__item.is-active {
@@ -4086,7 +4097,9 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
 }
 
 .c-pagination__item.is-disabled {
-  color: #888888;
+  color: rgba(0, 115, 170, 0.65);
+  cursor: not-allowed;
+  background-color: #fff;
 }
 
 .c-pagination--bordered .c-pagination__item {
@@ -4110,7 +4123,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
 }
 
 .c-pagination--bordered .c-pagination__item.is-disabled {
-  background-color: #f7f7f7;
+  background-color: #f5f5f5;
 }
 
 .c-pagination--sm .c-pagination__item {
@@ -4189,7 +4202,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
       -ms-flex-align: center;
           align-items: center;
   padding: 16px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid #e5e5e5;
 }
 
 .c-modalCard__header::after {
@@ -4234,7 +4247,7 @@ fieldset[disabled] .btn--warning.btn--outline.is-active {
   -ms-flex-negative: 0;
       flex-shrink: 0;
   padding: 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid #e5e5e5;
   text-align: right;
 }
 

dist/point.min.css

@@ -25,9 +25,9 @@
           <!-- END .c-navbar__left -->
           <div class="c-navbar__right is-auto">
             <a href="{{site.url}}getting-started" class="c-navbar__item">Documentation</a>
-            <a href="https://github.com/moyus/point" class="c-navbar__item">Github</a>
+            <a href="{{site.github}}" class="c-navbar__item">Github</a>
             <div class="c-navbar__item">
-              <a href="https://github.com/moyus/point" class="btn btn--outline btn--primary">Download</a>
+              <a href="{{site.download}}" class="btn btn--outline btn--primary">Download</a>
             </div>
           </div>
           <!-- END .c-navbar__right -->
@@ -47,8 +47,8 @@
     </div>
     <!-- END .docs-l-content -->
     <footer id="colophon" class="docs-l-footer" role="contentinfo">
-      <p>Designed and built by <a href="http://liuxinyu.me">moyu</a></p>
-      <p>Licensed under the <a href="https://github.com/moyus/point.css/blob/master/LICENSE">MIT License</a>.</p>
+      <p>Designed and built by <a href="{{site.author}}">moyu</a></p>
+      <p>Licensed under the <a href="{{site.license}}">MIT License</a>.</p>
     </footer>
   </div>
   <script src="{{site.url}}js/main.js"></script>

docs/_templates/default.njk

@@ -1,6 +1,6 @@
 <nav id="sidenav" class="docs-c-sidenav">
   <ul class="docs-c-sidenav__group">
-    <li class="docs-c-sidenav__label">Get started</li>
+    <li class="docs-c-sidenav__label">Getting started</li>
     <li class="docs-c-sidenav__item">
       <a href="{{site.url}}getting-started/index.html#introduction" class="docs-c-sidenav__link">Introduction</a>
     </li>

docs/_templates/menus.html

@@ -8,7 +8,7 @@ title: "Note"
 - [Types](#types)
 
 ## Basic
-Note component provide prompt messages in a page for users to take note.
+Note component provide prompt messages in a page for users to take notice.
 
 <div class="c-note has-close">
   <a role="button" class="c-note__close">

docs/assets/images/logo-head.png

@@ -2,7 +2,12 @@
   "site": {
     "title": "Point",
     "url": "/",
+    "version": "0.8.4",
     "description": "A flexible CSS Framework for building modern responsive web apps",
-    "keywords": "css,sass,flexbox,responsive,front-end,mobile-first,framework,web"
+    "keywords": "css,sass,flexbox,responsive,front-end,mobile-first,framework,web",
+    "download": "https://github.com/moyus/point/releases",
+    "github": "https://github.com/moyus/point",
+    "license": "https://github.com/moyus/point.css/blob/master/LICENSE",
+    "author": "http://moyu.io"
   }
 }

docs/assets/images/logo.svg

@@ -3,9 +3,16 @@ layout: default
 title: "Getting started"
 ---
 
+# Getting started
+
 ## Introduction
 Point is a flexible CSS Framework for building modern responsive web apps.
 
+- Built with Flexbox
+- Mobile-First
+- BEM, Namespaces, Modular, Beautiful code
+- 14KB gzipped
+
 ## Setup
 There are two ways to start
 ### 1. Install with Yarn