Customizing WordPress – #14 + 15: The Bones Starter Theme

Customizing WordPress #14 – Intro To Bones Starter Theme 3:31

LevelUpTuts
Published on Apr 29, 2014

The 14th video in the Customizing WordPress tutorial series. Here we give an introduction and get set up with the Bones Starter Theme      http://themble.com/bones/

Bones Starter Page – comes with Sass built in (_s Underscores does not.)

So we need to download the Bones theme and then upload it to our WordPress site.

If you don’t want to install the Bones theme files, you can download the files on to your computer and just look at the files in notepad.

Then you’re ready to go to video #15

You’ll also need to download and install Sass.

The author of this video has some Sass videos.

Here is a link to the official Sass website “Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.”

________________________________________________________

Customizing WordPress #15 – Bones Up and Running 12:58

LevelUpTut
Published on Apr 29, 2014

The 15th video in the Customizing WordPress tutorial series. Here we get up and running using Sass and checking out Bones’ files and structure.    http://themble.com/bones/

0:10 Today we’re going to learn how to get going with Bones using Sass* and Compass**. And we’re going to be using Sass and Compass to compile the the Sass files that they have here. *Sass (home page).   **Compass (home page) is an open-source CSS Authoring Framework.

1:31 So first we’re going to explore the Bones Directory (Folder)

fig1

1:45 Of course your going to change the name Bones to whatever you are calling Your theme in the Bones Folder and in the style.css.

3:00 Looking at the style.css there is a lot of explanation but actually no styles. That’s okay because all of our styles are being done through our Sass files and not through our css file.

3:25 So we come up to the Bones folder and just below it we see its  Library subfolder which itself has a number of subfolders.

fig2

3:40 –  9:20 So how do we use the Sass?

Well in this laong segment the author goes through each of the library folder’s subfoulders and files and explains what they are doing. Best is to just watch this a couple of times and you’ll quickly get up to speed.

9:20 –   In order to get all this stuff working we need to install Sass and Compass  although in this video he doesn’t go over it.

9:30   The author states “I’m most comfortable with Terminal. If you have another method of compiling your Sass like Codekit that’s okay. I know there is a Windows alternative.”

[Prepos is a Windows equivalent: “Compile Sass, Less, Stylus, Jade, CoffeeScript on Mac, Windows & Linux with Live Browser Reload”]

To learn the difference between a compiler and an interpreter, see: Interpreter Vs Compiler : Difference Between Interpreter and Compiler – here is a short summary (check the complete page on the link):

We generally write a computer program using a high-level language. A high-level language is one which is understandable by us humans. It contains words and phrases from the English (or other) language. But a computer does not understand high-level language. It only understands program written in 0's and 1's in binary, called the machine code. A program written in high-level language is called a source code. We need to convert the source code into machine code and this is accomplished by compilers and interpreters. Hence, a compiler or an interpreter is a program that converts program written in high-level language into machine code understood by the computer.

The above web page has a great chart on the difference between an interpreter and a compiler.

[If you’re not familiar with how to do it watch one of these YouTube videos on “How to Install Sass” and one of these videos on “How To Install Compass“. The author recommends using his series of tutorials (Sass Tutorials #1 – How to Install Sass – a series of 5 tutorials and Compass Tutorials #1 – Installing Compass and Creating a new Project w/ Compass {Both of these tutorial series are  five years old})].

This entry was posted in Ecommerce, MySQL, Open Source Software, Software, Wordpress. Bookmark the permalink.