4elements, web design and consultancy

  1. Combining Underscores With Bootstrap to Create a Theme Framework: Introducing Underscores

    Underscores

    This tutorial is the second in the series Combining Bootstrap and Underscores to Create Your Own Theme Framework. In this tutorial, we are going to introduce you to one of the main components of the framework: Underscores (_s).

    Underscores (_s) was designed to serve as a base/starter theme by the WordPress.com Theme Team—the people responsible for the design and development themes that ship with WordPress. It is a culmination of the lessons learned and best practices garnered from building themes used by millions of people all over the world.

    As a "developer-only" starter theme, Underscores (_s) is not meant to be used “as is” but to be tweaked, hacked, styled, and improved upon. It is meant to provide a foundation upon which you can build your own themes.

    Since being released on GitHub on 21 Jan 2012, Underscores (_s) has:

    • had 660+ commits
    • amassed 80+ contributors
    • been starred 3,900+ times
    • and forked 1,395 times (and counting)

    A Closer Look at _s

    Underscores (_s) has the following directory structure:

    Features

    • just the right number of lean, well-commented, modern, HTML5 templates
    • a helpful 404 template
    • custom template tags in inc/template-tags.php that keep your templates clean and neat and prevent code duplication
    • some small tweaks in inc/extras.php that improve your theming experience
    • a script at js/navigation.js that makes your menu a toggled dropdown on small screens (like your phone, ready for CSS artistry)
    • two sample layouts in layouts/
    • smartly organized CSS in style.css that will help you to quickly get your design off the ground
    • support for SASS, a CSS preprocessor
    • supports internationalization (i18n)

    Advantages

    Quality Code

    Underscores (_s) is built by a team of developers responsible for the development of themes used by millions of people from all over the world. It is also backed by one of the biggest names in the WordPress community, Automattic.

    Efficient

    By providing a "base" upon which you can build, Underscores eliminates the need to keep writing the same code over and over again. This saves you a lot of time as a developer and enables you to focus on the actual process of writing themes instead of wrestling with code.

    Standards Compliant

    Underscores is compliant with WordPress Coding Standards. Using a standards-compliant theme such as Underscores as a base for your theme ensures that anyone will be able to understand and modify your code.

    Best Practices

    Underscores follows and implements best practices in theme development and general web development. This enables you as a developer to use it to create themes that take advantage of the best features of WordPress.

    The HTML5-compliant templates that _s produces increase the compatibility of your themes with (older) web browsers.

    Flexible

    Architecturally, _s was designed to be lean. It contains just the right amount of functionality, markup, and styling. This makes it simple enough to merge with other systems, libraries, and frameworks.

    The number of times that _s has been forked on GitHub is testament to its flexibility.

    How to Download _s

    There are two ways to download _s:

    From Github

    To download _s from GitHub, visit the GitHub repository and hit the download button.

    From Underscores.me

    This option is arguably the better one of the two, as it enables you to modify your theme’s name, slug, author, author URI, and description. This enables you to easily make _s your own.

    To download your customized version of Underscores (_s), go to the Underscores website, enter your theme name and hit the Generate button.

    Conclusion

    In this tutorial, we took a look at Underscores (_s), a popular WordPress starter theme created by Automattic. We looked at the features of _s and the advantages it affords the theme developer.

    Beyond introducing _s, this article was meant to build the case for why we will be using it as a main component in the theme framework that we're building in this series.

    In the next article in the series, we will have a look at Bootstrap, a popular mobile-first front-end framework created by developers at Twitter. 

     

    0 Comments

    Leave a comment › Posted in: Daily

0 Comments

Got anything to add?

(Basic HTML is fine)