Sass in underscores

Sass comes to _s

I’m pleased to announce that you can now get Sass rolled into _s by simply checking the box on Underscores.me. The community has driven this change through pull requests and forks.

It’s taken a little while, but we wanted to do it right. As with the rest of Underscores, we wanted to keep it as simple as possible, offering any extra scripting with a checkbox option rather than imposing it on all developers. Not everyone compiles or uses Sass the same, so _s shouldn’t force anyone to follow one path or another. In this sense, the Sass provided takes a pure approach, not requiring Compass or any other scripts.

Worth noting along with this addition is that the Github version of _s is now purely for development. We strongly recommend only using Underscores.me to download _s, going forward.

Just like with _s itself, the Sass it uses will probably change and evolve with time. What is in place now is a structure, a starting point. Any issues, or requests can be posted on Github, and you can even roll your own using a fork. Just like _s is your theme’s starting point, you can take the Sass in any direction you want.

I hope you are excited as I am to see Sass in _s! I’d like to thank the following people – without them this would not have been possible. As this was a Github project, here are their Github usernames: @gregrickaby @bradp @hugobaeta @obenland @sabreuse @MichaelArestad @jacklenox and myself. I look forward to seeing what things people build and where they take Sass in _s.

underscores

Granting Commit Access to Underscores

With Underscores’ growing popularity and continuing maturation as an open source project, we decided to take the next step and open up commit access to contributors outside of Automattic. Please join me in congratulating Philip Arthur Moore on becoming the first external committer to an Automattic project on GitHub.

Philip has been a fairly easy choice as we obviously know him well here at Automattic. He was with us for over three years and a driving factor in everything theme related during his time with us. But more importantly, he continues to care about Underscores and contribute in discussions and patches, and we know about his theme development skills and passion for world class themes.

We’re much more conservative with our Underscores goals and dreams than most people wanting to contribute, so it is important to us that committers share these values and understand where we see the project headed. We have no doubt that that is the case with Philip, who helped shaping Underscores from the day it started. Andrew Nacin recently published a post about how the WordPress project chooses committers, and while WordPress and Underscores are vastly different open source projects, there is still a lot to take away from it—especially around the qualities of a great contributor—that also applies to this project.

Underscores just recently celebrated its second birthday. It has become an integral part of many projects, not only at Automattic, but for theme developers all over the world. So we’re exited to have Philip back in a leading role and continue this journey with us!

Swag

HTML5 Galleries in WordPress 3.9

With the new release of WordPress will come the ability to declare support for HTML5 markup in galleries. Once a theme declared support, the definition list elements will be replaced by <figure> and <figcaption> for better semantics.

If you decide to not only adopt this new feature but also maintain backwards compatibility, then there are two ways to achieve that:

  1. Style not only the new HTML5 elements, but also add CSS selectors for the traditional definition list elements. This is the route we chose for _s to keep it as simple as possible.
  2. Filter the shortcode attributes and override the tag parameters. Since the shortcode_atts_gallery filter was introduced in 3.6, you’ll be backwards compatible with the latest two versions.

Continue reading

underscores

Don’t Update Your Theme (From _s)

I recently attended Steve Zehngut’s session on Underscores at WordCamp Los Angeles, where I was surprised to learn that a lot of developers are unsure how to update their themes with the changes we make on _s.

Version-less _s

For that we decided to make _s version-less, to prevent the feeling you need to update your _s-based themes with these constant changes. With no real roadmap, previously we bumped the version number arbitrarily whenever we felt like it, with a big enough change. Continue reading

_s Version 1.3 Ready For Download

I’m happy to announce that _s 1.3 is ready for download on both Underscores.me and GitHub. The most notable changes introduced during the last two versions are basic support for Infinite Scroll, theme customizer integration, and additional Post Formats.

There was no blog post published for _s 1.2, so consider the following notes to be a brief overview of fixes and enhancements performed on _s since version 1.1:

Version 1.3:

- Basic support for Infinite Scroll (ref.)
- Add additional Post Formats into functions.php (ref.)
- Provide context for comments title strings (ref.)

The following files changed from Version 1.2 to Version 1.3:

