mvpkit 0.8.0

data/app/controllers/concerns/mvp/session_concern.rb

@@ -0,0 +1,44 @@
+module MVP
+  module SessionConcern
+    extend ActiveSupport::Concern
+
+    COOKIE_ID = '_session'
+
+    included do
+      helper_method :current_user
+    end
+
+    def current_user=(user)
+      session[COOKIE_ID] = user.id
+    end
+    alias_method :sign_in, :current_user=
+
+    def current_user
+      @current_user ||= begin
+                          if session[COOKIE_ID]
+                            Conversion.find(session[COOKIE_ID])
+                          end
+                        rescue ActiveRecord::RecordNotFound
+                          session[COOKIE_ID] = nil
+                        end
+    end
+
+    # http://blog.laaz.org/tech/2012/12/27/rails-redirect_back_or_default/
+    def store_location(path=nil)
+      session[:return_to] = case
+                            when !path.nil?
+                              path
+                            when request.get?
+                              request.url
+                            else
+                              request.referer
+                            end
+    end
+
+    # http://blog.laaz.org/tech/2012/12/27/rails-redirect_back_or_default/
+    def redirect_back_or_default(default=nil)
+      redirect_to(session.delete(:return_to) || default || request.referer)
+    end
+    alias_method :redirect_to_back_or_default, :redirect_back_or_default
+  end
+end

data/app/controllers/mvp/analytics_controller.rb

@@ -0,0 +1,12 @@
+module MinimumViableProduct
+  class AnalyticsController < ActionController::Base
+    def optout
+      cookies[AnalyticsConcern::INVISIBLE_SESSION_COOKIE] = {
+        :value   => true,
+        :expires => 1.year.from_now,
+      }
+
+      redirect_to root_path
+    end
+  end
+end

data/app/controllers/mvp/seo_controller.rb

@@ -0,0 +1,11 @@
+module MinimumViableProduct
+  class SeoController < ActionController::Base
+    def robots
+      render text: %%
+  User-agent: *
+  Disallow:
+  Sitemap: #{MVP::Engine.routes.url_helpers.sitemap_url}
+      %, content_type: "text/plain"
+    end
+  end
+end

data/app/controllers/mvp/styleguide_controller.rb

@@ -0,0 +1,23 @@
+module MinimumViableProduct
+  class StyleguideController < ActionController::Base
+    def index
+      render layout: 'minimum_viable_product/basic'
+    end
+
+    def bootstrap
+      render layout: 'minimum_viable_product/basic'
+    end
+
+    def layout_basic
+      render template: 'minimum_viable_product/styleguide/layouts/basic', layout: 'minimum_viable_product/basic'
+    end
+
+    def layout_cover
+      render template: 'minimum_viable_product/styleguide/layouts/cover', layout: 'minimum_viable_product/cover'
+    end
+
+    def layout_carousel
+      render template: 'minimum_viable_product/styleguide/layouts/carousel', layout: 'minimum_viable_product/carousel'
+    end
+  end
+end

data/app/helpers/minimum_viable_product/body_helper.rb

@@ -0,0 +1,14 @@
+module MinimumViableProduct
+  module BodyHelper
+    def body_id
+      "#{controller_name}-#{action_name}-page"
+    end
+
+    def body_classes
+      klass = []
+      klass << "#{controller_name}-pages"
+      klass << page.classes if page.classes.present?
+      klass.join(' ')
+    end
+  end
+end

data/app/helpers/minimum_viable_product/bootstrap_helper.rb

