# Simple guide to integrating Pages v1.0.0 with Rails v4.1.1
1. Organise everything under ```/vender``` ([screenshot](https://www.evernote.com/shard/s3/sh/b6d7e2ba-4f98-4e29-81da-284ca0c2c967/855a76618aeb7247552fe8c926f5cffa/deep/0/application.css---chcweb------Sites-chcweb-.png)) ... I'll explain in a minute, for now just create the following subfolders: ```/vender/pages-core```, ```/vender/pages-demo``` and ```/vender/pages-plugins```.
2. Pages v1.0.0 includes some CSS that is specific to it's Demo, but doesn't include the images in the build. You can download a zip of them here: https://www.dropbox.com/s/hc8hvd3sj17uiib/pages-demo.zip?dl=0 ... extract this zip into your ```/vender/pages-demo``` folder. FYI here is the zips content:
```text
img/
./img:
dashboard/
demo/
maps/
social/
./img/dashboard:
pages_hero.jpg
./img/demo:
tick.svg
./img/maps:
marker-alt-complete.svg
marker-alt-danger.svg
marker-alt-master.svg
marker-alt-primary.svg
marker-alt-success.svg
marker-alt-warning.svg
marker-complete.svg
marker-danger.svg
marker-master.svg
marker-primary.svg
marker-success.svg
marker-warning.svg
pulse-alt-complete.svg
pulse-alt-danger.svg
pulse-alt-master.svg
pulse-alt-primary.svg
pulse-alt-success.svg
pulse-alt-warning.svg
pulse-complete.svg
pulse-danger.svg
pulse-master.svg
pulse-primary.svg
pulse-success.svg
pulse-warning.svg
./img/social:
person-cropped.jpg
quote.jpg
```
3. From the Pages v1.0.0 zip you downloaded from Themeforest copy the contents of ```build/getting_started/pages``` into ```/vender/pages-core```.
4. Then copy the contents of ```build/getting_started/assets/plugins``` into ```/vender/pages-plugins```
5. Open ```config/application.rb``` and add the following inside of ```class Application < Rails::Application```:
```ruby
# Add folders to Asset Pipeline available paths
# Note that app/assets takes precedence, and will mask corresponding paths in lib and vendor
config.assets.paths << File.join(Rails.root, '/vendor/pages')
```
6. Copy the contents of ```build/getting_started/assets/img``` into ```app/assets/images```.
7. Copy ```build/getting_started/pages/ico``` over to ```app/assets/images/ico```.
8. Under ```app/assets/stylesheets``` create a new file called ```pages-asset-pipeline.less``` then copy and paste [this code](https://gist.github.com/chrisjacob/a070de58e98dff4f6d62#file-pages-asset-pipeline-less) into it.
9. Your ```app/assets/stylesheets/application.css``` should look something [like this](https://gist.github.com/chrisjacob/a070de58e98dff4f6d62#file-application-css).
10. Your ```app/assets/javascripts/application.js``` should look something [like this](https://gist.github.com/chrisjacob/a070de58e98dff4f6d62#file-application-js).
11. You will probably also want to [add this](https://gist.github.com/chrisjacob/a070de58e98dff4f6d62#file-script-js) into your code e.g. in ```app/assets/javascripts/script.js```
12. You may have noticed I'm using Turbolinks. Here's [the important parts](https://gist.github.com/chrisjacob/a070de58e98dff4f6d62#file-gemfile) of my ```/Gemfile```.
13. Copy over the content's of ```build/getting_started/index.html``` into ```app/views/layouts/application.html.erb```
14. Open ```app/views/layouts/application.html.erb``` and make the following changes...
15. Change the ```HEAD``` to this
```html
Your Title Here
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= yield :head %>
```
16. Search for ```src``` to find all references to images... update the paths to use Asset Pipeline e.g. ```data-src-retina="<%= image_path('profiles/1x.jpg') %>"``` and ```
<%= link_to(home_path) do %>
Home
<% end %>
```
18. Before your closing ```BODY``` tag add your JS
```html
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, 'data-turbolinks-eval' => false %>
 %>)
<%= link_to(home_path) do %>
Home
<% end %>
```
18. Before your closing ```BODY``` tag add your JS
```html
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, 'data-turbolinks-eval' => false %>