From 3fa283f732304bd4264128d23509f658261d7016 Mon Sep 17 00:00:00 2001 From: Andy Miller Date: Mon, 21 Aug 2017 17:44:43 -0600 Subject: [PATCH] Squashed commit of the following: commit 7395257d70d8c60b5c4499f297f03b75db5af230 Merge: c9e625c d5f1cb0 Author: Yan Zhu Date: Sat Aug 19 15:31:50 2017 +0800 Merge pull request #259 from picturepan2/0.2.16 0.3.1 commit d5f1cb0ba2e559db550a94297f1979be9735bc0b Author: Yan Zhu Date: Sat Aug 19 15:28:52 2017 +0800 Bump the version number to v0.3.1 commit 799887f549e891aebe4519c9d66327d8632d5357 Author: Yan Zhu Date: Sat Aug 19 15:01:58 2017 +0800 Cleanup Navigation component code commit 6a4bbbc42334c2ac0f61ea46dcb6d46976b32ed1 Author: Yan Zhu Date: Sat Aug 19 14:30:07 2017 +0800 Update Docs examples commit 3e837ba52cb27fbb34f3139ebc53faea5847a95c Author: Yan Zhu Date: Thu Aug 17 22:59:52 2017 +0800 Add more Docs content commit 41ec3e49d63ea45d8aee4f26eeccfedaa20a7f7d Author: Yan Zhu Date: Thu Aug 17 18:54:07 2017 +0800 Add Grid offset, more margin and padding utilities commit b56b14d2f4a5c30c9a3d106377b40d3a7f595b8a Author: Yan Zhu Date: Wed Aug 16 19:53:45 2017 +0800 Move Panels and Empty states to Components from Layout commit 82e0eef89b185eddbdee9b43beab76d3effa7501 Author: Yan Zhu Date: Wed Aug 16 18:33:44 2017 +0800 Rename display utilities and add custom prefix commit e1889c840e060b51e4b551a3e30f142ce4b9ec2b Author: Yan Zhu Date: Wed Aug 16 17:30:48 2017 +0800 Fix margin utilities #250 commit f9e4d647139e566d55c435dba869d16ebbbb3554 Author: Yan Zhu Date: Wed Aug 16 17:21:05 2017 +0800 Add Filters code example #232 commit afb32d17458303623f050224cba14739b27355d3 Author: Yan Zhu Date: Tue Aug 15 18:40:08 2017 +0800 Improve large Buttons and Forms commit 0150eb62f0e33a0c0ef9e75d9f55e71d79d5ba03 Author: Yan Zhu Date: Tue Aug 15 18:21:48 2017 +0800 Fix Docs bugs commit c9e625c9dd8f1628c58b10bb165961eae068002f Merge: 846353c d6b5a13 Author: Yan Zhu Date: Tue Aug 15 16:30:05 2017 +0800 Merge pull request #249 from picturepan2/0.2.15 0.2.15 commit d6b5a13424cb56db116483f79d6253205e26757c Author: Yan Zhu Date: Tue Aug 15 16:27:56 2017 +0800 Update Responsive Container and docs commit a8ba146553cdbe25c782aea323a8f7df0ad664f0 Author: Yan Zhu Date: Tue Aug 15 16:06:33 2017 +0800 IMPORTANT: Change back to rem unit, and default html font size is 20px. commit 38962f94d497a40435862d187f30b04f2b68205d Author: Yan Zhu Date: Tue Aug 15 12:16:53 2017 +0800 Improve Docs homepage commit 4cb36cd7914a52c4ea18ac34308a38250a4c0399 Author: Yan Zhu Date: Mon Aug 14 22:30:02 2017 +0800 Add mobile responsive support commit b15b0cee1110e83a26326dacdbc995364dd07cdb Author: Yan Zhu Date: Sun Aug 13 16:47:13 2017 +0800 Completely rewritten Docs experience commit f4057ff8d3a36350728411de0010fdcf10dfc860 Author: Yan Zhu Date: Fri Aug 4 00:45:56 2017 +0800 Minor update to the Docs commit a2f1864da01e76c59d682b897398b100eb3bc25a Author: Yan Zhu Date: Thu Aug 3 19:08:54 2017 +0800 Update the Docs HTML structure commit 706c3577c517631e8460b58afe975e6f6abe2c79 Author: Yan Zhu Date: Thu Aug 3 13:27:26 2017 +0800 Add form-checkbox, radio and switch validation styles commit ba51cc1212b14201f9bddeab10e3de7c8f4cd017 Author: Yan Zhu Date: Wed Aug 2 23:24:59 2017 +0800 Update Docs experience commit ad7ee1b9af6a081b83369efacb088150d42f03a3 Author: Yan Zhu Date: Wed Jul 19 18:29:23 2017 +0800 New Docs experience commit ef7586bdc6f8f3eb4ea76193001c5bb6d28ffe08 Author: Yan Zhu Date: Sat Jul 1 21:16:47 2017 +0800 Add Buttons and Forms variables commit 78de8f1a1f423a86c05f361e87012a8ea1f1211b Author: Yan Zhu Date: Sat Jul 1 15:33:02 2017 +0800 IMPORTANT: Replace all rem units to px commit ef4918530c3d332abbfd4e3076ffc8f9405d4da7 Author: Yan Zhu Date: Wed Jun 28 16:06:58 2017 +0800 Update East Asian language support and docs commit a827f7ec305999e010d329802e4611065f3f5544 Merge: 5865991 b50b8cb Author: Yan Zhu Date: Wed Jun 28 11:49:14 2017 +0800 Merge pull request #228 from mzyy94/master Optimize Japanese font family commit 586599108f3b2bde4b739c2b186e9bb705ad0278 Author: Yan Zhu Date: Tue Jun 27 22:59:33 2017 +0800 Add Colors utilities #205 commit 58b19730a3bcda67ecd6b77abffd8133f2850905 Author: Yan Zhu Date: Mon Jun 26 19:52:38 2017 +0800 Fix button loading with active status #229 commit b50b8cbfa8cc184a01b96587fc00930297ee721b Author: Yuki MIZUNO Date: Sat Jun 17 15:39:02 2017 +0900 Optimize Japanese font family commit 7e73f385a827a3c19c3fdd174639cc6477c22487 Author: Yan Zhu Date: Tue Jun 13 20:15:01 2017 +0800 Add Responsive container to the Docs #222 commit aba0d05b3c95c13f965fe31e73808167297a6c4c Author: Yan Zhu Date: Tue Jun 13 19:16:00 2017 +0800 Change Dropdown menus max-height to 50% viewport height commit 123cfa15980c6579411f74df2865ca96c379e2ca Author: Yan Zhu Date: Fri Jun 9 15:55:20 2017 +0800 Add Install from CDN commit 73ee932bbed529d5e3b9eae79a20bbe4fc4fa4db Author: Yan Zhu Date: Thu Jun 8 18:04:32 2017 +0800 Fix icon animation bug within Accordions commit bf07c7ceca38b946eec0ef436641235cf74a155d Author: Yan Zhu Date: Thu Jun 8 18:01:45 2017 +0800 Fix icons bug within Autocomplete #212 commit 130c203d3e2b52bc8eb4eb28b45290eaaf60f101 Author: Yan Zhu Date: Thu Jun 8 17:53:13 2017 +0800 Fix icon direction bug #218 commit bade3426145be54a0d2c235a66aad57d5242ca3a Author: Yan Zhu Date: Thu Jun 8 16:23:55 2017 +0800 Visual style update commit 2f9c7cbe754acd234673ba89f1a3d9bc19ee2ea2 Author: Yan Zhu Date: Wed Jun 7 21:46:10 2017 +0800 Update visual style commit 430bb390f5e77d74f3c5873db04312b0daeee3a0 Author: Yan Zhu Date: Thu May 25 19:53:48 2017 +0800 Update Breadcrumbs commit 17dccfb2cfcf0401e1c855337e1b86c79b2f3b2b Author: Yan Zhu Date: Fri May 5 21:06:07 2017 +0800 Move Accordions to Components and add icons commit 22af202a537652a91f1589dab9cedcc31fb459e0 Merge: 66df623 0dde7d9 Author: Yan Zhu Date: Fri May 5 19:52:24 2017 +0800 Merge pull request #213 from leroydev/fix/bower-main-property Fixed incorrect bower main path commit 0dde7d9a3c6303039747a62755b5cc0123ab25a9 Author: Leroy Witteveen Date: Wed May 3 22:59:42 2017 +0200 Fixed incorrect bower main path commit 66df6235ccc4fda7d90fbf18542b290b3ce4cbf9 Author: Yan Zhu Date: Fri Apr 28 16:16:16 2017 +0800 Reuse tables code --- bower.json | 2 +- docs/components.html | 331 ++++++-- docs/css/docs.css | 40 +- docs/dist/spectre-exp.css | 308 +++---- docs/dist/spectre-exp.min.css | 2 +- docs/dist/spectre-icons.css | 233 ++---- docs/dist/spectre-icons.min.css | 2 +- docs/dist/spectre.css | 1398 +++++++++++++------------------ docs/dist/spectre.min.css | 2 +- docs/elements.html | 412 +++++---- docs/experimentals.html | 38 +- docs/getting-started.html | 84 +- docs/index.html | 26 +- docs/layout.html | 329 ++------ docs/src/docs.less | 46 +- docs/utilities.html | 69 +- scss/spectre.scss | 5 +- spectre.less | 5 +- src/breadcrumbs.less | 2 + src/buttons.less | 4 +- src/cards.less | 9 +- src/empty.less | 4 - src/forms.less | 9 +- src/labels.less | 4 + src/layout.less | 93 +- src/media.less | 1 + src/mixins.less | 72 +- src/navigation.less | 13 - src/navs.less | 2 + src/pagination.less | 2 + src/panels.less | 4 - src/tabs.less | 11 +- src/tiles.less | 5 +- src/utilities/display.less | 15 +- src/utilities/position.less | 10 +- 35 files changed, 1726 insertions(+), 1866 deletions(-) delete mode 100644 src/navigation.less diff --git a/bower.json b/bower.json index a20e4bb65..92a8b7b1d 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "spectre.css", - "version": "0.2.15", + "version": "0.3.1", "description": "Spectre.css: a lightweight, responsive and modern CSS framework.", "homepage": "http://picturepan2.github.io/spectre", "repository": "picturepan2/spectre", diff --git a/docs/components.html b/docs/components.html index 3143683f2..ef5f18dcd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -104,12 +104,6 @@

