This is a Responsive Wordpress starter theme built with underscores.me, bourbon (mixins) and neat(grids)
Note: In order to use this starter theme, you must know how to use Bourbon mixins and Neat grids. Neat is a semantic grid framework built on top of Sass and Bourbon. It is simple enough to get you up and running in minutes, and powerful enough to handle any responsive layout you can dream of.
-
Close this repository to your local machine with the below command.
git clone git://github.com/nirmalkc/Responsive-Wordpress-starter-theme
Note: You must have git installed in your machine. After cloning this repository, do not forget to delete the
readme.txt
file from the/mytheme
folder. -
Download the underscores theme with sassify option (advanced view) from underscores.me. Extract the downloaded
ZIP
file to/mytheme
folder. -
Move the
sass
folder to/src
folder, which is one level above. -
Go to the
/sass
folder, create a new folder calledvendors
. Go inside the/vendors
folder and run the following commands to install bourbon and neat.If you are not installed bourbon and neat in your computer before, do the following
gem install bourbon gem install neat bourbon install neat install
If you have already installed bourbon and neat in your computer.
bourbon install neat install
-
Move the
_grid-settings.scss
file inside the/neat
folder. -
Open
style.scss
and add the following code at the end to support bourbon and neat./*-------------------------------------------------------------- Vendors --------------------------------------------------------------*/ @import "vendors/bourbon/bourbon" @import "vendors/neat/neat"
You can change the theme details like name, theme url, author, author url, description, version etc by changing the values of the comments mentioned in the beginning of the
style.scss
file. -
Open
package.json
file and change the nameResponsiveWordpressTheme
to yourproject
name and change the descriptionStarter theme
to yourproject description
.Note: Project name cannot have whitespace character.
-
Run the command
npm install
, this will install all the required node modules to run the grunt tasks. -
Reponsive wordpress starter theme is ready now.
It is quite simple to deploy all the compiled files to your wordpress theme folder.
Just copy the mytheme
folder to your wordpress theme directory /wp-content/themes
.
You can also change
mytheme
folder name to whichever name you would prefer. If you do so, please change the destination path in theGruntfile.js
appropriately.