404.php
README.md
comments.php
functions.php
image.php
inc/jetpack.php
inc/template-tags.php
style.css

You can also run the following command in Terminal to see a log of file changes between Version 1.2 and Version 1.3:

git diff --name-only 7b7489 f1e9b4

For a full log, visit the commit history page on GitHub.

Version 1.2:

- Theme customizer integration (ref.)
- Add folder into theme for translations and additional instructions into the readme.md file (ref.)

The following files changed from Version 1.1 to Version 1.2:

404.php
README.md
archive.php
comments.php
content-single.php
content.php
footer.php
functions.php
header.php
image.php
inc/custom-header.php
inc/customizer.php
inc/extras.php
inc/jetpack.php
inc/template-tags.php
inc/theme-options/theme-options.php
inc/tweaks.php
index.php
js/customizer.js
js/html5.js
languages/readme.txt
layouts/content-sidebar-sidebar.css
layouts/content-sidebar.css
layouts/sidebar-content-sidebar.css
layouts/sidebar-content.css
layouts/sidebar-sidebar-content.css
no-results.php
page.php
readme.txt
search.php
searchform.php
single.php
style.css

You can also run the following command in Terminal to see a log of file changes between Version 1.1 and Version 1.2:

git diff --name-only f1e9b4 175ef5

For a full _s commit log, visit the commit history page on GitHub.

There are open issues that we’d like to revisit for _s 1.4, namely post format archive labeling (ref.) and a load of other Open Issues.

Please jump into the ongoing discussions on GitHub and if there’s an issue with _s that has not been raised yet, feel free to open it up.

_s

Underscores.me — The Best Way To Get Started With The _s Theme

Back in February we introduced you to _s, or Underscores, the WordPress starter theme we use at Automattic to build the majority of our themes (and even when we’re not building themes from it we’re referring to it). It’s come a long way since then with a steady stream of refinements. But one thing about it has always been … less than refined. To fork _s you’d have to do a, well, OK, kind of annoying search and replace routine that could easily trip people up if they did it wrong. Thanks to the efforts of Hugo Baeta and Konstantin Kovshenin that isn’t the case anymore. And they’ve done away with that problem with incredible style. Themers, check out Underscores.me:

You can now download your own version of _s with your own custom theme name — the search and replace is all done for you. All you have to do is theme. Plus, you can see all the beautiful people who have contributed to your favorite WordPress starter theme. Look at them all! Community theme development, FTW.

So, what are you waiting for? Get over to Underscores.me and start developing that awesome theme. We can’t wait to see it.

Getting Started With the _s Theme

There are some simple instructions in the theme readme.txt on how to get started with our new starter theme, _s, but, to be honest, I’m not exactly the most reliable readme reader myself so here are those instructions with a bit more explanation. :)

The first thing you want to do is copy the _s directory and change the name to something else. Like, say, megatherium.

Then you’ll need to do a three-step find and replace with your favorite text editor on the _s name in all the templates.

Continue reading

underscores-blank-featured

A 1000-Hour Head Start: Introducing The _s Theme

Have you checked out the Toolbox theme? Up until recently it was the starter theme we used to build free and premium themes on WordPress.com. Toolbox was (and is!) a great theme, but it could be better. Unfortunately, we wound up in a situation with Toolbox where we wanted to make some more drastic improvements to it as a starter theme but got a little stuck. We had people using it as a Parent Theme and that meant that the simplest id or class change could become a problem. Simply changing an id of #branding to #masthead in the template is enough to break most CSS.

And there were other more beneficial but potentially more disruptive changes we thought would be great to add to it. Changes like better starter styles, including a generic framework for adding your own responsive CSS; a script for elegantly handling menus on small screens; and easy-to-rework sample theme options. And whole lot more. The sort of things we found ourselves adding to 80% of the themes we were building. You know, the sort of things that you really need in a starter theme.

So, we forked Toolbox — don’t worry it’s still being updated — and made a better, faster, stronger, starter theme. A developer-only theme that gives us the freedom — us being the WordPress.com Theme Team — to iterate with abandon on the idea of WordPress starter themes. Since that theme underscores the new themes we build we call it the Underscores Theme, or _s for short.

And it’s pretty darn awesome.

Continue reading