Spectre.css

  • Navbar
    • -
  • - Panels -
    • -
  • - Empty states -
    • @@ -144,6 +138,9 @@

    Spectre.css

  • Chips
    • +
  • + Empty states +
  • Menus
    • @@ -156,6 +153,9 @@

    Spectre.css

  • Pagination
    • +
  • + Panels +
  • Popovers
    • @@ -732,7 +732,7 @@

    Bars< </div> -

    Slider bars

    +

    Slider bars

    @@ -788,7 +788,7 @@

    Microsoft
    -
    Software and hardware
    +
    Software and hardware
    Empower every person and every organization on the planet to achieve more. @@ -888,7 +888,7 @@

    Card
    Apple
    -
    Hardware and software
    +
    Hardware and software
    OS X Yosemite @@ -913,7 +913,7 @@

    Card
    Google I/O
    -
    Software and hardware
    +
    Software and hardware
    An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. @@ -938,7 +938,7 @@

    Card
    Apple
    -
    Hardware and software
    +
    Hardware and software
    To make a contribution to the world by making tools for the mind that advance humankind. @@ -952,7 +952,7 @@

    Card
    Google
    -
    Software and hardware
    +
    Software and hardware
    Organize the world’s information and make it universally accessible and useful. @@ -978,7 +978,7 @@

    Card </div> <div class="card-header"> <div class="card-title h5">Microsoft</div> - <div class="card-subtitle">Software and hardware</div> + <div class="card-subtitle text-gray">Software and hardware</div> </div> <div class="card-body"> Empower every person and every organization on the planet to achieve more. @@ -1049,6 +1049,73 @@

    Chip

    +
    +

    Empty states

    +
    +

    Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

    +
    +
    +
    +
    +
    + +
    +

    You have no new messages

    +

    Click the button to start a conversation

    +
    + +
    +
    +
    +
    +
    +
    + +
    +

    You've successfully signed up

    +

    Click the button to invite your friends

    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +

    You are not following anyone

    +

    Start to meet new friends

    +
    + + +
    +
    +
    +
    + +
    +

    An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below.

    +
    + + +
    <div class="empty">
