Roots 7.0.0 - #982

retlehs · 2014-02-05T04:48:51Z

What's new

Leaner Roots

Soil will now be a plugin that contains:

Markup changes/clean up
- wp_head() clean up
- Remove WP version from RSS feeds
- Clean up <html> attributes
- Clean up <link> tags
- Clean up body_class()
- Wrap embedded media as suggested by Readability
- Use <figure> and <figcaption> for WP captions
- Remove unnecessary dashboard widgets
- Remove unnecessary self-closing tags
Nice search
Relative URLs

The above features will be enabled in Roots (or any other theme) if Soil is activated by using add_theme_support:

add_theme_support('soil-clean-up');
add_theme_support('soil-nice-search');
add_theme_support('soil-root-relative-urls');

Removed from Roots:

lib/cleanup.php - Move roots_get_search_form to lib/utils.php
lib/widgets.php - Remove vCard widget, move register sidebars to lib/init.php
lib/relative-urls.php

Bower for front-end package management

Bower is now being used to pull in Modernizr, jQuery, Bootstrap and Respond to assets/vendor/. Whenever you're adding front-end assets to your project, you can use bower install <package> to add them to the vendor directory.

We're also now using grunt-modernizr to make a lean build based on what tests you use in your styles and JS.

If you check out the 7.0.0 branch, run npm install from the theme dir and bower install will run after the node dependencies have been installed.

LESS organization

LESS files are organized differently, see #961 for details. tl;dr:

├── components
│   ├── _buttons.less
│   ├── _forms.less
│   ├── _media.less
│   └── _wp-classes.less
├── layouts
│   │── pages
│   │   └── _home.less
│   │── _footer.less
│   │── _general.less
│   │── _header.less
│   │── _pages.less
│   │── _posts.less
│   └── _sidebar.less
├── _bootstrap.less
├── _global.less
├── _variables.less
└── main.less

Grunt workflow

Previously, every time you updated your CSS or JS, a minified files and changes to lib/scripts.php had to be committed to the repo. The repo no longer includes any generated front-end assets. Grunt tasks are now split into two: dev and build.

The dev task runs JSHint, compiles your LESS (non-minified) and concatenates your JS

The build task runs JSHint, compiles and minifies your LESS, runs UglifyJS for concatenation and minification, generates a lean Modernizr build, and revisions CSS and JS based on the hashes.

During build, assets-manifest.json is generated with the names of the revisioned files. lib/scripts.php reads that file and tells WordPress the correct path to the assets.

Testing

Check out the 7.0.0 branch and run npm install from the theme directory. If you don't use Bedrock, you'll need to add the following to your wp-config.php:

define('WP_ENV', 'development');

Grunt tasks:

grunt dev
grunt watch (same as dev except watches for file changes)
grunt build — for staging/production

Also grab https://github.com/roots/soil's new branch and enable the plugin

Note: things are subject to change!

These changes are not yet final. Keep an eye on this PR for updates.

TODO: - Update README - Use grunt-bower-task?

kalenjohnson · 2014-02-05T05:00:49Z

Looking good. I'd be very happy to use Bower for Bootstrap in 7.0, I've been using it plenty for other projects, and even for grabbing extra Javascript/jQuery plugins for Wordpress themes/plugins

Not to go all crazy, but has anyone had experience with Gulp? http://gulpjs.com/

It's newer than GruntJS, but so far has been getting rave reviews, and looks easier to set up than Grunt, by a long shot. Even though I've gotten my head wrapped around the Gruntfile, it's still not very intuitive IMO.

talves · 2014-02-05T16:32:36Z

This branch is definitely a +1. I include the file assets for bootstrap in my version (tags) commits on my private repos, so I know what version of bootstrap I included in a release of a particular theme. The alternative was targeting a specific release in the bower file. Still not sure what way I like best.

@retlehs Thanks for considering the bower solution
@kalenjohnson Thanks for recommending it

raulghm · 2014-02-05T16:39:03Z

@kalenjohnson #gulpjs is pretty, all gruntjs plugins are compatible with gulpjs, but not there is one as "grunt-wp-version" for cache styles and script files

talves · 2014-02-05T23:57:04Z

@retlehs I propose we copy (grunt-contrib-copy) the dist files the theme requires back into the appropriate asset folders for release.

I feel this will make it easier for us to ignore the whole vendor directory when deploying and deploy only the needed asset folders.

Here is a compare of my proposed changes

* default use filename version revving instead of querystring * versioning file will be ignore

Use grunt-wp-assets for version task

Dev: don't minify Build: minify, lean Modernizr build Dev assets will load if you have defined your WP_ENV as development If you don't use Bedrock, you'll need to add this to your wp-config.php: define('WP_ENV', 'development'); TODO: lib/scripts.php shouldn't need to be committed for changes after running the version task

By writing to assets-manifest.json with grunt-filerev-assets, it's no longer necessary to commit changes to lib/scripts.php when developing

@swalkinshaw

💙 @swalkinshaw

Gavrisimo · 2014-02-22T12:29:05Z