@@ -0,0 +1,38 @@
+module MinimumViableProduct
+  module BootstrapHelper
+    def col_groups_of(count, collection, opts={})
+      return if collection.blank?
+
+      html = []
+      collection.in_groups_of(count).each do |groups|
+        groups.compact.each do |obj|
+          html << capture do
+            content_tag :div, class: ["col-md-#{12/count.to_f.floor}", opts[:col_class]].compact.join(' ') do
+              yield obj
+            end
+          end.html_safe
+        end
+      end
+      concat html.join.html_safe
+    end
+
+    def row_groups_of(count, collection, opts={}, &block)
+      return if collection.blank?
+
+      html = []
+      subsetsize = (collection.count/count.to_f)
+      subsetsize.ceil.times do |i|
+        subset = collection[count*i...((count*i)+count)]
+        html << capture do
+          content_tag :div, class: ["row",opts[:row_class]].compact.join(' ') do
+            capture do
+              col_groups_of(count, subset, opts, &block)
+            end
+          end
+        end.html_safe
+      end
+
+      concat html.join.html_safe
+    end
+  end
+end

data/app/helpers/minimum_viable_product/styleguide_helper.rb

@@ -0,0 +1,4 @@
+module MinimumViableProduct
+  module StyleguideHelper
+  end
+end

data/app/models/concerns/mvp/slugification.rb

@@ -0,0 +1,24 @@
+module MVP
+  module Slugification
+    extend ActiveSupport::Concern
+
+    module ClassMethods
+      def slugify(name, opts={})
+        before_validation -> {
+          return true if self.slug.present?
+          self.slug =  slugify(self.send(name.to_sym))
+          self.slug += "-#{SecureRandom.uuid}" if self.class.find_by(slug: self.slug).present?
+        }, opts
+        validates :slug, uniqueness: true
+      end
+    end
+
+    private
+
+    def slugify(str)
+      str.gsub(/[^a-zA-Z0-9]+/,'-')
+         .gsub(/^[-]+|[-]+$/,'')
+         .downcase
+    end
+  end
+end

data/app/views/layouts/minimum_viable_product/_instrumentation.html.erb