+  <div class="empty-icon">
+    <i class="icon icon-people"></i>
+  </div>
+  <p class="empty-title h5">You have no new messages</p>
+  <p class="empty-subtitle">Click the button to start a conversation.</p>
+  <div class="empty-action">
+    <button class="btn btn-primary">Send a message</button>
+  </div>
+</div>
+
    + +
    +
    @@ -1322,7 +1386,7 @@

    Candy ipsum

    </div> -

    Modal sizes

    +

    Modal sizes

    @@ -1338,8 +1402,8 @@

    Modal sizes

    - +
    @@ -1374,8 +1438,8 @@

    Modal sizes

    - +

    @@ -1491,14 +1555,14 @@

  • -

    Previous

    -

    Getting started

    +
    Previous
    +
    Getting started
  • -

    Next

    -

    Layout

    +
    Next
    +
    Layout
    • @@ -1512,14 +1576,14 @@

    Layout

    <ul class="pagination">
   <li class="page-item page-prev">
     <a href="#">
-      <p class="page-item-subtitle">Previous</p>
-      <h3 class="page-item-title">Getting started</h3>
+      <div class="page-item-subtitle">Previous</div>
+      <div class="page-item-title h5">Getting started</div>
     </a>
   </li>
   <li class="page-item page-next">
     <a href="#">
-      <p class="page-item-subtitle">Next</p>
-      <h3 class="page-item-title">Layout</h3>
+      <div class="page-item-subtitle">Next</div>
+      <div class="page-item-title h5">Layout</div>
     </a>
   </li>
 </ul>
@@ -1527,6 +1591,167 @@ 
    Layout
    +
    +

    Panels

    +
    +

    Panels are flexible view container with auto-expand content section.

    +
    +
    +
    +
    +
    +
    + Avatar +
    +
    Bruce Banner
    +
    THE HULK
    +
    + +
    +
    +
    +
    E-mail
    +
    bruce.banner@hulk.com
    +
    +
    + +
    +
    +
    +
    +
    Skype
    +
    bruce.banner
    +
    +
    + +
    +
    +
    +
    +
    Location
    +
    Dayton, Ohio
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    Comments
    +
    +
    +
    +
    +
    + Avatar +
    +
    +
    +

    Thor Odinson

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    +
    + Avatar +
    +
    +
    +

    Bruce Banner

    +

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    +
    +
    +
    +
    +
    +
    +
    +

    Tony Stark

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    +
    + Avatar +
    +
    +
    +

    Steve Rogers

    +

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    +
    +
    +
    +
    +
    + Avatar +
    +
    +
    +

    Natasha Romanoff

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    + +
    +

    Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable.

    +
    + + +
    <div class="panel">
+  <div class="panel-header">
+    <div class="panel-title">Comments</div>
+  </div>
+  <div class="panel-nav">
+    <!-- navigation components: tabs, breadcrumbs or pagination -->
+  </div>
+  <div class="panel-body">
+    <!-- contents -->
+  </div>
+  <div class="panel-footer">
+    <!-- buttons or inputs -->
+  </div>
+</div>
+
    + +
    +     -

    Headings

    +

    Headings

    H1 Heading 40px

    @@ -284,7 +284,7 @@
    H6 Heading 16px
    <span class="h1">H1 Heading</span> -

    Paragraphs

    +

    Paragraphs

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

    Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

    @@ -295,7 +295,7 @@

    Paragraphs

    <p>...</p> -

    Semantic text elements

    +

    Semantic text elements

    I18N @@ -374,7 +374,7 @@

    Semantic text elements

    -

    Optimized for east asian fonts

    +

    Optimized for east asian fonts

    你好, こんにちは, 안녕하세요
    Chinese (Simplified)
    @@ -409,7 +409,7 @@
    Korean
    <p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p> -

    Blockquote

    +

    Blockquote

    The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

    - Bill Gates @@ -422,7 +422,7 @@

    Blockquote

    </blockquote> -

    Lists

    +

    Lists

      @@ -555,11 +555,7 @@

      Bu
      -
      -
      -
      -
      @@ -568,60 +564,25 @@

      Bu

      Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons.

    -
    -

    Add the disabled class or the disabled attribute for a disabled button.

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -

    A button with the loading class can show loading indicator.

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - 
    <button class="btn">default button</button>
 <button class="btn btn-primary">primary button</button>
 <button class="btn btn-link">link button</button>
-
-<!-- buttons with disabled state -->
-<button class="btn disabled" tabindex="-1">disabled button</button>
-<button class="btn" disabled tabindex="-1">disabled button</button>
-
-<!-- a button with loading state -->
-<button class="btn loading">button</button>
    -

    Button sizes

    +

    Button sizes

    -
    +
    - + +
    +
    - + +
    +
    - +
    @@ -661,16 +622,73 @@

    Button sizes

    <button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button> -

    Button groups

    +

    Button states

    + +
    +

    Add the active class for active button state style.

    +
    + +
    +
    + + + +
    +
    + + +
    
+<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
    + +
    +

    Add the disabled class or the disabled attribute for disabled button state style.

    +
    +
    + + + +
    +
    + + +
    
+<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
    + +
    +

    A button with the loading class can show loading indicator.

    +
    + +
    +
    + + + +
    +
    + + +
    <!-- a button with loading state -->
+<button class="btn loading">button</button>
+
    + +

    Button groups

    +
    +
    - - - + + +
    -
    +
    @@ -679,14 +697,14 @@

    Button groups

    -
    +
    -
    +
    @@ -714,20 +732,80 @@

    Form

    Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

    -
    -
    -
    - - -
    -
    - - -
    +
    +
    + + +
    +
    + + +
    +
    +
    + +
    <!-- form input control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-1">Name</label>
+  <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
+</div>
+
    + +
    +
    +
    + + +
    +
    +
    + +
    <!-- form textarea control -->
+<div class="form-group">
+<label class="form-label" for="input-example-3">Message</label>
+<textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+</div>
+
    + +
    +
    +
    + +
    +
    + +
    +
    +
    + +
    <!-- form select control -->
+<div class="form-group">
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Slack</option>
+    <option>Skype</option>
+    <option>Hipchat</option>
+  </select>
+</div>
+
    + +
    +
    +
    -
    - -
    -
    - -
    -
    - - -
    -
    - -
    -
    - - -
    - -
    <form>
