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

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. 

Source: Tuts Plus

About the Author

Comments

  1. … [Trackback]

    […] There you will find 67827 more Infos: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  2. … [Trackback]

    […] Find More Informations here: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  3. … [Trackback]

    […] Read More Infos here: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  4. … [Trackback]

    […] Find More Informations here: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  5. … [Trackback]

    […] Informations on that Topic: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  6. … [Trackback]

    […] Read More: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  7. … [Trackback]

    […] Informations on that Topic: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  8. … [Trackback]

    […] Read More: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  9. … [Trackback]

    […] Informations on that Topic: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  10. … [Trackback]

    […] There you will find 76774 more Infos: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  11. … [Trackback]

    […] Read More Infos here: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  12. … [Trackback]

    […] Informations on that Topic: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  13. … [Trackback]

    […] There you will find 38994 more Infos: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  14. … [Trackback]

    […] Informations on that Topic: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  15. … [Trackback]

    […] Informations on that Topic: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  16. … [Trackback]

    […] Read More Infos here: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  17. … [Trackback]

    […] Read More Infos here: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  18. … [Trackback]

    […] Read More: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  19. … [Trackback]

    […] Find More Informations here: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]

  20. … [Trackback]

    […] Read More: designncode.in/combining-underscores-with-bootstrap-to-create-a-theme-framework-introducing-underscores/ […]