@@ -0,0 +1,100 @@
+<% if ENV['ROLLBAR_CLIENT_ACCESS_TOKEN'] %>
+<script>
+var _rollbarConfig = {
+    accessToken: '<%= ENV['ROLLBAR_CLIENT_ACCESS_TOKEN'] %>',
+    captureUncaught: true,
+    captureUnhandledRejections: false,
+    payload: {
+        environment: "production"
+    }
+};
+// Rollbar Snippet
+!function(r){function e(t){if(o[t])return o[t].exports;var n=o[t]={exports:{},id:t,loaded:!1};return r[t].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var o={};return e.m=r,e.c=o,e.p="",e(0)}([function(r,e,o){"use strict";var t=o(1).Rollbar,n=o(2);_rollbarConfig.rollbarJsUrl=_rollbarConfig.rollbarJsUrl||"https://d37gvrvc0wt4s1.cloudfront.net/js/v1.9/rollbar.min.js";var a=t.init(window,_rollbarConfig),i=n(a,_rollbarConfig);a.loadFull(window,document,!_rollbarConfig.async,_rollbarConfig,i)},function(r,e){"use strict";function o(r){return function(){try{return r.apply(this,arguments)}catch(e){try{console.error("[Rollbar]: Internal error",e)}catch(o){}}}}function t(r,e,o){window._rollbarWrappedError&&(o[4]||(o[4]=window._rollbarWrappedError),o[5]||(o[5]=window._rollbarWrappedError._rollbarContext),window._rollbarWrappedError=null),r.uncaughtError.apply(r,o),e&&e.apply(window,o)}function n(r){var e=function(){var e=Array.prototype.slice.call(arguments,0);t(r,r._rollbarOldOnError,e)};return e.belongsToShim=!0,e}function a(r){this.shimId=++c,this.notifier=null,this.parentShim=r,this._rollbarOldOnError=null}function i(r){var e=a;return o(function(){if(this.notifier)return this.notifier[r].apply(this.notifier,arguments);var o=this,t="scope"===r;t&&(o=new e(this));var n=Array.prototype.slice.call(arguments,0),a={shim:o,method:r,args:n,ts:new Date};return window._rollbarShimQueue.push(a),t?o:void 0})}function l(r,e){if(e.hasOwnProperty&&e.hasOwnProperty("addEventListener")){var o=e.addEventListener;e.addEventListener=function(e,t,n){o.call(this,e,r.wrap(t),n)};var t=e.removeEventListener;e.removeEventListener=function(r,e,o){t.call(this,r,e&&e._wrapped?e._wrapped:e,o)}}}var c=0;a.init=function(r,e){var t=e.globalAlias||"Rollbar";if("object"==typeof r[t])return r[t];r._rollbarShimQueue=[],r._rollbarWrappedError=null,e=e||{};var i=new a;return o(function(){if(i.configure(e),e.captureUncaught){i._rollbarOldOnError=r.onerror,r.onerror=n(i);var o,a,c="EventTarget,Window,Node,ApplicationCache,AudioTrackList,ChannelMergerNode,CryptoOperation,EventSource,FileReader,HTMLUnknownElement,IDBDatabase,IDBRequest,IDBTransaction,KeyOperation,MediaController,MessagePort,ModalWindow,Notification,SVGElementInstance,Screen,TextTrack,TextTrackCue,TextTrackList,WebSocket,WebSocketWorker,Worker,XMLHttpRequest,XMLHttpRequestEventTarget,XMLHttpRequestUpload".split(",");for(o=0;o<c.length;++o)a=c[o],r[a]&&r[a].prototype&&l(i,r[a].prototype)}return e.captureUnhandledRejections&&(i._unhandledRejectionHandler=function(r){var e=r.reason,o=r.promise,t=r.detail;!e&&t&&(e=t.reason,o=t.promise),i.unhandledRejection(e,o)},r.addEventListener("unhandledrejection",i._unhandledRejectionHandler)),r[t]=i,i})()},a.prototype.loadFull=function(r,e,t,n,a){var i=function(){var e;if(void 0===r._rollbarPayloadQueue){var o,t,n,i;for(e=new Error("rollbar.js did not load");o=r._rollbarShimQueue.shift();)for(n=o.args,i=0;i<n.length;++i)if(t=n[i],"function"==typeof t){t(e);break}}"function"==typeof a&&a(e)},l=!1,c=e.createElement("script"),d=e.getElementsByTagName("script")[0],p=d.parentNode;c.crossOrigin="",c.src=n.rollbarJsUrl,c.async=!t,c.onload=c.onreadystatechange=o(function(){if(!(l||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){c.onload=c.onreadystatechange=null;try{p.removeChild(c)}catch(r){}l=!0,i()}}),p.insertBefore(c,d)},a.prototype.wrap=function(r,e){try{var o;if(o="function"==typeof e?e:function(){return e||{}},"function"!=typeof r)return r;if(r._isWrap)return r;if(!r._wrapped){r._wrapped=function(){try{return r.apply(this,arguments)}catch(e){throw e._rollbarContext=o()||{},e._rollbarContext._wrappedSource=r.toString(),window._rollbarWrappedError=e,e}},r._wrapped._isWrap=!0;for(var t in r)r.hasOwnProperty(t)&&(r._wrapped[t]=r[t])}return r._wrapped}catch(n){return r}};for(var d="log,debug,info,warn,warning,error,critical,global,configure,scope,uncaughtError,unhandledRejection".split(","),p=0;p<d.length;++p)a.prototype[d[p]]=i(d[p]);r.exports={Rollbar:a,_rollbarWindowOnError:t}},function(r,e){"use strict";r.exports=function(r,e){return function(o){if(!o&&!window._rollbarInitialized){var t=window.RollbarNotifier,n=e||{},a=n.globalAlias||"Rollbar",i=window.Rollbar.init(n,r);i._processShimQueue(window._rollbarShimQueue||[]),window[a]=i,window._rollbarInitialized=!0,t.processPayloads()}}}}]);
+// End Rollbar Snippet
+</script>
+<% end %>
+
+<% unless cookies[MVP::AnalyticsConcern::INVISIBLE_SESSION_COOKIE].to_b == true %>
+  <% if ENV['FACEBOOK_TRACKING_ID'] %>
+    <script>
+    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+    n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
+    n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
+    t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
+    document,'script','https://connect.facebook.net/en_US/fbevents.js');
+
+    fbq('init', '<%= ENV['FACEBOOK_TRACKING_ID'] %>');
+    fbq('track', "PageView");
+    <%= page.facebook_javascript.try(:html_safe) %>
+    </script>
+    <noscript><img height="1" width="1" style="display:none"
+    src="https://www.facebook.com/tr?id=<%= ENV['FACEBOOK_TRACKING_ID'] %>&ev=PageView&noscript=1"
+    /></noscript>
+    <!-- End Facebook Pixel Code -->
+  <% end %>
+
+  <% if ENV['SEGMENT_WRITE_KEY'] %>
+    <script type="text/javascript">
+    !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.1.0";
+    analytics.load('<%= ENV['SEGMENT_WRITE_KEY'] %>');
+
+    <% analytics_identify_events.each do |event| %>
+      analytics.identify('<%= event['id'] %>', <%= event['properties'].to_json.html_safe %>);
+    <% end %>
+    <% analytics_track_events.each do |event| %>
+      analytics.track('<%= event['name'] %>', <%= event['properties'].to_json.html_safe %>);
+    <% end %>
+
+    analytics.page('<%= controller.controller_path %>.<%= controller.action_name %>', {
+      iteration: "<%= MVP::Iteration.version %>"
+    });
+    }}();
+    </script>
+  <% end %>
+
+  <% if ENV['GOOGLE_ANALYTICS_ID'] %>
+    <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      ga('create', '<%= ENV['GOOGLE_ANALYTICS_ID'] %>', 'auto');
+      ga('send', 'pageview');
+    </script>
+  <% end %>
+
+  <% if ENV['HOTJAR_ID'] %>
+    <script>
+      (function(h,o,t,j,a,r){
+        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+        h._hjSettings={hjid:<%= ENV['HOTJAR_ID'] %>,hjsv:5};
+        a=o.getElementsByTagName('head')[0];
+        r=o.createElement('script');r.async=1;
+        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+        a.appendChild(r);
+      })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
+    </script>
+  <% end %>
+
+  <% if ENV['AMPLITUDE_API_KEY'] %>
+    <script type="text/javascript">
+     (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script");r.type="text/javascript";
+     r.async=true;r.src="https://d24n15hnbwhuhn.cloudfront.net/libs/amplitude-3.0.1-min.gz.js";
+     r.onload=function(){e.amplitude.runQueuedFunctions()};var i=t.getElementsByTagName("script")[0];
+     i.parentNode.insertBefore(r,i);function s(e,t){e.prototype[t]=function(){this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
+     return this}}var o=function(){this._q=[];return this};var a=["add","append","clearAll","prepend","set","setOnce","unset"];
+     for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[];return this;
+     };var p=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"];
+     for(var l=0;l<p.length;l++){s(c,p[l])}n.Revenue=c;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId"];
+     function v(e){function t(t){e[t]=function(){e._q.push([t].concat(Array.prototype.slice.call(arguments,0)));
+     }}for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){e=(!e||e.length===0?"$default_instance":e).toLowerCase();
+     if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]};e.amplitude=n;
+     })(window,document);
+
+     amplitude.getInstance().init("<%= ENV['AMPLITUDE_API_KEY'] %>");
+     <% analytics_track_events.each do |event| %>
+       amplitude.getInstance().logEvent('<%= event['name'] %>', <%= event['properties'].to_json.html_safe %>);
+     <% end %>
+    </script>
+  <% end %>
+<% end %>