-  <!-- form input control -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
-  </div>
-  <!-- form radio control -->
-  <div class="form-group">
-    <label class="form-label">Gender</label>
-    <label class="form-radio">
-      <input type="radio" name="gender" />
-      <i class="form-icon"></i> Male
-    </label>
-    <label class="form-radio">
-      <input type="radio" name="gender" checked />
-      <i class="form-icon"></i> Female
-    </label>
-  </div>
-  <!-- form select control -->
-  <div class="form-group">
-    <select class="form-select">
-      <option>Choose an option</option>
-      <option>Slack</option>
-      <option>Skype</option>
-      <option>Hipchat</option>
-    </select>
-  </div>
-  <!-- form switch control -->
-  <div class="form-group">
-    <label class="form-switch">
-      <input type="checkbox" />
-      <i class="form-icon"></i> Send me emails with news and tips
-    </label>
-  </div>
-  <!-- form textarea control -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-3">Message</label>
-    <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-  </div>
-  <!-- form checkbox control -->
-  <div class="form-group">
-    <label class="form-checkbox">
-      <input type="checkbox" />
-      <i class="form-icon"></i> Remember me
-    </label>
-  </div>
-</form>
+
    <!-- form radio control -->
+<div class="form-group">
+  <label class="form-label">Gender</label>
+  <label class="form-radio">
+    <input type="radio" name="gender" checked />
+    <i class="form-icon"></i> Male
+  </label>
+  <label class="form-radio">
+    <input type="radio" name="gender" />
+    <i class="form-icon"></i> Female
+  </label>
+</div>
+
    
+
+          
    
+            
    
+              
    
+                
+              
    
+              
    
+                
+              
    
+            
    
+          
    
+
+
    <!-- form switch control -->
+<div class="form-group">
+  <label class="form-switch">
+    <input type="checkbox" />
+    <i class="form-icon"></i> Send me emails with news and tips
+  </label>
+</div>
+
    
+
+          
    
+            
    
+              
    
+                
+              
    
+              
    
+                
+              
    
+            
    
+          
    
+
+
    <!-- form checkbox control -->
+<div class="form-group">
+  <label class="form-checkbox">
+    <input type="checkbox" />
+    <i class="form-icon"></i> Remember me
+  </label>
+</div>
 
    
 
           
    
             
    You can use :indeterminate pseudo class for indeterminate state of checkboxes.
    
           
    
 
-          
    Horizontal forms
    
+          
    Horizontal forms
    
           
    
             
    If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-[1-12] class to the child elements for form row layout. 
    
           
    
@@ -860,7 +926,9 @@ 
    Horizontal forms
    -
    +
    + +
    @@ -1042,7 +1111,7 @@

    Form icons

    </div>     -

    Input types

    +

    Input types

    @@ -1122,7 +1191,7 @@

    Input types

    -

    Input groups

    +

    Input groups

    @@ -1205,7 +1274,7 @@

    Input groups

    </div> -

    Form validation styles

    +

    Form validation styles

    To use form validation styles, add is-success or is-error class to the controls or add has-success or has-error class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

    @@ -1251,7 +1320,7 @@

    Form validation styles

    - form-checkbox, radio and switch + form-checkbox, radio and switch (Error status only)

    Spectre CSS file (~10KB min+gzip):

    -

    Download Spectre.css

    +

    Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

    +

    Download Spectre.css

    Include spectre.css located in /docs/dist in your website or Web app <head>. Also, you can add spectre-icons.css and spectre-exp.css accordingly.

    @@ -315,18 +315,29 @@
    Install with Bower

    Custom version

    -

    Spectre uses Gulp for compiling CSS. You can customize your version of Spectre.css by editing LESS files in /src directory or removing unneeded components from spectre.less, spectre-exp.less and spectre-icons.less.

    +

    You can customize your version of Spectre.css by editing LESS files in /src directory or removing unneeded components from .less source files.

    +

    Spectre.css Source Code

    +
    +

    Compiling CSS

    +
    +

    Spectre uses Gulp for compiling CSS. Firstly you need to install NPM, which is used to manage Gulp and other dependencies.

    Then, you can build the CSS file from the command line:

    1. Navigate to the root directory of Spectre.
    2. Run npm install. NPM will install all dev dependencies as listed in package.json.
      3. -
    3. When completed, run gulp build to compile LESS to CSS and minify files.
      4. +
    4. When completed, run gulp build task to compile LESS to CSS and minify files.
    5. You can find compiled CSS files in /dist directory.
    -

    You can watch file changes and rebuild CSS files by using gulp watch.

    +

    All available Gulp tasks:

    +
      +
    • gulp build - compile LESS to CSS and minify files (default)
      • +
    • gulp docs - compile Docs related files
      • +
    • gulp watch - watch file changes and re-compile CSS files
      • +
    - +

    Folder Structure

    + 
    spectre/
 ├── dist/                               // Build folder (Git ignored)
 │   ├── spectre-exp.css
@@ -364,9 +375,9 @@ 
    C
 
           
    Variables
    
           
    
-            
    Spectre.css is designed with consistent design language. You can modify variables.less to create your new or match existing design.
+            
    Spectre.css is designed with consistent design language. You can modify variables.less to create your new or match existing design.
    
           
    
-          
    Colors
      
+          
    Colors
    
           
    
             
    
               
    
@@ -445,11 +456,39 @@ 
    Colors
    
               
    
             
    
           
    
-          
    Sizes
    
+          
+          
    Sizes
    
           
    
             
    The default REM (root em) size in Spectre.css is 20px. 
    
-            
    Please note in Chinese/Japanese/Korean Chrome, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 20px, which is relatively easy to calculate. 
    
-            
    Spectre also use 4px as the unit size. Sizes of components are based on the unit size. 
    
+            
    Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 20px, which is relatively easy to calculate. 
    
+            
    Spectre uses 4px as the unit size. Sizes of components are based on the unit size. 
    
+          
    
+          
+          
    Custom prefix
    
+          
    
+            
    There is also a way to add custom prefix to all CSS classes. You can use gulp-css-prefix plugin and add a new Gulp task to enable it. 
    
+          
    
+
+
+
    $ npm install gulp-css-prefix
+
    
+
+          
    
+            
    To add spectre- to all classes, you can add the Gulp task to gulpfile.js file.
    
+          
    
+
+
+
    var cssPrefix = require('gulp-css-prefix');
+  
+gulp.task('prefix', function() {
+  gulp.src('./dist/*.css')
+      .pipe(cssPrefix('spectre-'))
+      .pipe(gulp.dest('./dist'))
+});
+
    
+
+          
    