How about creating dist folder that will also be in .gitignore and where grunt will place built files.

The reason for this, amongst other things, is that you won't have to worry about any git conflicts in files built with grunt, which can be pita sometimes... =D

retlehs · 2014-02-22T17:29:29Z

Files built with grunt are now gitignored, but would still like to add
dist to have better separation

Sent from my iPhone

On Feb 22, 2014, at 6:29 AM, "Miloš Gavrilović" notifications@github.com
wrote:

How about creating dist folder that will also be in .gitignore and where
grunt will place built files.

The reason for this, amongst other things, is that you won't have to worry
about any git conflicts in files built with grunt, which can be pita
sometimes... =D

—
Reply to this email directly or view it on
GitHubhttps://github.com//pull/982#issuecomment-35801456
.

retlehs · 2014-02-22T19:45:28Z

note: updated grunt workflow is not final. renaming the assets brings concerns about possible 404s related to caching. might go back to the querystring method and get rid of the new grunt-filerev and grunt-filerev-assets additions

kalenjohnson · 2014-05-30T16:55:54Z

Just thinking about decoupling Roots from Bootstrap, with how mixins work for both LESS and SASS, we could potentially remove all Bootstrap classes from the markup and set up something like:

.main { .col-sm-8 }

I think the issue could be from the necessity of the .row class, that would still need to be wrapped somehow.

JulienMelissas · 2014-05-30T17:23:32Z

I was thinking about this the other day too and ran into the same issue.
The yeoman generator someone made was able to decouple some things - I
think if we remove Bootstrap we're going to open another can of worms.

I guess the question is is "do we open that can"? I don't think 7.0.0 is
going to deal with it. 8.0 however, hmmmm

Julien

On Fri, May 30, 2014 at 12:56 PM, Kalen Johnson notifications@github.com
wrote:

Just thinking about decoupling Roots from Bootstrap, with how mixins work
for both LESS and SASS, we could potentially remove all Bootstrap classes
from the markup and set up something like:

.main { .col-sm-8 }

I think the issue could be from the necessity of the .row class, that
would still need to be wrapped somehow.

—
Reply to this email directly or view it on GitHub
#982 (comment).

retlehs · 2014-05-30T17:37:07Z

yeah, i need to just get 7.0.0 out the door at this point. i'm going to finish up some docs for the site and then release it as is (maybe this weekend?)

sorry it's taken so long, lots going on outside of roots right now 😓

JulienMelissas · 2014-05-30T17:37:54Z

Understood. You are the man!

Julien

On Fri, May 30, 2014 at 1:37 PM, Ben Word notifications@github.com wrote:

yeah, i need to just get 7.0.0 out the door at this point. i'm going to
finish up some docs for the site and then release it as is (maybe this
weekend?)

sorry it's taken so long, lots going on outside of roots right now [image:
😓]

—
Reply to this email directly or view it on GitHub
#982 (comment).

markthethomas · 2014-05-30T22:20:12Z

