diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bc00094de..91a1b98e56 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/README.md b/README.md index 0948a9e83f..bfaaff487d 100644 --- a/README.md +++ b/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 diff --git a/assets/manifest.json b/assets/manifest.json index 710f968f81..a3b484569e 100644 --- a/assets/manifest.json +++ b/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": { diff --git a/assets/styles/common/_global.scss b/assets/styles/common/_global.scss new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/assets/styles/common/_global.scss @@ -0,0 +1 @@ + diff --git a/assets/styles/common/_variables.less b/assets/styles/common/_variables.less deleted file mode 100644 index eb26cc93f6..0000000000 --- a/assets/styles/common/_variables.less +++ /dev/null @@ -1,6 +0,0 @@ -// Grid settings -@main-sm-columns: @grid-columns; -@sidebar-sm-columns: 4; - -// Colors -@brand-primary: #27ae60; diff --git a/assets/styles/common/_variables.scss b/assets/styles/common/_variables.scss new file mode 100644 index 0000000000..079070a994 --- /dev/null +++ b/assets/styles/common/_variables.scss @@ -0,0 +1,6 @@ +// Grid settings +$main-sm-columns: 12; +$sidebar-sm-columns: 4; + +// Colors +$brand-primary: #27ae60; diff --git a/assets/styles/common/_global.less b/assets/styles/components/_buttons.scss similarity index 100% rename from assets/styles/common/_global.less rename to assets/styles/components/_buttons.scss diff --git a/assets/styles/components/_comments.less b/assets/styles/components/_comments.scss similarity index 63% rename from assets/styles/components/_comments.less rename to assets/styles/components/_comments.scss index 4b301a261e..29ec32c8ce 100644 --- a/assets/styles/components/_comments.less +++ b/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; } diff --git a/assets/styles/components/_buttons.less b/assets/styles/components/_forms.scss similarity index 100% rename from assets/styles/components/_buttons.less rename to assets/styles/components/_forms.scss diff --git a/assets/styles/components/_grid.less b/assets/styles/components/_grid.less deleted file mode 100644 index dd01d7903f..0000000000 --- a/assets/styles/components/_grid.less +++ /dev/null @@ -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); -} diff --git a/assets/styles/components/_grid.scss b/assets/styles/components/_grid.scss new file mode 100644 index 0000000000..b6e5199cdd --- /dev/null +++ b/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); +} diff --git a/assets/styles/components/_wp-classes.less b/assets/styles/components/_wp-classes.scss similarity index 58% rename from assets/styles/components/_wp-classes.less rename to assets/styles/components/_wp-classes.scss index 83e69cd6fa..7d46b6ab1d 100644 --- a/assets/styles/components/_wp-classes.less +++ b/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; } diff --git a/assets/styles/editor-style.less b/assets/styles/editor-style.scss similarity index 100% rename from assets/styles/editor-style.less rename to assets/styles/editor-style.scss diff --git a/assets/styles/components/_forms.less b/assets/styles/layouts/_footer.scss similarity index 100% rename from assets/styles/components/_forms.less rename to assets/styles/layouts/_footer.scss diff --git a/assets/styles/layouts/_footer.less b/assets/styles/layouts/_header.scss similarity index 100% rename from assets/styles/layouts/_footer.less rename to assets/styles/layouts/_header.scss diff --git a/assets/styles/layouts/_header.less b/assets/styles/layouts/_pages.scss similarity index 100% rename from assets/styles/layouts/_header.less rename to assets/styles/layouts/_pages.scss diff --git a/assets/styles/layouts/_pages.less b/assets/styles/layouts/_posts.scss similarity index 100% rename from assets/styles/layouts/_pages.less rename to assets/styles/layouts/_posts.scss diff --git a/assets/styles/layouts/_sidebar.less b/assets/styles/layouts/_sidebar.less deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/assets/styles/layouts/_posts.less b/assets/styles/layouts/_sidebar.scss similarity index 100% rename from assets/styles/layouts/_posts.less rename to assets/styles/layouts/_sidebar.scss diff --git a/assets/styles/main.less b/assets/styles/main.scss similarity index 80% rename from assets/styles/main.less rename to assets/styles/main.scss index 790f41a20d..435c9305b7 100644 --- a/assets/styles/main.less +++ b/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"; diff --git a/assets/styles/main.scss.example b/assets/styles/main.scss.example deleted file mode 100644 index aea2ec1ed2..0000000000 --- a/assets/styles/main.scss.example +++ /dev/null @@ -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 diff --git a/bower.json b/bower.json index fa9b1c09d7..6eaf9431f8 100644 --- a/bower.json +++ b/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", diff --git a/lang/sage.pot b/lang/sage.pot index 49f74ab7cd..bb49c1b3cc 100644 --- a/lang/sage.pot +++ b/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 outdated browser. Please upgrade your browser to improve your experience." msgstr "" -#: functions.php:27 +#: functions.php:25 msgid "Error locating %s for inclusion" msgstr ""