+            
    After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.
    @@ -475,6 +514,12 @@

    B

    What's new

    +

    August 2017

    +

    April 2017

    • @@ -493,7 +538,7 @@

      W

      March 2017

      • - Icons: single-element, responsive and pure CSS icons NEW + Icons: single-element, responsive and pure CSS icons
      • Popovers: small overlay content containers @@ -531,6 +576,7 @@

        W
        • Initial commit
        +

        Releases

    diff --git a/docs/index.html b/docs/index.html index 20489da20..e98754dbe 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,27 +12,21 @@ -
    -
    +
    +
    -
    -
    - -
    -

    Spectre.css

    A lightweight, responsive and modern CSS framework

    -
    -
    - Docs - GitHub -
    -
    +

    + Docs + GitHub +

    +

    Latest version:

    @@ -72,11 +66,11 @@

    A lightweight, responsive and modern CSS framework

    Installation

    -
    +

    There are 5 ways to get started with Spectre.css CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.

    -
    - Get started +
    + Install Spectre.css
    diff --git a/docs/layout.html b/docs/layout.html index edf206b51..15a9dec77 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -104,12 +104,6 @@

    Spectre.css

  • Navbar
    • -
  • - Panels -
    • -
  • - Empty states -
    • @@ -144,6 +138,9 @@

    Spectre.css

  • Chips
    • +
  • + Empty states +
  • Menus
    • @@ -156,6 +153,9 @@

    Spectre.css

  • Pagination
    • +
  • + Panels +
  • Popovers
    • @@ -318,7 +318,7 @@

    Flexb

    Add the columns class to a container with the container class. And add any element you want with the column class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].

    -

    And you can add the col-gapless class to have gapless columns.

    +

    And you can add the col-gapless class to the columns to have gapless columns.

    @@ -356,34 +356,87 @@

    Flexb <div class="column col-6">col-6</div> <div class="column col-6">col-6</div> </div> + + <div class="columns col-oneline"> + <div class="column col-8">col-8</div> + <div class="column col-8">col-8</div> + </div> </div> -

    - -
    -

    Responsive grid

    +

    Grid offset

    -

    Spectre provides a neat responsive layout grid system and responsive visibility utilities.

    +

    The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.

    +
    + +
    +
    +
    col-2
    +
    +
    +
    col-4 col-mx-auto
    +
    +
    +
    +
    +
    col-2
    +
    +
    +
    col-4 col-ml-auto
    +
    -
    -
    col-lg-6
    +
    +
    col-4 col-ml-auto
    +
    +
    +
    col-2
    +
    +
    +
    +
    +
    col-4 col-mx-auto
    +
    +
    +
    col-2
    -
    -
    col-md-6
    +
    +
    col-4 col-mr-auto
    +
    +
    +
    col-2
    -
    -
    col-sm-6
    +
    +
    col-4 col-mx-auto
    + + +
    <div class="container">
+  <div class="columns">
+    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
+    <div class="column col-2">col-2</div>
+  </div>
+</div>
+
    + +
    + +
    +

    Responsive

    +
    +

    Spectre provides a neat responsive layout grid system and responsive visibility utilities.

    +
    -
    -
    col-xs-6
    +
    +
    col-10
    col-lg-8
    col-md-6
    col-sm-4
    +
    +
    +
    col-2
    col-lg-4
    col-md-6
    col-sm-8
    @@ -408,7 +461,7 @@

    /div> -

    Responsive container

    +

    Responsive container

    The responsive layout also provides fixed-width containers. Use grid-xs(480px), grid-sm (600px), grid-md (840px), grid-lg (960px) or grid-xl (1280px) to container for a fixed-width container with the specific max-width.

    @@ -422,11 +475,11 @@

    Responsive container

    </div> -

    Responsive visibility

    +

    Responsive visibility

    The responsive visibility utilities help show and hide elements on specific viewport sizes.

    - +
    @@ -492,7 +545,7 @@

    Responsive visibility

    -
    +
    @@ -643,234 +696,6 @@

    Nav -
    -

    Panels

    -
    -

    Panels are flexible view container layout with auto-expand content section.

    -
    -
    -
    -
    -
    -
    - Avatar -
    -
    Bruce Banner
    -
    THE HULK
    -
    - -
    -
    -
    -
    E-mail
    -
    bruce.banner@hulk.com
    -
    -
    - -
    -
    -
    -
    -
    Skype
    -
    bruce.banner
    -
    -
    - -
    -
    -
    -
    -
    Location
    -
    Dayton, Ohio
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    Comments
    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    Thor Odinson

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    Bruce Banner

    -

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    -
    -
    -
    -
    -
    -
    -
    -

    Tony Stark

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    Steve Rogers

    -

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    Natasha Romanoff

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - -
    -

    Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable.

    -
    - - -
    <div class="panel">
-  <div class="panel-header">
-    <div class="panel-title">Comments</div>
-  </div>
-  <div class="panel-nav">
-    <!-- navigation components: tabs, breadcrumbs or pagination -->
-  </div>
-  <div class="panel-body">
-    <!-- contents -->
-  </div>
-  <div class="panel-footer">
-    <!-- buttons or inputs -->
-  </div>
-</div>
-
    - -
    - -
    -

    Empty states / blank slates

    -
    -

    Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

    -
    -
    -
    -
    -
    - -
    -

    You have no new messages

    -

    Click the button to start a conversation

    -
    - -
    -
    -
    -
    -
    -
    - -
    -

    You've successfully signed up

    -

    Click the button to invite your friends

    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -

    You are not following anyone

    -

    Start to meet new friends

    -
    - - -
    -
    -
    -
    - -
    -

    An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below.

    -
    - - -
    <div class="empty">
