Code Monkey home page Code Monkey logo

boilerstrapwp's Introduction

BoilerstrapWP

This is a naked Wordpress theme that you can use to create your own theme. By default it's based upon HTML5 Boilerplate. If you prefer to base it upon Twitter Bootstrap, you just need to comment/uncomment a few lines in styles.scss. This naked theme is built upon HTML5 Boilerplate for Wordpress. It started as a fork, then as I was diverging from it more and more I decided to create a dedicated repository. Credits for most of the php code here doesn't go to me (Alex Muraro) but rather to the original theme's creator. BoilerstrapWP uses SASS for the stylesheets. There is a styles.scss file that takes care of importing the files it needs.

The purpose of this theme is to save you the time it takes to apply the HTML5 Boilerplate or the Twitter Bootstrap to WordPress.

The layout is based on Bruce Lawson's Designing a Blog with HTML5

Instead of using only DIVs for content layout, it uses HTML5 tags, including header, footer, nav, article, and section.

It's a very bare layout, including only the base styles that come with the boilerplate (and the bootstrap) and required WordPress styles, so layout is up to you.

In functions.php I have registered a custom menu, activated post thumbnails, registered the sidebar.

As a bonus, cheatsheet.txt contains some useful snippets to make your development faster :D

Getting Started

  1. Install Ruby on your systen if you haven't already. Once it's installed, install SASS (gem install sass).
  2. Add the boilerpress folder to your wp-content/themes folder.
  3. Decide if you're going to use HTML5 Boilerplate (in which case you're ready to go) or Twiteer Bootstrap (if so, visit styles.scss to see how to activate it).
  4. Create a first version of your stylesheets by opening the command line, switching to the "styles" folder inside this theme, and finally by issuing the command "sass --watch styles.scss:styles.css --style compressed". This way each time you change any of the scss files, styles.scss will be overwritten.
  5. Activate the theme. WP-Admin > Appearance > Themes
  6. Add some of the "Root Files" to the root directory of your website (explained below).
  7. Style away.

Root Files

404 Page

If you use permanlinks (WP-Admin > Settings > Permalinks), then WordPress handles any 404s with the 404.php included in the theme. If you don't use permalinks, then add the 404.html file you find in the html5-boilerplate folder to the root of your site.

crossdomain.xml

If you don't know what this is, you probably don't need it. www.adobe.com/devnet/flashplayer/articles/cross_domain_policy.html

robots.txt

Tells all search engines that they can read and index all pages. This is handled by WordPress so you shouldn't need to move this to the root.

Root Images

Included are default HTML5 boilerplate icons, change them with your own.

License

The Unlicense (aka: public domain) http://unlicense.org

Made by

Alessandro Muraro - alexmuraro.me

boilerstrapwp's People

Contributors

akmur avatar roflzok avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.