data/app/views/layouts/minimum_viable_product/_meta.html.erb

@@ -0,0 +1,37 @@
+<meta charset=utf-8>
+<meta content="IE=edge" http-equiv=X-UA-Compatible>
+<meta content="width=device-width,initial-scale=1" name=viewport>
+<% if page.description %>
+<meta content="<%= page.description %>" name="description">
+<% end %>
+<% if page.author %>
+<meta content="<%= page.author %>" name="author">
+<% end %>
+<title><%= page.title %></title>
+
+<% if page.canonical_url %>
+<link rel="canonical" href="<%= page.canonical_url %>" />
+<% end %>
+
+<% if page.noindex %>
+<meta name="robots" content="noindex">
+<% end %>
+
+<% if page.og_url %>
+<meta property="og:url" content="<%= page.og_url %>" />
+<% end %>
+<% if page.og_type %>
+<meta property="og:type" content="<%= page.og_type %>" />
+<% end %>
+<% if page.og_title || page.title %>
+<meta property="og:title" content="<%= page.og_title || page.title %>" />
+<% end %>
+<% if page.og_description || page.description %>
+<meta property="og:description" content="<%= page.og_description || page.description %>" />
+<% end %>
+<% if page.og_image %>
+<meta property="og:image" content="<%= page.og_image %>" />
+<% end %>
+<% if page.twitter_card %>
+<meta name="twitter:card" content="<%= page.twitter_card %>" />
+<% end %>