-  <div class="empty-icon">
-    <i class="icon icon-people"></i>
-  </div>
-  <p class="empty-title h5">You have no new messages</p>
-  <p class="empty-subtitle">Click the button to start a conversation.</p>
-  <div class="empty-action">
-    <button class="btn btn-primary">Send a message</button>
-  </div>
-</div>
-
    - -
    -

    GitHub | Twitter | PayPal Donate | Version

    Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.

    diff --git a/docs/src/docs.less b/docs/src/docs.less index b16bf3db8..7bb83a57f 100644 --- a/docs/src/docs.less +++ b/docs/src/docs.less @@ -1,7 +1,7 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.2.15"; + content: "0.3.1"; } // Core variables and mixins @import '../../src/variables.less'; @@ -139,7 +139,7 @@ .docs-block { border-radius: @border-radius; - padding: .5rem; + padding: @unit-2; &.bg-gray { background: @bg-color-dark; @@ -293,24 +293,17 @@ } /* Spectre Homepage style */ -.section-header { - backdrop-filter: blur(.5rem); // Safari only feature - background: fade(@bg-color, 90%); +.section-hero { padding: 1rem .5rem; - position: fixed; - top: 0; - width: 100%; - z-index: @zindex-2; + position: relative; .s-brand { - padding: 0; - position: static; - } -} + position: absolute; -.section-hero { - padding: 1.5rem .5rem; - position: relative; + h2 { + color: @primary-color; + } + } .column { padding: @layout-spacing; @@ -347,7 +340,7 @@ } .grid-hero { - margin-top: 5rem; + margin-top: 6rem; margin-bottom: 2rem; h1 { @@ -469,6 +462,7 @@ .s-title, .s-subtitle { + padding-top: 5rem; position: static; &::before { @@ -476,6 +470,22 @@ } } } + + .section-hero { + .s-brand { + height: 5rem; + padding: 1.5rem .5rem; + + .s-logo { + height: auto; + } + + img { + height: 3.2rem; + width: 3.2rem; + } + } + } } @media screen and (max-width: 600px) { @@ -492,7 +502,7 @@ padding: 3.5rem .5rem 0 .5rem; .docs-block { - padding: .5rem .1rem; + padding: @unit-2 @unit-h; } .anchor { diff --git a/docs/utilities.html b/docs/utilities.html index 5077792f3..d50271287 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -104,12 +104,6 @@

    Spectre.css

  • Navbar
    • -
  • - Panels -
    • -
  • - Empty states -
    • @@ -144,6 +138,9 @@

    Spectre.css

  • Chips
    • +
  • + Empty states +
  • Menus
    • @@ -156,6 +153,9 @@

    Spectre.css

  • Pagination
    • +
  • + Panels +
  • Popovers
    • @@ -256,12 +256,12 @@

    Col

    Color utilities are used for changing colors for text, link and background.

    -

    Text colors

    +

    Text colors

    primary color

    secondary color

    gray color

    -

    light color

    +

    light color

    success color

    warning color

    error color

    @@ -278,13 +278,13 @@

    Text colors

    -

    primary link

    -

    secondary link

    -

    gray link

    -

    light link

    -

    success link

    -

    warning link

    -

    error link

    +

    primary link

    +

    secondary link

    +

    gray link

    +

    light link

    +

    success link

    +

    warning link

    +

    error link

    @@ -297,15 +297,15 @@

    Text colors

    <a class="text-error" href="#">error color</a> -

    Background colors

    +

    Background colors

    -

    primary bg

    -

    secondary bg

    -

    dark bg

    -

    gray bg

    -

    success bg

    -

    warning bg

    -

    error bg

    +

    primary bg

    +

    secondary bg

    +

    dark bg

    +

    gray bg

    +

    success bg

    +

    warning bg

    +

    error bg

    @@ -328,21 +328,22 @@

    Di 
    <!-- display: block; -->
-<div class="block"></div>
+<div class="d-block"></div>
 <!-- display: inline; -->
-<div class="inline"></div>
+<div class="d-inline"></div>
 <!-- display: inline-block; -->
-<div class="inline-block"></div>
+<div class="d-inline-block"></div>
 <!-- display: flex; -->
-<div class="flex"></div>
+<div class="d-flex"></div>
 <!-- display: inline-flex; -->
-<div class="inline-flex"></div>
+<div class="d-inline-flex"></div>
 <!-- display: none; -->
-<div class="hide"></div>
+<div class="d-none"></div>
+<div class="d-hide"></div>
 <!-- visibility: visible; -->
-<div class="visible"></div>
+<div class="d-visible"></div>
 <!-- visibility: hidden; -->
-<div class="invisible"></div>
+<div class="d-invisible"></div>
 <!-- hide text contents -->
 <div class="text-hide"></div>
 <!-- assistive text for screen reader -->
@@ -428,7 +429,7 @@ 
    Di
         
    
           
    Loading
    
           
    
-            
    Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status. Add the btn-lg class for large size. 
    
+            
    Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status.
    
           
    
           
    
             
    
@@ -436,8 +437,8 @@ 
    Lo
             
    
           
    
           
    
-              
    Add the btn-lg class for large size. 
    
-            
    
+            
    Add the loading-lg class for large size. 
    
+          
    
           
    
             
    
               
    
diff --git a/scss/spectre.scss b/scss/spectre.scss
index 55572f2ce..b3796b202 100644
--- a/scss/spectre.scss
+++ b/scss/spectre.scss
@@ -29,15 +29,18 @@
 @import 'src/autocomplete';
 @import 'src/avatars';
 @import 'src/badges';
+@import 'src/breadcrumbs';
 @import 'src/bars';
 @import 'src/cards';
 @import 'src/chips';
 @import 'src/dropdowns';
 @import 'src/menus';
 @import 'src/modals';
-@import 'src/navigation';
+@import 'src/navs';
+@import 'src/pagination';
 @import 'src/popovers';
 @import 'src/steps';
+@import 'src/tabs';
 @import 'src/tiles';
 @import 'src/toasts';
 @import 'src/tooltips';
diff --git a/spectre.less b/spectre.less
index c61207ea9..14c150d6b 100644
--- a/spectre.less
+++ b/spectre.less
@@ -29,15 +29,18 @@
 @import 'src/autocomplete.less';
 @import 'src/avatars.less';
 @import 'src/badges.less';
+@import 'src/breadcrumbs.less';
 @import 'src/bars.less';
 @import 'src/cards.less';
 @import 'src/chips.less';
 @import 'src/dropdowns.less';
 @import 'src/menus.less';
 @import 'src/modals.less';
-@import 'src/navigation.less';
+@import 'src/navs.less';
+@import 'src/pagination.less';
 @import 'src/popovers.less';
 @import 'src/steps.less';
