Development for BYU responsive theme
BYU HTML Responsive Templates
Version: 1.2
This is the development repository of the BYU responsive templates
To speed up development, we're using SCSS with Compass for CSS, and Jade for HTML compiling. These tasks are run via grunt task, which also includes a test server complete with livereload.
- Node.js (Including the node package manager
npm) - Javascript-based server software. Installation info at nodejs.org - Ruby - Pre-installed on Mac. For Windows, installation info at ruby-lang.org, or use an installer package like RubyInstaller.
- Grunt - Javascript task runner. Automates compiling and other repetitive tasks. Installation info at gruntjs.com
- Sass - Compiler for CSS. Once Ruby is installed, run the command
gem install sassin the command line to install. Info at sass-lang.com - Compass - Sass extension with pre-built mixins and variables. In the command line, run
gem install compassto install. Info at compass-style.org.
Once you've downloaded the repo, you'll need to run an initial setup command so that Node will download the required grunt plugins.
First, navigate in your command line to the site directory.
Run this command once for your environment:
npm install
You should see a list of items downloading to a node_modules directory. You now have all the dependencies for this project.
Each time you want to work on the project, navigate in your command line to the site directory, and run the command:
grunt
If there are no errors, you should see in your terminal a list of several tasks that have started running. Whenever you save a watched file you'll see the list of tasks updated based on the file you've saved. For instance, your SASS and Jade files should automatically compile.
To quit watching files and directories, just use your standard command line exit keys, probably Control + C.
With grunt running, you've got an automatic test server for the project. Navigate in a browser to localhost:9001 to see the index page for the project.
You may notice that whenever you save a file one of the grunt tasks that runs is "livereload." This will automatically push any changes to the site out to browsers that happen to be viewing it. This could be a browser on your computer, or a browser on another device that is connected to your computer's server at port 9001. This enables easy testing and updating of multiple browsers and devices.
If you have any trouble with setup, contact one of the other project contributors and we can probably set you straight.