data/app/views/layouts/minimum_viable_product/application.html.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html lang='en'>
+<head>
+  <%= render('layouts/minimum_viable_product/meta').gsub(/\n/,'').html_safe %>
+  <%= yield :meta %>
+  <%= yield :stylesheets %>
+  <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
+  <%= yield :javascripts %>
+  <%= csrf_meta_tags %>
+  <%= render 'layouts/minimum_viable_product/instrumentation' %>
+</head>
+<body id="<%= body_id %>" class="<%= body_classes %>" data-controller="<%= controller.controller_path %>" data-action="<%= controller.action_name %>" data-iteration="<%= MVP::Iteration.version %>">
+  <% if content_for? :body %>
+    <%= yield :body %>
+  <% else %>
+    <%= yield %>
+  <% end %>
+</body>
+</html>

data/app/views/minimum_viable_product/styleguide/_example.html.erb

@@ -0,0 +1,6 @@
+
+<%= render "minimum_viable_product/styleguide/elements/partials/#{source}" %>
+
+<pre>
+<%= File.open(File.join(MinimumViableProduct::Engine.root,'app/views/minimum_viable_product/styleguide/elements/partials/',"_#{source}.html.erb")).read.strip %>
+</pre>

data/app/views/minimum_viable_product/styleguide/bootstrap/_buttons.html.erb