+@import 'src/tabs.less';
 @import 'src/tiles.less';
 @import 'src/toasts.less';
 @import 'src/tooltips.less';
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
index 280250b41..0b0f757d0 100644
--- a/src/breadcrumbs.less
+++ b/src/breadcrumbs.less
@@ -1,5 +1,7 @@
 // Breadcrumbs
 .breadcrumb {
+  list-style: none;
+  margin: @unit-1 0;
   padding: @unit-1 0;
 
   .breadcrumb-item {
diff --git a/src/buttons.less b/src/buttons.less
index 3f1e326ce..1beba4d77 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -91,13 +91,13 @@
   &.btn-sm {
     font-size: @font-size-sm;
     height: @control-size-sm;
-    padding: @control-padding-v-sm @control-padding-h;
+    padding: @control-padding-v-sm @control-padding-h * .75;
   }
 
   &.btn-lg {
     font-size: @font-size-lg;
     height: @control-size-lg;
-    padding: @control-padding-v-lg @control-padding-h;
+    padding: @control-padding-v-lg @control-padding-h * 1.5;
   }
 
   // Button Block
diff --git a/src/cards.less b/src/cards.less
index 1a84c21c2..dadfa8bfd 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -3,7 +3,8 @@
   background: @bg-color-light;
   border: @border-width solid @border-color;
   border-radius: @border-radius;
-  display: block;
+  display: flex;
+  flex-direction: column;
 
   .card-header,
   .card-body,
@@ -35,8 +36,4 @@
       }
     }
   }
-
-  .card-subtitle {
-    color: lighten(@body-font-color, 40%);
-  }
-}
+}
\ No newline at end of file
diff --git a/src/empty.less b/src/empty.less
index acfc8a026..b6cb1ae58 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -15,10 +15,6 @@
     margin: @layout-spacing auto;
   }
 
-  .empty-subtitle {
-    color: lighten(@body-font-color, 40%);
-  }
-
   .empty-action {
     margin-top: @layout-spacing-lg;
   }
diff --git a/src/forms.less b/src/forms.less
index b0e9a9e67..bc9b57160 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -81,7 +81,7 @@ legend {
 
   // Input types
   &[type="file"] {
-    height: auto;
+    padding: .125rem;
   }
 }
 
@@ -109,20 +109,23 @@ legend {
   border-radius: @border-radius;
   color: inherit;
   font-size: @font-size;
+  height: @control-size;
   line-height: @line-height;
   outline: none;
   padding: @control-padding-v @control-padding-h;
   vertical-align: middle;
   width: 100%;
 
+  &[size],
   &[multiple] {
+    height: auto;
+    
     option {
       padding: @unit-h @unit-1;
     }
   }
-  &:not([multiple]) {
+  &:not([multiple]):not([size]) {
     background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right (@control-icon-size / 2) center / .4rem .5rem;
-    height: @control-size;
     padding-right: @control-icon-size + @control-padding-h;
   }
   &:focus {
diff --git a/src/labels.less b/src/labels.less
index dfef4b68a..c67759bc1 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -7,6 +7,10 @@
     .label-variant(@light-color, @primary-color);
   }
 
+  &.label-secondary {
+    .label-variant(@primary-color, @secondary-color);
+  }
+
   &.label-success {
     .label-variant(@light-color, @control-color-success);
   }
diff --git a/src/layout.less b/src/layout.less
index 36323fff1..7fd2c60a4 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -28,6 +28,15 @@
   }
 }
 
