Remove scss files and adjust nav tab style

basscss.css

@@ -1310,16 +1310,18 @@ hr {
 }
 
 .button-nav-tab {
- border-bottom: 1px solid #ccc;
+ margin-bottom: -1px;
  border-radius: 3px 3px 0 0;
+ border-bottom: 1px solid #ccc;
 }
 
 .button-nav-tab:hover {
  background-color: rgba(0, 0, 0, .0625);
 }
 
 .button-nav-tab.is-active {
- border-bottom: 0;
+ background-color: white;
+ border-bottom: 1px solid white;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;

docs/color/index.html

@@ -130,18 +130,18 @@ <h1>Borders</h1>
 
 <div class="Example mb2">
  <div class="Example_rendered">
- <div class="p1 m1 border bg-white">.border</div>
-<div class="p1 m1 border-top bg-white">.border-top</div>
-<div class="p1 m1 border-right bg-white">.border-right</div>
-<div class="p1 m1 border-bottom bg-white">.border-bottom</div>
-<div class="p1 m1 border-left bg-white">.border-left</div>
+ <div class="p1 m1 border bg-lighter-gray">.border</div>
+<div class="p1 m1 border-top bg-lighter-gray">.border-top</div>
+<div class="p1 m1 border-right bg-lighter-gray">.border-right</div>
+<div class="p1 m1 border-bottom bg-lighter-gray">.border-bottom</div>
+<div class="p1 m1 border-left bg-lighter-gray">.border-left</div>
 
  </div>
- <div class="Example_code" data-pygmentize=""><div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border bg-white&quot;</span><span class="nt">&gt;</span>.border<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border-top bg-white&quot;</span><span class="nt">&gt;</span>.border-top<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border-right bg-white&quot;</span><span class="nt">&gt;</span>.border-right<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border-bottom bg-white&quot;</span><span class="nt">&gt;</span>.border-bottom<span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border-left bg-white&quot;</span><span class="nt">&gt;</span>.border-left<span class="nt">&lt;/div&gt;</span>
+ <div class="Example_code" data-pygmentize=""><div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border bg-lighter-gray&quot;</span><span class="nt">&gt;</span>.border<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border-top bg-lighter-gray&quot;</span><span class="nt">&gt;</span>.border-top<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border-right bg-lighter-gray&quot;</span><span class="nt">&gt;</span>.border-right<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border-bottom bg-lighter-gray&quot;</span><span class="nt">&gt;</span>.border-bottom<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;p1 m1 border-left bg-lighter-gray&quot;</span><span class="nt">&gt;</span>.border-left<span class="nt">&lt;/div&gt;</span>
 </pre></div>
 </div>
 </div>

docs/css/src/components/example.css

@@ -1,7 +1,7 @@
 /* HTML code example component */
 
 .Example {
- background-color: var(--darken-1);
+ border: 1px solid var(--darken-1);
  border-radius: var(--border-radius);
 }
 

docs/examples/borders.html

@@ -1,5 +1,5 @@
-<div class="p1 m1 border bg-white">.border</div>
-<div class="p1 m1 border-top bg-white">.border-top</div>
-<div class="p1 m1 border-right bg-white">.border-right</div>
-<div class="p1 m1 border-bottom bg-white">.border-bottom</div>
-<div class="p1 m1 border-left bg-white">.border-left</div>
+<div class="p1 m1 border bg-lighter-gray">.border</div>
+<div class="p1 m1 border-top bg-lighter-gray">.border-top</div>
+<div class="p1 m1 border-right bg-lighter-gray">.border-right</div>
+<div class="p1 m1 border-bottom bg-lighter-gray">.border-bottom</div>
+<div class="p1 m1 border-left bg-lighter-gray">.border-left</div>

docs/examples/nav-tabs.html

@@ -1,4 +1,4 @@
-<div class="clearfix">
+<div class="clearfix border-bottom">
  <a href="#!" class="left button button-nav-tab is-active">Burgers</a>
  <a href="#!" class="left button button-nav-tab">Fries</a>
  <a href="#!" class="left button button-nav-tab">Shakes</a>

docs/examples/responsive-show-hide.html

@@ -1,2 +1,2 @@
-<h3 class="hide sm-show">Visible from <code>--breakpoint-sm</code> and up.</h3>
+<h3 class="sm-show">Visible from <code>--breakpoint-sm</code> and up.</h3>
 <h3 class="sm-hide red">Hidden from <code>--breakpoint-sm</code> and up.</h3>

docs/getting-started/index.html

@@ -159,11 +159,6 @@ <h3>
  </div>
  </section>
 
- <section class="py2">
- <h2>Sass</h2>
- <p>Compiled Sass partials are provided as a convenience in the <code>scss</code> folder.</p>
- </section>
-
  <hr class="ml0 col-5 sm-col-3 hr-block bg-blue">
 
  <div class="clearfix mxn2 py2">

docs/guides/ui/index.html

@@ -212,14 +212,14 @@ <h1>Navigation</h1>
 
 <div class="Example mb2">
  <div class="Example_rendered">
- <div class="clearfix">
+ <div class="clearfix border-bottom">
  <a href="#!" class="left button button-nav-tab is-active">Burgers</a>
  <a href="#!" class="left button button-nav-tab">Fries</a>
  <a href="#!" class="left button button-nav-tab">Shakes</a>
 </div>
 
  </div>
- <div class="Example_code" data-pygmentize=""><div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;clearfix&quot;</span><span class="nt">&gt;</span>
+ <div class="Example_code" data-pygmentize=""><div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;clearfix border-bottom&quot;</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#!&quot;</span> <span class="na">class=</span><span class="s">&quot;left button button-nav-tab is-active&quot;</span><span class="nt">&gt;</span>Burgers<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#!&quot;</span> <span class="na">class=</span><span class="s">&quot;left button button-nav-tab&quot;</span><span class="nt">&gt;</span>Fries<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#!&quot;</span> <span class="na">class=</span><span class="s">&quot;left button button-nav-tab&quot;</span><span class="nt">&gt;</span>Shakes<span class="nt">&lt;/a&gt;</span>

docs/kitchen-sink/index.html

@@ -451,11 +451,11 @@ <h1 class="h2 m0">Bacon with Header and Footer</h1>
 <div class="center p1 bg-darken-3">.bg-darken-3</div>
 <div class="center p1 bg-darken-4">.bg-darken-4</div>
  </div>
- <div class="py2"> <div class="p1 m1 border bg-white">.border</div>
-<div class="p1 m1 border-top bg-white">.border-top</div>
-<div class="p1 m1 border-right bg-white">.border-right</div>
-<div class="p1 m1 border-bottom bg-white">.border-bottom</div>
-<div class="p1 m1 border-left bg-white">.border-left</div>
+ <div class="py2"> <div class="p1 m1 border bg-lighter-gray">.border</div>
+<div class="p1 m1 border-top bg-lighter-gray">.border-top</div>
+<div class="p1 m1 border-right bg-lighter-gray">.border-right</div>
+<div class="p1 m1 border-bottom bg-lighter-gray">.border-bottom</div>
+<div class="p1 m1 border-left bg-lighter-gray">.border-left</div>
  </div>
  <div class="py2"> <div class="mb1">
  <button>Button</button>
@@ -704,7 +704,7 @@ <h6>Hamburger 6</h6>
  To Control Wrapping
 </h1>
  </div>
- <div class="py2"> <h3 class="hide sm-show">Visible from <code>--breakpoint-sm</code> and up.</h3>
+ <div class="py2"> <h3 class="sm-show">Visible from <code>--breakpoint-sm</code> and up.</h3>
 <h3 class="sm-hide red">Hidden from <code>--breakpoint-sm</code> and up.</h3>
  </div>
  <div class="py2"> <div data-pygmentize="css"><div class="highlight"><pre><span class="nc">.sm-show</span><span class="o">,</span> <span class="nc">.md-show</span><span class="o">,</span> <span class="nc">.lg-show</span> <span class="p">{</span>

docs/styles/index.html

@@ -2908,7 +2908,7 @@ <h1 class="inline-block mr2">
  </td>
  <td class="sm-col-9">
 
- border-bottom: 1px solid #ccc; border-radius: 3px 3px 0 0; 
+ margin-bottom: -1px; border-radius: 3px 3px 0 0; border-bottom: 1px solid #ccc; 
  </td>
  </tr>
 
@@ -2930,7 +2930,7 @@ <h1 class="inline-block mr2">
  </td>
  <td class="sm-col-9">
 
- border-bottom: 0; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; 
+ background-color: #fff; border-bottom: 1px solid #fff; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; 
  </td>
  </tr>
 
@@ -3315,7 +3315,7 @@ <h1 class="inline-block mr2">
 
 
 
-<footer class="container px2 py4">
+<footer class="py4">
  <div class="sm-table">
  <div class="sm-table-cell nowrap py2 xs-center">
  <a class="button button-blue-outline" href="https://twitter.com/intent/tweet?text=Basscss: Low-Level CSS Toolkit&url=http://basscss.com&via=jxnblk" target="_blank">

docs/templates/docs/getting-started/index.html

@@ -143,11 +143,6 @@ <h3>
  </div>
  </section>
 
- <section class="py2">
- <h2>Sass</h2>
- <p>Compiled Sass partials are provided as a convenience in the <code>scss</code> folder.</p>
- </section>
-
  <hr class="ml0 col-5 sm-col-3 hr-block bg-blue">
 
  <div class="clearfix mxn2 py2">

docs/utility/index.html

@@ -336,11 +336,11 @@ <h2>Example</h2>
 
 <div class="Example mb2">
  <div class="Example_rendered">
- <h3 class="hide sm-show">Visible from <code>--breakpoint-sm</code> and up.</h3>
+ <h3 class="sm-show">Visible from <code>--breakpoint-sm</code> and up.</h3>
 <h3 class="sm-hide red">Hidden from <code>--breakpoint-sm</code> and up.</h3>
 
  </div>
- <div class="Example_code" data-pygmentize=""><div class="highlight"><pre><span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">&quot;hide sm-show&quot;</span><span class="nt">&gt;</span>Visible from <span class="nt">&lt;code&gt;</span>--breakpoint-sm<span class="nt">&lt;/code&gt;</span> and up.<span class="nt">&lt;/h3&gt;</span>
+ <div class="Example_code" data-pygmentize=""><div class="highlight"><pre><span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">&quot;sm-show&quot;</span><span class="nt">&gt;</span>Visible from <span class="nt">&lt;code&gt;</span>--breakpoint-sm<span class="nt">&lt;/code&gt;</span> and up.<span class="nt">&lt;/h3&gt;</span>
 <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">&quot;sm-hide red&quot;</span><span class="nt">&gt;</span>Hidden from <span class="nt">&lt;code&gt;</span>--breakpoint-sm<span class="nt">&lt;/code&gt;</span> and up.<span class="nt">&lt;/h3&gt;</span>
 </pre></div>
 </div>

gulp/docs-tasks.js

@@ -20,18 +20,12 @@ gulp.task('serve', function() {
  gulp.src('./').pipe(webserver({}));
 });
 
-gulp.task('watch-css', ['basswork', 'site-basswork', 'sassify', 'styles'], function() {
- gulp.watch(
- ['./src/**/*.css', './docs/css/src/**/*.css'],
- ['basswork', 'site-basswork', 'sassify', 'styles']
- );
+gulp.task('watch-css', ['basswork', 'site-basswork', 'styles'], function() {
+ gulp.watch(['./src/**/*.css', './docs/css/src/**/*.css'],['basswork', 'site-basswork', 'styles']);
 });
 
 gulp.task('watch-templates', ['swig'], function() {
- gulp.watch(
- ['./docs/templates/**/*.html'],
- ['swig']
- );
+ gulp.watch(['./docs/templates/**/*.html'], ['swig']);
 });
 
 gulp.task('watch-includes', function() {
@@ -66,11 +60,3 @@ gulp.task('site-basswork', function() {
  .pipe(gulp.dest('./docs/css'));
 });
 
-// Themes
-gulp.task('themes-basswork', function() {
- gulp.src('./docs/themes/bassmap/src/bassmap.css')
- .pipe(basswork()).pipe(gulp.dest('./docs/themes/bassmap'));
- gulp.src('./docs/themes/bassdock/src/bassdock.css')
- .pipe(basswork()).pipe(gulp.dest('./docs/themes/bassdock'));
-});
-

gulpfile.js

@@ -8,7 +8,7 @@ var header = require('gulp-header');
 // Custom Rework wrapper
 var basswork = require('gulp-basswork');
 
-gulp.task('default', ['basswork', 'sassify']);
+gulp.task('default', ['basswork']);
 
 gulp.task('basswork', function() {
  var data = require('./package.json');
@@ -27,28 +27,6 @@ gulp.task('basswork', function() {
  .pipe(gulp.dest('.'));
 });
 
-// Create Sass partials
-gulp.task('sassify', function() {
- gulp.src('./src/modules/base.css')
- .pipe(basswork())
- .pipe(rename('_base.scss')).pipe(gulp.dest('scss'));
- gulp.src('./src/modules/utilities.css')
- .pipe(basswork())
- .pipe(rename('_utilities.scss')).pipe(gulp.dest('scss'));
- gulp.src('./src/modules/positions.css')
- .pipe(basswork())
- .pipe(rename('_positions.scss')).pipe(gulp.dest('scss'));
- gulp.src('./src/modules/grid.css')
- .pipe(basswork())
- .pipe(rename('_grid.scss')).pipe(gulp.dest('scss'));
- gulp.src('./src/modules/table-object.css')
- .pipe(basswork())
- .pipe(rename('_table-object.scss')).pipe(gulp.dest('scss'));
- gulp.src('./src/modules/color-basic.css')
- .pipe(basswork())
- .pipe(rename('_color-basic.scss')).pipe(gulp.dest('scss'));
-});
-
 // Site-specific tasks
 require('./gulp/docs-tasks');