What do people think about adding imagemin (https://github.com/gruntjs/grunt-contrib-imagemin) to the gruntfile to compress any images included in the assets dir? I've found it helpful in projects using yeoman (spec. angular.) to slim down any images that can't be fetched dynamically. Not absollutely necessary, per se, but could help and easy to configure.

@retlehs thanks again for your work on this!

gitviola · 2014-05-31T10:50:31Z

@markthethomas great idea! I would also suggest to add spritesmith (https://github.com/Ensighten/grunt-spritesmith)

QWp6t · 2014-05-31T15:50:08Z

I think Imagemin and Spritesmith are too unstable/unreliable across various platforms and architectures, and they have nothing to do with Roots.

I personally use them in my projects, but I would be against including them. They sometimes even fail during npm install which will lead to unnecessary headaches for Roots devs as they have to deal with the support requests here and on the forums.

JulienMelissas · 2014-05-31T15:57:23Z

I 100% agree with @QWp6t!

On Saturday, May 31, 2014, QWp6t notifications@github.com wrote:

I think Imagemin and Spritesmith are too unstable/unreliable across
various platforms and architectures, and they have nothing to do with Roots.

I personally use them in my projects, but I would be against including
them. They sometimes even fail during npm install which will lead to
unnecessary headaches for Roots devs as they have to deal with the support
requests here and on the forums.

—
Reply to this email directly or view it on GitHub
#982 (comment).

Julien

markthethomas · 2014-05-31T19:22:13Z

Huh; I've never had any problems with it but that could just be my interaction with it so far. I'd suggest the relation to roots though would be compressing a filetype that's usually included (images of some kind) in a project.

But since there are so many image compression tools (CLI and otherwise) and since people can easily include it on their own if they like, I'll agree with @QWp6t and @JulienMelissas and I don't think inclusion should happen here.

And, I suppose, a good WP theme shouldn't have many non-dynamic images anyhow :)

here's a gist for a gruntfile with imagemin and autoprefixer if anyone wants to include them on their own: https://gist.github.com/markthethomas/6b114f5fd7d55d29eca3

Retrieve manifest.json from local file system. Fixes #1048

If I add JavaScript packages to my `assets/js/plugins/` directory, they must be concatenated, uglified, and added to `scripts.js` to be used in my theme. The `watch:js` task should also note changes to those files and directories.

Make `grunt watch:js` include `assets/js/plugins/**/*.js`

Bump NPM package versions

Roots 7.0.0

retlehs added 2 commits February 2, 2014 22:10

Load Bootstrap via Bower

645cf99

TODO: - Update README - Use grunt-bower-task?

Merge branch 'bower' into 7.0.0

810768c

retlehs added this to the 7.0.0 milestone Feb 5, 2014

retlehs added 2 commits February 4, 2014 22:51

Specific Bootstrap version

6b176ec

Load jQuery from Bower

6ace5bb

retlehs added 2 commits February 4, 2014 23:13

Load Modernizr from Bower, lean build with Grunt

d8cbdb2

Better LESS organization

cf84356

retlehs mentioned this pull request Feb 5, 2014

Better LESS organization #961

Closed

Ref #867 - Add Respond.js (not enqueued by default)

11930de

retlehs mentioned this pull request Feb 5, 2014

grunt watch and git collaboration conflicts #933

Closed

hariadi and others added 9 commits February 20, 2014 11:17

Use grunt-wp-assets for version task

77e2fdb

* default use filename version revving instead of querystring * versioning file will be ignore

Merge pull request #990 from hariadi/7.0.0-grunt-wp-asset

55994a8

Use grunt-wp-assets for version task

Run bower install after npm install

c3263f0

Fix parseFiles in grunt-modernizr task

53c2829

Update clean task for versioned assets

4e70c60

Use latest Bootstrap

f5e03e9

Use load-grunt-tasks

94cc294

Replace grunt-wp-assets with grunt-filerev and grunt-filerev-assets

5b23b7f

By writing to assets-manifest.json with grunt-filerev-assets, it's no longer necessary to commit changes to lib/scripts.php when developing

retlehs mentioned this pull request Feb 22, 2014

updated grunt versioning task to optimize team works #989

Closed

Clean up the latest changes to lib/scripts.php

4a03d3b

💙 @swalkinshaw

Add .gitkeep to assets/js/plugins

6d8b82a

retlehs mentioned this pull request Feb 22, 2014

Leaner Roots #992

Closed

Get menifest.json from file system. Fixes #1048

d82daf2

retlehs and others added 6 commits June 6, 2014 11:16

Merge pull request #1049 from QWp6t/patch-1

4653b9c

Retrieve manifest.json from local file system. Fixes #1048

Make grunt watch:js include assets/js/plugins/**/*.js

0804074

If I add JavaScript packages to my `assets/js/plugins/` directory, they must be concatenated, uglified, and added to `scripts.js` to be used in my theme. The `watch:js` task should also note changes to those files and directories.

Merge pull request #1055 from al-the-x/watch-js-plugins

dffa1b4

Make `grunt watch:js` include `assets/js/plugins/**/*.js`

Ref #1071 - Update to Bootstrap 3.2.0

34bef3e

README updates

9441ec5

README updates

b1645b5

retlehs mentioned this pull request Jun 30, 2014

Use build directory #1070

Closed

retlehs and others added 10 commits June 29, 2014 23:53

Update CHANGELOG

323fd40

Update style.css

c040970

Add note about roots-sass

a06d4d2

Update lib/init.php

17ee6e4

Merge master

bb91236

Bump NPM package versions

600677d

Merge pull request #1072 from ntwb/patch-1

0bf851a

Bump NPM package versions

Add library comments

eb5ff6f

Merge master

acc3975

Generate new roots.pot

1788272

retlehs added a commit that referenced this pull request Jul 3, 2014

Merge pull request #982 from roots/7.0.0

17716e5

Roots 7.0.0

retlehs merged commit 17716e5 into master Jul 3, 2014

retlehs deleted the 7.0.0 branch July 3, 2014 23:52

Conversation

retlehs commented Feb 5, 2014

What's new

Leaner Roots

Bower for front-end package management

LESS organization

Grunt workflow

Testing

Note: things are subject to change!

Uh oh!

kalenjohnson commented Feb 5, 2014

Uh oh!

talves commented Feb 5, 2014

Uh oh!

raulghm commented Feb 5, 2014

Uh oh!

talves commented Feb 5, 2014

Uh oh!

Gavrisimo commented Feb 22, 2014

Uh oh!

retlehs commented Feb 22, 2014

Uh oh!

retlehs commented Feb 22, 2014

Uh oh!

kalenjohnson commented May 30, 2014

Uh oh!

JulienMelissas commented May 30, 2014

Uh oh!

retlehs commented May 30, 2014

Uh oh!

JulienMelissas commented May 30, 2014

Uh oh!

markthethomas commented May 30, 2014

Uh oh!

gitviola commented May 31, 2014

Uh oh!

QWp6t commented May 31, 2014

Uh oh!

JulienMelissas commented May 31, 2014

Uh oh!

markthethomas commented May 31, 2014

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

18 participants