+// Responsive breakpoint system
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+  display: none !important;
+}
+
 // Responsive grid system
 .columns {
   display: flex;
@@ -39,7 +48,7 @@
     margin-left: 0;
     margin-right: 0;
 
-    .column {
+    & > .column {
       padding-left: 0;
       padding-right: 0;
     }
@@ -106,6 +115,21 @@
 .col-1 {
   width: 8.33333333%;
 }
+.col-auto {
+  flex: 0 0 auto;
+  max-width: none;
+  width: auto;
+}
+.col-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.col-ml-auto {
+  margin-left: auto;
+}
+.col-mr-auto {
+  margin-right: auto;
+}
 @media screen and (max-width: @size-xl ) {
   .col-xl-12,
   .col-xl-11,
@@ -157,6 +181,12 @@
   .col-xl-1 {
     width: 8.33333333%;
   }
+  .hide-xl {
+    display: none !important;
+  }
+  .show-xl {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-lg ) {
   .col-lg-12,
@@ -209,6 +239,12 @@
   .col-lg-1 {
     width: 8.33333333%;
   }
+  .hide-lg {
+    display: none !important;
+  }
+  .show-lg {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-md ) {
   .col-md-12,
@@ -261,6 +297,12 @@
   .col-md-1 {
     width: 8.33333333%;
   }
+  .hide-md {
+    display: none !important;
+  }
+  .show-md {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-sm ) {
   .col-sm-12,
@@ -313,6 +355,12 @@
   .col-sm-1 {
     width: 8.33333333%;
   }
+  .hide-sm {
+    display: none !important;
+  }
+  .show-sm {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-xs) {
   .col-xs-12,
@@ -365,17 +413,6 @@
   .col-xs-1 {
     width: 8.33333333%;
   }
-}
-
-// Responsive breakpoint system
-.show-xs,
-.show-sm,
-.show-md,
-.show-lg,
-.show-xl {
-  display: none !important;
-}
-@media screen and (max-width: @size-xs) {
   .hide-xs {
     display: none !important;
   }
@@ -383,35 +420,3 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-sm) {
-  .hide-sm {
-    display: none !important;
-  }
-  .show-sm {
-    display: block !important;
-  }
-}
-@media screen and (max-width: @size-md) {
-  .hide-md {
-    display: none !important;
-  }
-  .show-md {
-    display: block !important;
-  }
-}
-@media screen and (max-width: @size-lg) {
-  .hide-lg {
-    display: none !important;
-  }
-  .show-lg {
-    display: block !important;
-  }
-}
-@media screen and (max-width: @size-xl) {
-  .hide-xl {
-    display: none !important;
-  }
-  .show-xl {
-    display: block !important;
-  }
-}
diff --git a/src/media.less b/src/media.less
index 455d77c5e..a55b8cb55 100644
--- a/src/media.less
+++ b/src/media.less
@@ -32,6 +32,7 @@
   iframe,
   object,
   embed {
+    border: 0;
     bottom: 0;
     height: 100%;
     left: 0;
diff --git a/src/mixins.less b/src/mixins.less
index 52cd74351..6fd4d6d93 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -35,8 +35,8 @@
 .label-base() {
   border-radius: @border-radius;
   display: inline-block;
-  line-height: 1;
-  padding: .2em .3em;
+  line-height: 1.2;
+  padding: .1em .3em;
   vertical-align: baseline;
 }
 
@@ -51,55 +51,55 @@
 }
 
 // Position utility mixin
-.margin-variant(@size: 1) {
-  .m-@{size} {
-    padding: @size * @unit-1;
+.margin-variant(@id: 1, @size: 1) {
+  .m-@{id} {
+    margin: @size;
   }
-  .mb-@{size} {
-    padding-bottom: @size * @unit-1;
+  .mb-@{id} {
+    margin-bottom: @size;
   }
-  .ml-@{size} {
-    padding-left: @size * @unit-1;
+  .ml-@{id} {
+    margin-left: @size;
   }
-  .mr-@{size} {
-    padding-right: @size * @unit-1;
+  .mr-@{id} {
+    margin-right: @size;
   }
-  .mt-@{size} {
-    padding-top: @size * @unit-1;
+  .mt-@{id} {
+    margin-top: @size;
   }
-  .mx-@{size} {
-    padding-left: @size * @unit-1;
-    padding-right: @size * @unit-1;
+  .mx-@{id} {
+    margin-left: @size;
+    margin-right: @size;
   }
-  .my-@{size} {
-    padding-bottom: @size * @unit-1;
-    padding-top: @size * @unit-1;
+  .my-@{id} {
+    margin-bottom: @size;
+    margin-top: @size;
   }
 }
 
-.padding-variant(@size: 1) {
-  .p-@{size} {
-    padding: @size * @unit-1;
+.padding-variant(@id: 1, @size: 1) {
+  .p-@{id} {
+    padding: @size;
   }
-  .pb-@{size} {
-    padding-bottom: @size * @unit-1;
+  .pb-@{id} {
+    padding-bottom: @size;
   }
-  .pl-@{size} {
-    padding-left: @size * @unit-1;
+  .pl-@{id} {
+    padding-left: @size;
   }
-  .pr-@{size} {
-    padding-right: @size * @unit-1;
+  .pr-@{id} {
+    padding-right: @size;
   }
-  .pt-@{size} {
-    padding-top: @size * @unit-1;
+  .pt-@{id} {
+    padding-top: @size;
   }
-  .px-@{size} {
-    padding-left: @size * @unit-1;
-    padding-right: @size * @unit-1;
+  .px-@{id} {
+    padding-left: @size;
+    padding-right: @size;
   }
-  .py-@{size} {
-    padding-bottom: @size * @unit-1;
-    padding-top: @size * @unit-1;
+  .py-@{id} {
+    padding-bottom: @size;
+    padding-top: @size;
   }
 }
 
diff --git a/src/navigation.less b/src/navigation.less
deleted file mode 100644
index a12988610..000000000
--- a/src/navigation.less
+++ /dev/null
@@ -1,13 +0,0 @@
-// Navigation
-.breadcrumb,
-.tab,
-.pagination,
-.nav {
-  list-style: none;
-  margin: @unit-1 0;
-}
-
-@import 'breadcrumbs.less';
-@import 'tabs.less';
-@import 'pagination.less';
-@import 'navs.less';
diff --git a/src/navs.less b/src/navs.less
index edfc3d379..5f471b09b 100644
--- a/src/navs.less
+++ b/src/navs.less
@@ -2,6 +2,8 @@
 .nav {
   display: flex;
   flex-direction: column;
+  list-style: none;
+  margin: @unit-1 0;
 
   .nav-item {
     a {
diff --git a/src/pagination.less b/src/pagination.less
index 0523bad55..7372c590c 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -1,6 +1,8 @@
 // Pagination
 .pagination {
   display: flex;
+  list-style: none;
+  margin: @unit-1 0;
   padding: @unit-1 0;
 
   .page-item {
diff --git a/src/panels.less b/src/panels.less
index 873d21f76..3c6bae893 100644
--- a/src/panels.less
+++ b/src/panels.less
@@ -20,8 +20,4 @@
     overflow-y: auto;
     padding: 0 @layout-spacing-lg;
   }
-
-  .panel-subtitle {
-    color: lighten(@body-font-color, 40%);
-  }
 }
diff --git a/src/tabs.less b/src/tabs.less
index 1abfe75a4..c5af2b603 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -1,8 +1,11 @@
 // Tabs
 .tab {
   align-items: center;
+  border-bottom: @border-width solid @border-color;
   display: flex;
   flex-wrap: wrap;
+  list-style: none;
+  margin: @unit-1 0 @unit-1 - @border-width 0;
 
   .tab-item {
     margin-top: 0;
@@ -16,8 +19,8 @@
       border-bottom: @border-width-lg solid transparent;
       color: inherit;
       display: block;
-      margin-top: 0;
-      padding: 6px 12px 4px 12px;
+      margin: 0 @unit-2 0 0;
+      padding: @unit-2 @unit-1 @unit-2 - @border-width-lg @unit-1;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -36,6 +39,10 @@
       flex: 1 0 0;
       text-align: center;
 
+      a {
+        margin: 0;
+      }
+
       .badge {
         &[data-badge]::after {
           position: absolute;
diff --git a/src/tiles.less b/src/tiles.less
index 79c1a6967..a99540ea3 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -17,11 +17,8 @@
       padding-right: @unit-2;
     }
   }
-  .tile-title {
-    line-height: @line-height;
-  }
+  .tile-title,
   .tile-subtitle {
-    color: lighten(@body-font-color, 40%);
     line-height: @line-height;
   }
 
diff --git a/src/utilities/display.less b/src/utilities/display.less
index a00aa4a11..26e611e36 100644
--- a/src/utilities/display.less
+++ b/src/utilities/display.less
@@ -1,26 +1,27 @@
 // Display
-.block {
+.d-block {
   display: block;
 }
-.inline {
+.d-inline {
   display: inline;
 }
-.inline-block {
+.d-inline-block {
   display: inline-block;
 }
-.flex {
+.d-flex {
   display: flex;
 }
-.inline-flex {
+.d-inline-flex {
   display: inline-flex;
 }
+.d-none,
 .hide {
   display: none !important;
 }
-.visible {
+.d-visible {
   visibility: visible;
 }
-.invisible {
+.d-invisible {
   visibility: hidden;
 }
 .text-hide {
diff --git a/src/utilities/position.less b/src/utilities/position.less
index 1bf33b54d..235d6a645 100644
--- a/src/utilities/position.less
+++ b/src/utilities/position.less
@@ -26,8 +26,10 @@
 }
 
 // Spacing
-.margin-variant(1);
-.margin-variant(2);
+.margin-variant(0, 0);
+.margin-variant(1, @unit-1);
+.margin-variant(2, @unit-2);
 
-.padding-variant(1);
-.padding-variant(2);
\ No newline at end of file
+.padding-variant(0, 0);
+.padding-variant(1, @unit-1);
+.padding-variant(2, @unit-2);
\ No newline at end of file