Adding Dough to a fresh Rails app

Getting everything installed

Add the following to your Gemfile

gem 'sass-rails'
gem 'dough-ruby', '~> 5.0', git: 'https://github.com/moneyadviceservice/dough.git', require: 'dough'
gem 'bowndler', git: '[email protected]:moneyadviceservice/bowndler.git'

If you already have gem sass-rails ensure that you either remove the version or demote it as Dough needs version 4.something.
Run bundle install
Create a .bowerrc file on the root directory with the following contents.
```
{
  "directory": "vendor/assets/bower_components"
}
```

Create a bower.json.erb file on the root directory with the following contents.

{
  "name": <YOUR_APP_NAME_HERE>,
  "private": true,
  "ignore": [
    "**/*",
    "!bower.json"
  ],
  "dependencies": {
    "dough": "<%= gem_path('dough-ruby') %>",
    "mas_dough_theme": "git://github.com/moneyadviceservice/mas_dough_theme.git#master",
    "yeast": "git://github.com/moneyadviceservice/yeast.git#master"
  }
}

Now run bowndler install.
That should have given you a bower.json file and a vendor/assets/bower_components folder full of Doughy goodness.
You may want to update your .gitignore file to ignore generated content.
```
bower.json
vendor/assets/bower_components
```

Setting up CSS

Go to app/assets/stylesheets/
Delete application.css

Create _enhanced.scss with the following content:

@import 'dough/assets/stylesheets/lib/_variables';
@import 'dough/assets/stylesheets/lib/_typography';
@import 'dough/assets/stylesheets/common';

//Yeast must be loaded before mas_dough_theme
@import 'yeast/assets/lib/all';

//MAS Dough Theme
@import 'mas_dough_theme/helpers/all';
@import 'mas_dough_theme/components/form/all';

//Button Styling
@import 'mas_dough_theme/components/button/settings';
//Need to add our variables here otherwise buttons use wrong color (red from in MAS Dough Theme)
@import 'variables';
@import 'mas_dough_theme/components/button/button';

Create _variables.scss with the following content:
```
$color-button-primary: $color-yellow-light;
```
Create enhanced_fixed.scss with the following content:
```
$responsive: false;
@import 'enhanced';
```
Create enhanced_responsive.scss with the following content:
```
$responsive: true;
@import 'enhanced';
```

Setting up JavaScript

Go to app/assets/javascripts/

Change application.js to the following:

//= require require_config.js.erb

// Components
require(['jquery', 'componentLoader'], function($, componentLoader) {
  'use strict';

  componentLoader.init($('body'));
});

And then add require_config.js.erb with the following content:

// VENDOR
//= depend_on_asset jquery/dist/jquery
//= depend_on_asset rsvp/rsvp

// MAS
//= depend_on_asset dough/assets/js/lib/componentLoader
//= depend_on_asset dough/assets/js/components/DoughBaseComponent

<%
  def requirejs_path(asset)
    javascript_path(asset).sub(/.js\z/, '')
  end
  requirejs_config = {
    paths: {
      componentLoader: requirejs_path('dough/assets/js/lib/componentLoader'),
      DoughBaseComponent: requirejs_path('dough/assets/js/components/DoughBaseComponent'),
      jquery: requirejs_path('jquery/dist/jquery'),
      rsvp: requirejs_path('rsvp/rsvp.js')
    }
  }
%>

// If requirejs is present convert the requirejs_config hash to a JSON object
if(window.requirejs) {
  requirejs.config(<%= JSON.pretty_generate(requirejs_config) %>);
}

Setting up the layout

MAS have an empty template that can be copied as a base layout for MAS projects at https://www.moneyadviceservice.org.uk/en/empty. Sometimes we don't want to include all of the markup etc., but rather just want the additional styles from front end. In that situation, do as follows:

Change app/views/layouts/application.html.erb to this:

<!DOCTYPE html>
<html>
<head>
  <title>YOUR APP TITLE</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <%= stylesheet_link_tag 'dough/assets/stylesheets/basic', media: 'all' %>
  <%= stylesheet_link_tag 'dough/assets/stylesheets/font_files', media: 'all' %>

  <% render 'layouts/mas_head' %>

  <!--[if ( gte IE 7 ) & ( lte IE 8 ) & (!IEMobile) ]-->
    <%= stylesheet_link_tag 'enhanced_fixed', media: 'all' %>
    <script>var responsiveStyle = false;</script>
  <!--[endif]-->

  <!--[if ( !IE ) | ( gte IE 9 ) ]-->
    <%= stylesheet_link_tag 'enhanced_responsive', media: 'all' %>
    <script>var responsiveStyle = true;</script>
  <!--[endif]-->

  <%= csrf_meta_tags %>
</head>
<body>

  <%= yield %>

  <%= javascript_include_tag 'requirejs/require', data: { main: javascript_path('application') } %>

</body>
</html>

Now create app/views/layouts/_mas_head.html.erb and fill it with this:

<!-- GET STYLES FROM MAS FRONTEND -->

<link href="https://6716c801720b2d014ddd-90dd74bb468e514261468bbc28ae4817.ssl.cf3.rackcdn.com/a/dough/assets/stylesheets/basic-ea7670b1f707d74ea3995dc089465c3a.css" media="screen" rel="stylesheet" />

<!--[if ( gte IE 7 ) & ( lte IE 8 ) & (!IEMobile) ]><!-->
  <link href="https://6716c801720b2d014ddd-90dd74bb468e514261468bbc28ae4817.ssl.cf3.rackcdn.com/a/dough/assets/stylesheets/font_files-ff703b1d1494bc230ea71275731abdde.css" media="screen" rel="stylesheet" />
  <link href="https://6716c801720b2d014ddd-90dd74bb468e514261468bbc28ae4817.ssl.cf3.rackcdn.com/a/enhanced_fixed-ec3120ee9d7ff3a43394b5e68669525f.css" media="all" rel="stylesheet" />
  <script src="https://6716c801720b2d014ddd-90dd74bb468e514261468bbc28ae4817.ssl.cf3.rackcdn.com/a/html5shiv/dist/html5shiv-fee07e49a2d47f6e8f4f18d64a93ed5e.js"></script>
  <script>var responsiveStyle = false;</script>
<!--<![endif]-->

<!--[if ( !IE ) | ( gte IE 9 ) ]><!-->
  <link href="https://6716c801720b2d014ddd-90dd74bb468e514261468bbc28ae4817.ssl.cf3.rackcdn.com/a/enhanced_responsive-b06b59642cc009662e29331e12b6a2a1.css" media="only all" rel="stylesheet" />
  <script>var responsiveStyle = true;</script>
<!--<![endif]-->

Config

In order to keep Rails happy we need to add the following to config/intializers/assets.rb

# Add additional assets to the asset load path
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
Rails.application.config.assets.precompile += %w(
  enhanced_fixed.css
  enhanced_responsive.css
  dough/assets/js/components/DoughBaseComponent.js
  dough/assets/js/lib/componentLoader.js
  jquery/dist/jquery.js
  requirejs/require.js
  rsvp/rsvp.js)

Provide feedback

Saved searches