@@ -0,0 +1,191 @@
+<div class="mb20">
+  <p class="mb10">
+    <button class="btn btn-default" type="button">Default</button>
+    <button class="btn btn-primary" type="button">Primary</button>
+    <button class="btn btn-success" type="button">Success</button>
+    <button class="btn btn-info" type="button">Info</button>
+    <button class="btn btn-warning" type="button">Warning</button>
+    <button class="btn btn-danger" type="button">Danger</button>
+    <button class="btn btn-link" type="button">Link</button>
+  </p>
+
+  <p class="mb10">
+    <button class="btn btn-primary btn-lg" type="button">Large button</button>
+    <button class="btn btn-default btn-lg" type="button">Large button</button>
+  </p>
+  <p class="mb10">
+    <button class="btn btn-primary" type="button">Default button</button>
+    <button class="btn btn-default" type="button">Default button</button>
+  </p>
+  <p class="mb10">
+    <button class="btn btn-primary btn-sm" type="button">Small button</button>
+    <button class="btn btn-default btn-sm" type="button">Small button</button>
+  </p>
+  <p class="mb10">
+    <button class="btn btn-primary btn-xs" type="button">Extra small button</button>
+    <button class="btn btn-default btn-xs" type="button">Extra small button</button>
+  </p>
+</div>
+
+<div class="mb20">
+  <div aria-label="Toolbar with button groups" class="btn-toolbar" role="toolbar">
+    <div aria-label="First group" class="btn-group" role="group">
+      <button class="btn btn-default" type="button">1</button>
+      <button class="btn btn-default" type="button">2</button>
+      <button class="btn btn-default" type="button">3</button>
+      <button class="btn btn-default" type="button">4</button>
+    </div>
+    <div aria-label="Second group" class="btn-group" role="group">
+      <button class="btn btn-default" type="button">5</button>
+      <button class="btn btn-default" type="button">6</button>
+      <button class="btn btn-default" type="button">7</button>
+    </div>
+    <div aria-label="Third group" class="btn-group" role="group">
+      <button class="btn btn-default" type="button">8</button>
+    </div>
+  </div>
+</div>
+
+<div class="mb20">
+  <div aria-label="Button group with nested dropdown" class="btn-group" role="group">
+    <button class="btn btn-default" type="button">1</button>
+    <button class="btn btn-default" type="button">2</button>
+    <div class="btn-group" role="group">
+      <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="btnGroupDrop1" type="button">
+        Dropdown
+        <span class="caret"></span>
+      </button>
+      <ul aria-labelledby="btnGroupDrop1" class="dropdown-menu">
+        <li>
+          <a href="#">Dropdown link</a>
+        </li>
+        <li>
+          <a href="#">Dropdown link</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="mb20">
+  <div class="btn-group">
+    <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">Default
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      <li>
+        <a href="#">Action</a>
+      </li>
+      <li>
+        <a href="#">Another action</a>
+      </li>
+      <li>
+        <a href="#">Something else here</a>
+      </li>
+      <li class="divider" role="separator"></li>
+      <li>
+        <a href="#">Separated link</a>
+      </li>
+    </ul>
+  </div>
+  <div class="btn-group">
+    <button aria-expanded="false" aria-haspopup="true" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">Primary
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      <li>
+        <a href="#">Action</a>
+      </li>
+      <li>
+        <a href="#">Another action</a>
+      </li>
+      <li>
+        <a href="#">Something else here</a>
+      </li>
+      <li class="divider" role="separator"></li>
+      <li>
+        <a href="#">Separated link</a>
+      </li>
+    </ul>
+  </div>
+  <div class="btn-group">
+    <button aria-expanded="false" aria-haspopup="true" class="btn btn-success dropdown-toggle" data-toggle="dropdown" type="button">Success
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      <li>
+        <a href="#">Action</a>
+      </li>
+      <li>
+        <a href="#">Another action</a>
+      </li>
+      <li>
+        <a href="#">Something else here</a>
+      </li>
+      <li class="divider" role="separator"></li>
+      <li>
+        <a href="#">Separated link</a>
+      </li>
+    </ul>
+  </div>
+  <div class="btn-group">
+    <button aria-expanded="false" aria-haspopup="true" class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button">Info
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      <li>
+        <a href="#">Action</a>
+      </li>
+      <li>
+        <a href="#">Another action</a>
+      </li>
+      <li>
+        <a href="#">Something else here</a>
+      </li>
+      <li class="divider" role="separator"></li>
+      <li>
+        <a href="#">Separated link</a>
+      </li>
+    </ul>
+  </div>
+  <div class="btn-group">
+    <button aria-expanded="false" aria-haspopup="true" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" type="button">Warning
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      <li>
+        <a href="#">Action</a>
+      </li>
+      <li>
+        <a href="#">Another action</a>
+      </li>
+      <li>
+        <a href="#">Something else here</a>
+      </li>
+      <li class="divider" role="separator"></li>
+      <li>
+        <a href="#">Separated link</a>
+      </li>
+    </ul>
+  </div>
+  <div class="btn-group">
+    <button aria-expanded="false" aria-haspopup="true" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button">Danger
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      <li>
+        <a href="#">Action</a>
+      </li>
+      <li>
+        <a href="#">Another action</a>
+      </li>
+      <li>
+        <a href="#">Something else here</a>
+      </li>
+      <li class="divider" role="separator"></li>
+      <li>
+        <a href="#">Separated link</a>
+      </li>
+    </ul>
+  </div>
+</div>