Merge pull request #1437 from roots/make-sass-default

Use Sass Bootstrap by default

CHANGELOG.md

@@ -1,4 +1,7 @@
 ### HEAD
+* Use Sass Bootstrap by default ([#1437](https://github.com/roots/sage/issues/1437))
+* Remove nav walker and Bootstrap navbar ([#1427](https://github.com/roots/sage/issues/1427))
+* Remove Bootstrap gallery ([#1421](https://github.com/roots/sage/issues/1421))
 * Remove hardcoded feed link ([#1426](https://github.com/roots/sage/issues/1426))
 * Move jQuery CDN feature to Soil ([#1422](https://github.com/roots/sage/issues/1422))
 * Bump `gulp-load-plugins` to 0.10.0 ([#1419](https://github.com/roots/sage/issues/1419))

README.md

@@ -2,7 +2,7 @@
 [![Build Status](https://travis-ci.org/roots/sage.svg)](https://travis-ci.org/roots/sage)
 [![devDependency Status](https://david-dm.org/roots/sage/dev-status.svg)](https://david-dm.org/roots/sage#info=devDependencies)
 
-Sage is a WordPress starter theme based on HTML5 Boilerplate, gulp, Bower, and Bootstrap, that will help you make better themes.
+Sage is a WordPress starter theme based on HTML5 Boilerplate, gulp, Bower, and Bootstrap Sass, that will help you make better themes.
 
 * Source: [https://github.com/roots/sage](https://github.com/roots/sage)
 * Homepage: [https://roots.io/sage/](https://roots.io/sage/)
@@ -24,11 +24,11 @@ For more installation notes, refer to the [Install gulp and Bower](#install-gulp
 
 ## Features
 
-* [gulp](http://gulpjs.com/) build script that compiles both Less and Sass, checks for JavaScript errors, optimizes images, and concatenates and minifies files
+* [gulp](http://gulpjs.com/) build script that compiles both Sass and Less, checks for JavaScript errors, optimizes images, and concatenates and minifies files
 * [BrowserSync](http://www.browsersync.io/) for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing
 * [Bower](http://bower.io/) for front-end package management
 * [asset-builder](https://github.com/austinpray/asset-builder) for the JSON file based asset pipeline
-* [Bootstrap](http://getbootstrap.com/)
+* [Sass](https://github.com/twbs/bootstrap-sass) [Bootstrap](http://getbootstrap.com/)
 * [Theme wrapper](https://roots.io/sage/docs/theme-wrapper/)
 * ARIA roles and microformats
 * Cleaner HTML output of navigation menus

assets/manifest.json

@@ -8,13 +8,13 @@
     },
     "main.css": {
       "files": [
-        "styles/main.less"
+        "styles/main.scss"
       ],
       "main": true
     },
     "editor-style.css": {
       "files": [
-        "styles/editor-style.less"
+        "styles/editor-style.scss"
       ]
     },
     "jquery.js": {

assets/styles/common/_global.scss

@@ -0,0 +1 @@
+

assets/styles/common/_variables.less

@@ -1,6 +0,0 @@
-// Grid settings
-@main-sm-columns:       @grid-columns;
-@sidebar-sm-columns:    4;
-
-// Colors
-@brand-primary:         #27ae60;

assets/styles/common/_variables.scss

@@ -0,0 +1,6 @@
+// Grid settings
+$main-sm-columns:       12;
+$sidebar-sm-columns:    4;
+
+// Colors
+$brand-primary:         #27ae60;

assets/styles/components/_comments.scss

@@ -1,19 +1,19 @@
 .comment-list {
-  &:extend(.list-unstyled all);
+  @include list-unstyled;
 }
 .comment-list ol {
   list-style: none;
 }
 .comment-form p {
-  &:extend(.form-group all);
+  @extend .form-group;
 }
 .comment-form input[type="text"],
 .comment-form input[type="email"],
 .comment-form input[type="url"],
 .comment-form textarea {
-  &:extend(.form-control all);
+  @extend .form-control;
 }
 .comment-form input[type="submit"] {
-  &:extend(.btn all);
-  &:extend(.btn-primary all);
+  @extend .btn;
+  @extend .btn-primary;
 }

assets/styles/components/_grid.less

@@ -1,10 +0,0 @@
-// Grid system
-.main {
-  .make-sm-column(@main-sm-columns);
-  .sidebar-primary & {
-    .make-sm-column(@main-sm-columns - @sidebar-sm-columns);
-  }
-}
-.sidebar {
-  .make-sm-column(@sidebar-sm-columns);
-}

assets/styles/components/_grid.scss

@@ -0,0 +1,10 @@
+// Grid system
+.main {
+  @include make-sm-column($main-sm-columns);
+  .sidebar-primary & {
+    @include make-sm-column($main-sm-columns - $sidebar-sm-columns);
+  }
+}
+.sidebar {
+  @include make-sm-column($sidebar-sm-columns);
+}

assets/styles/components/_wp-classes.scss

@@ -9,34 +9,34 @@
 }
 .aligncenter {
   display: block;
-  margin: (@line-height-computed / 2) auto;
+  margin: ($line-height-computed / 2) auto;
 }
 .alignleft,
 .alignright {
-  margin-bottom: (@line-height-computed / 2);
+  margin-bottom: ($line-height-computed / 2);
 }
-@media (min-width: @screen-sm-min) {
+@media (min-width: $screen-sm-min) {
   // Only float if not on an extra small device
   .alignleft {
     float: left;
-    margin-right: (@line-height-computed / 2);
+    margin-right: ($line-height-computed / 2);
   }
   .alignright {
     float: right;
-    margin-left: (@line-height-computed / 2);
+    margin-left: ($line-height-computed / 2);
   }
 }
 
 // Captions
 .wp-caption {
-  &:extend(.thumbnail all);
+  @extend .thumbnail;
 }
 .wp-caption-text {
-  &:extend(.thumbnail .caption all);
+  padding: $thumbnail-caption-padding;
 }
 
 // Text meant only for screen readers
 .screen-reader-text {
-  &:extend(.sr-only all);
-  &:extend(.sr-only-focusable all);
+  @extend .sr-only;
+  @extend .sr-only-focusable;
 }

assets/styles/main.scss

@@ -1,9 +1,10 @@
+@import "common/_variables";
+
 // Automatically injected Bower dependencies via wiredep (never manually edit this block)
-// bower:less
-@import "../../bower_components/bootstrap/less/bootstrap.less";
+// bower:scss
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
 // endbower
 
-@import "common/_variables";
 @import "common/_global";
 @import "components/_buttons";
 @import "components/_comments";

assets/styles/main.scss.example

@@ -1,14 +0,0 @@
-// How to get started using Sass instead of Less:
-//
-// 1  Remove Bootstrap for Less: `bower uninstall bootstrap --save`
-// 2. Install Bootstrap for Sass: `bower install bootstrap-sass-official --save`
-// 3. Rename this file to `main.scss` and remove `main.less`
-// 4. Rename `editor-style.less` to `editor-style.scss`
-// 5. Update the `assets/manifest.json` styles dependencies from `.less` to `.scss`
-// 6. Change variables from Less to Sass (https://discourse.roots.io/t/regarding-the-grid-help-translating-less-to-sass/3253)
-//
-// Feel free to remove this file if you're using Less
-
-// bower:scss
-@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
-// endbower

bower.json

@@ -9,34 +9,12 @@
   "dependencies": {
     "modernizr": "2.8.2",
     "jquery": "1.11.2",
-    "bootstrap": "3.3.4"
+    "bootstrap-sass-official": "3.3.4"
   },
   "overrides": {
     "modernizr": {
       "main": "./modernizr.js"
     },
-    "bootstrap": {
-      "main": [
-        "./less/bootstrap.less",
-        "./js/transition.js",
-        "./js/alert.js",
-        "./js/button.js",
-        "./js/carousel.js",
-        "./js/collapse.js",
-        "./js/dropdown.js",
-        "./js/modal.js",
-        "./js/tooltip.js",
-        "./js/popover.js",
-        "./js/scrollspy.js",
-        "./js/tab.js",
-        "./js/affix.js",
-        "./fonts/glyphicons-halflings-regular.eot",
-        "./fonts/glyphicons-halflings-regular.svg",
-        "./fonts/glyphicons-halflings-regular.ttf",
-        "./fonts/glyphicons-halflings-regular.woff",
-        "./fonts/glyphicons-halflings-regular.woff2"
-      ]
-    },
     "bootstrap-sass-official": {
       "main": [
         "./assets/stylesheets/_bootstrap.scss",

lang/sage.pot

@@ -7,13 +7,13 @@ msgstr ""
 msgid "Sorry, but the page you were trying to view does not exist."
 msgstr ""
 
-#: base.php:14
+#: base.php:12
 msgid ""
 "You are using an <strong>outdated</strong> browser. Please <a href=\"http://"
 "browsehappy.com/\">upgrade your browser</a> to improve your experience."
 msgstr ""
 
-#: functions.php:27
+#: functions.php:25
 msgid "Error locating %s for inclusion"
 msgstr ""