Adds foundation 6 🎉

Gemfile

@@ -5,7 +5,7 @@ gem 'rails', '4.2.5.1'
 # Use PostgreSQL
 gem 'pg'
 # Use SCSS for stylesheets
-gem 'sassc-rails'
+gem 'sass-rails', '~> 5.0', '>= 5.0.4'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Use CoffeeScript for .coffee assets and views

Gemfile.lock

@@ -162,8 +162,7 @@ GEM
       i18n (~> 0.5)
     faraday (0.9.2)
       multipart-post (>= 1.2, < 3)
-    ffi (1.9.10)
+    foundation-rails (6.1.2.0)
-    foundation-rails (5.5.3.2)
       railties (>= 3.1.0)
       sass (>= 3.3.0, < 3.5)
     foundation_rails_helper (1.1.0)
@@ -356,17 +355,6 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
-    sassc (1.8.4)
-      bundler
-      ffi (~> 1.9.6)
-      sass (>= 3.3.0)
-    sassc-rails (1.2.0)
-      railties (>= 4.0.0)
-      sass
-      sassc (~> 1.6)
-      sprockets (> 2.11)
-      sprockets-rails
-      tilt
     savon (2.11.1)
       akami (~> 1.2)
       builder (>= 2.1.2)
@@ -500,7 +488,7 @@ DEPENDENCIES
   rinku
   rollbar (~> 2.8.0)
   rspec-rails (~> 3.3)
-  sassc-rails
+  sass-rails (~> 5.0, >= 5.0.4)
   savon
   simple_captcha2
   social-share-button!

app/assets/javascripts/ie_alert.js.coffee

@@ -2,8 +2,8 @@ App.IeAlert =
   set_cookie_and_hide: (event) ->
     event.preventDefault()
     $.cookie('ie_alert_closed', 'true', { path: '/', expires: 365 });
-    $('.ie-alert-box').remove()
+    $('.ie-callout').remove()
 
   initialize: ->
-    $('.ie-alert-box-close-js').on 'click', (event) ->
+    $('.ie-callout-close-js').on 'click', (event) ->
       App.IeAlert.set_cookie_and_hide(event)

app/assets/stylesheets/_settings.scss

@@ -0,0 +1,548 @@
+//  Foundation for Sites Settings
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Close Button
+//  15. Drilldown
+//  16. Dropdown
+//  17. Dropdown Menu
+//  18. Flex Video
+//  19. Forms
+//  20. Label
+//  21. Media Object
+//  22. Menu
+//  23. Off-canvas
+//  24. Orbit
+//  25. Pagination
+//  26. Progress Bar
+//  27. Reveal
+//  28. Slider
+//  29. Switch
+//  30. Table
+//  31. Tabs
+//  32. Thumbnail
+//  33. Title Bar
+//  34. Tooltip
+//  35. Top Bar
+
+@import 'util/util';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$primary-color: #2199e8;
+$secondary-color: #777;
+$success-color: #43ac6a;
+$warning-color: #ffae00;
+$alert-color: #ec5840;
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 3px;
+$global-text-direction: ltr;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+);
+$breakpoint-classes: (small medium large);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-responsive-gutter: (
+  small: 20px,
+  medium: 30px,
+);
+$grid-column-align-edge: true;
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: $global-weight-normal;
+$header-font-style: normal;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$header-sizes: (
+  small: (
+    'h1': 24,
+    'h2': 20,
+    'h3': 19,
+    'h4': 18,
+    'h5': 17,
+    'h6': 16,
+  ),
+  medium: (
+    'h1': 48,
+    'h2': 40,
+    'h3': 31,
+    'h4': 25,
+    'h5': 20,
+    'h6': 16,
+  ),
+);
+$header-color: inherit;
+$header-lineheight: 1.4;
+$header-margin-bottom: 0.5rem;
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $medium-gray;
+$paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: 1rem;
+$paragraph-text-rendering: optimizeLegibility;
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$anchor-color: $primary-color;
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 1.25rem;
+$list-nested-side-margin: 1.25rem;
+$defnlist-margin-bottom: 1rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.3rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$cite-font-size: rem-calc(13);
+$cite-color: $dark-gray;
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-weight-normal;
+$subheader-margin-top: 0.2rem;
+$subheader-margin-bottom: 0.5rem;
+$stat-font-size: 2.5rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: $alert-color;
+$form-label-color-invalid: $alert-color;
+$input-error-color: $alert-color;
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $white;
+$accordion-plusminus: true;
+$accordion-item-color: foreground($accordion-background, $primary-color);
+$accordion-item-background-hover: $light-gray;
+$accordion-item-padding: 1.25rem 1rem;
+$accordion-content-background: $white;
+$accordion-content-border: 1px solid $light-gray;
+$accordion-content-color: foreground($accordion-background, $primary-color);
+$accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: foreground($badge-background);
+$badge-padding: 0.3em;
+$badge-minwidth: 2.1em;
+$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-slash: true;
+
+// 11. Button
+// ----------
+
+$button-padding: 0.85em 1em;
+$button-margin: 0 0 $global-margin 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: #fff;
+$button-color-alt: #000;
+$button-radius: $global-radius;
+$button-sizes: (
+  tiny: $small-font-size,
+  small: 0.75rem,
+  default: 0.9rem,
+  large: 1.25rem,
+);
+$button-opacity-disabled: 0.25;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 1rem;
+$buttongroup-spacing: 1px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 1rem 0;
+$callout-padding: 1rem;
+$callout-font-color: $body-font-color;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 30%;
+
+// 14. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-offset-horizontal: 1rem;
+$closebutton-offset-vertical: 0.5rem;
+$closebutton-size: 2em;
+$closebutton-lineheight: 1;
+$closebutton-color: $dark-gray;
+$closebutton-color-hover: $black;
+
+// 15. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-arrow-color: $primary-color;
+$drilldown-background: $white;
+
+// 16. Dropdown
+// ------------
+
+$dropdown-padding: 1rem;
+$dropdown-border: 1px solid $medium-gray;
+$dropdown-font-size: 1rem;
+$dropdown-width: 300px;
+$dropdown-radius: $global-radius;
+$dropdown-sizes: (
+  tiny: 100px,
+  small: 200px,
+  large: 400px,
+);
+
+// 17. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-min-width: 200px;
+$dropdownmenu-background: $white;
+$dropdownmenu-border: 1px solid $medium-gray;
+
+// 18. Flex Video
+// --------------
+
+$flexvideo-margin-bottom: rem-calc(16);
+$flexvideo-ratio: 4 by 3;
+$flexvideo-ratio-widescreen: 16 by 9;
+
+// 19. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(16);
+$helptext-color: #333;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $black;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: #333;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
+$input-cursor-disabled: default;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+
+// 20. Label
+// ---------
+
+$label-background: $primary-color;
+$label-color: foreground($label-background);
+$label-font-size: 0.8rem;
+$label-padding: 0.33333rem 0.5rem;
+$label-radius: $global-radius*10;
+
+// 21. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 22. Menu
+// --------
+
+$menu-margin: 0;
+$menu-margin-nested: 1rem;
+$menu-item-padding: 0.7rem 1rem;
+$menu-icon-spacing: 0.25rem;
+$menu-expand-max: 6;
+
+// 23. Off-canvas
+// --------------
+
+$offcanvas-size: 250px;
+$offcanvas-background: $light-gray;
+$offcanvas-zindex: -1;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+$maincontent-shadow: 0 0 10px rgba($black, 0.5);
+
+// 24. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 25. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: foreground($pagination-item-background-current);
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-arrows: true;
+
+// 26. Progress Bar
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 27. Reveal
+// ----------
+
+$reveal-background: $white;
+$reveal-width: 600px;
+$reveal-max-width: $global-width;
+$reveal-offset: rem-calc(100);
+$reveal-padding: $global-padding;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 28. Slider
+// ----------
+
+$slider-height: 0.5rem;
+$slider-width-vertical: $slider-height;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 1.4rem;
+$slider-handle-width: 1.4rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+$slider-transition: all 0.2s ease-in-out;
+
+// 29. Switch
+// ----------
+
+$switch-background: $medium-gray;
+$switch-background-active: $primary-color;
+$switch-height: 2rem;
+$switch-height-tiny: 1.5rem;
+$switch-height-small: 1.75rem;
+$switch-height-large: 2.5rem;
+$switch-radius: $global-radius;
+$switch-margin: $global-margin;
+$switch-paddle-background: $white;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+
+// 30. Table
+// ---------
+
+$table-background: $white;
+$table-color-scale: 5%;
+$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-head-font-color: $body-font-color;
+$show-header-for-stacked: false;
+
+// 31. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: $white;
+$tab-background-active: $light-gray;
+$tab-border: $light-gray;
+$tab-item-color: foreground($tab-background, $primary-color);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-expand-max: 6;
+$tab-content-background: $white;
+$tab-content-border: $light-gray;
+$tab-content-color: foreground($tab-background, $primary-color);
+$tab-content-padding: 1rem;
+
+// 32. Thumbnail
+// -------------
+
+$thumbnail-border: solid 4px $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 33. Title Bar
+// -------------
+
+$titlebar-background: $black;
+$titlebar-color: $white;
+$titlebar-padding: 0.5rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.25rem;
+
+// 34. Tooltip
+// -----------
+
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.75rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-pip-offset: 1.25rem;
+$tooltip-radius: $global-radius;
+
+// 35. Top Bar
+// -----------
+
+$topbar-padding: 0.5rem;
+$topbar-background: $light-gray;
+$topbar-title-spacing: 1rem;
+$topbar-input-width: 200px;

app/assets/stylesheets/admin.scss

@@ -11,17 +11,6 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 body.admin {
-  background: white;
-
-  h2 {
-    font-size: rem-calc(24);
-    font-weight: bold;
-  }
-
-  h3 {
-    font-size: rem-calc(14);
-    font-weight: normal;
-  }
 
   form {
     .button {
@@ -68,7 +57,6 @@ body.admin {
   }
 
   .admin-content {
-    margin-top: rem-calc(24);
 
     .proposal-new, .proposal-edit {
       padding-top: 0;
@@ -96,11 +84,6 @@ body.admin {
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .admin-sidebar {
-  margin-top: rem-calc(24);
-
-  @media (min-width: $small-breakpoint) {
-    margin-left: rem-calc(-20);
-  }
 
   a {
     color: white\9 !important;
@@ -128,9 +111,7 @@ body.admin {
       outline: 0;
 
       &:first-child {
-        background: #2B3139;
+        font-weight: bold;
-        color: rgba(255,255,255,0.3);
-        padding: rem-calc(24) rem-calc(12);
         text-transform: uppercase;
       }
 
@@ -251,7 +232,7 @@ body.admin {
   padding: rem-calc(6) rem-calc(12);
 }
 
-.button.tiny.success {
+.button.small.success {
   margin-left: rem-calc(12);
 
   &.no-margin {

app/assets/stylesheets/layout.scss

@@ -10,7 +10,6 @@
 // 08. User account
 // 09. Search
 // 10. Official levels
-// 11. Pagination
 // 12. Tables
 // 13. Social
 // 14. Pages
@@ -95,7 +94,7 @@ a {
 
 .button {
   background: $brand;
-  font-family: $font-sans;
+  font-size: $base-font-size;
 
   &:hover {
     text-decoration: none !important;
@@ -114,19 +113,6 @@ a {
   display: inline-block;
 }
 
-.row {
-  max-width: 1170px;
-}
-
-.row-full {
-  max-width: 100% !important;
-}
-
-.sidebar {
-  margin-top: $line-height;
-  margin-bottom: $line-height*2;
-}
-
 .sidebar-divider {
   border-top: 1px solid $border;
   margin-top: $line-height;
@@ -155,8 +141,8 @@ a {
 }
 
 .margin {
-  margin-top: $line-height;
   margin-bottom: $line-height;
+  margin-top: $line-height;
 }
 
 .margin-top {
@@ -167,12 +153,21 @@ a {
   margin-bottom: $line-height;
 }
 
-.back, .icon-angle-left {
+.no-margin-top {
-  @include back;
+  margin-top: rem-calc(-24);
-
-  & + h1 {
-    clear:both;
 }
+
+.padding  {
+  padding-bottom: $line-height;
+  padding-top: $line-height;
+}
+
+.highlight {
+  background: $highlight;
+}
+
+.icon-check {
+  color: $check;
 }
 
 .wrapper {
@@ -191,7 +186,7 @@ a {
   min-height: $line-height*12;
 }
 
-.ie-alert-box {
+.ie-callout {
   position: absolute;
   top: 0;
   width: 100%;
@@ -220,13 +215,21 @@ a {
   }
 }
 
-.sub-nav {
+.menu.simple {
   border-bottom: 1px solid $border;
+  margin: $line-height 0;
 
-  dd.active {
+  li {
+    padding-bottom: rem-calc(7);
+
+    a {
+      color: $text-medium;
+    }
+
+    &.active {
       border-bottom: 2px solid $brand;
       color: $brand;
-    padding-bottom: $line-height/4;
+    }
   }
 }
 
@@ -234,20 +237,32 @@ a {
   font-size: $small-font-size;
 }
 
+.relative {
+  position: relative;
+}
+
+.logo {
+  @include logo;
+}
+
+.close-button {
+  top: $line-height/2;
+}
+
+.back, .icon-angle-left {
+  @include back;
+}
+
 // 02. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 header {
-  background: $highlight;
+  background: $brand;
   border-bottom: 1px solid $border;
-
+  margin-bottom: $line-height;
-  .home-page {
-    padding: $line-height 0;
-  }
 
   .selected {
     border-bottom: 1px solid white;
-    position: relative;
   }
 
   .locale {
@@ -269,191 +284,72 @@ header {
       float: right;
     }
   }
-
-  .search-form {
-
-    @media (min-width: $small-breakpoint) {
-      margin-bottom: 0 !important;
-    }
-
-    .postfix {
-      background: $border;
-      border: 1px solid #ccc;
-      border-left: 0;
-      color: $text;
-      height: rem-calc(37);
-
-      &:hover {
-        background: $brand;
-        color: white;
-      }
-    }
-
-    input {
-      border-right: 0;
-    }
-
-    input, .button {
-     top: $line-height/4;
-    }
-
-    @media (max-width: $small-breakpoint) {
-
-      .postfix {
-        font-size: $h3-font-size;
-        padding-top: $line-height/6;
-        top: 0;
-      }
-
-      .column {
-        padding: 0;
-      }
-    }
-  }
-}
-
-.contain-to-grid {
-  background: $brand;
 }
 
 .top-bar {
   background: $brand !important;
   color: white;
-  min-height: $line-height*2;
+  height: $line-height*2;
-  max-width: 1170px !important;
+  line-height: $line-height*2;
-  padding: 0 $line-height/2;
+  padding-bottom: 0;
+  padding-top: 0;
 
   @media (min-width: $small-breakpoint) {
-    height: auto;
     padding: 0;
   }
 
-  .name {
+  .top-bar-title a {
-
-    @media (min-width: $small-breakpoint) {
-      margin-left: $line-height/2;
-    }
-
-    a {
     @include logo;
-      line-height: $line-height*2;
+    line-height: rem-calc(80) !important;
 
-      @media (min-width: $small-breakpoint) {
+    &:hover {
-        line-height: rem-calc(80); // Same as logo image height
+      text-decoration: none;
     }
   }
-  }
-
-  &.expanded .title-area {
-    background: none;
-  }
-
-  @media screen\0 {
-    .title-area {
-      min-width: rem-calc(475);
-    }
-  }
-
-  .toggle-topbar {
-
-    a {
-      font-size: rem-calc(10);
-    }
-
-    &.menu-icon a {
-      padding: 0 $line-height;
-
-      span::after {
-        right: 0;
-      }
-    }
-  }
-
-  &.expanded .toggle-topbar a {
-    color: white;
-
-    span::after {
-      box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
-    }
-  }
-}
-
-.top-bar-section {
-  margin-right: $line-height;
-  width: 100%;
 
   ul {
-    margin-left: $line-height/2;
+    background: none;
+    padding-right: rem-calc(15);
+
+    &.menu > li {
+      display: block;
 
       @media (min-width: $small-breakpoint) {
-      margin-left: 0;
+        display: table-cell;
+        height: $line-height*3.5;
       }
 
-    li {
+      a {
-      background: none;
-
-      &:not(.has-form) a:not(.button) {
-        background: none;
         color: white;
-
+        padding-left: 0;
-        &:hover {
-          background: none;
-        }
 
         @media (min-width: $small-breakpoint) {
-          background: none;
+          font-size: $small-font-size;
-          line-height: rem-calc(80); // Same as logo image height
+          padding: rem-calc(11) rem-calc(16);
-          padding: 0 $line-height/2;
         }
-      }
-
-      &:hover {
-        background: none;
-        color: white;
-        transition: text-decoration 275ms;
-      }
-
-      &.active:not(.has-form) a:not(.button) {
-        background: none;
-        height: $line-height*4;
-        line-height: $line-height*4;
-      }
-    }
-  }
-
-  ul li > a {
-    font-size: $base-font-size;
 
         &.button {
-      border-radius: 0;
-      font-size: $base-font-size;
-      line-height: $line-height*1.5;
           text-align: left;
-      background: none;
-
-      &:hover, &:focus {
-        background-color: #007095 !important;
-        text-decoration: underline;
-      }
-    }
 
           @media (min-width: $small-breakpoint) {
-
-      font-size: $small-font-size;
-
-      &.button {
             background: white;
-        border-radius: rem-calc(3);
             color: $brand;
-        font-size: $small-font-size;
-        line-height: rem-calc(15);
-        margin-top: rem-calc(16);
-        padding-left: rem-calc(15);
             text-align: center;
           }
         }
       }
     }
+  }
+
+  .menu-icon.dark {
+    height: 20px;
+
+    &::after, &:hover::after {
+      background: white;
+      box-shadow: 0 7px 0 white, 0 14px 0 white;
+    }
+  }
+}
 
 .top-links {
   background: $dark;
@@ -471,24 +367,18 @@ header {
   }
 }
 
-.subnavigation-background {
-  background: white;
-  height: rem-calc(50);
-  margin-top: rem-calc(-50);
-}
-
 .subnavigation {
-  clear: both;
+  padding-bottom: $line-height;
 
   @media (min-width: $small-breakpoint) {
     background: white;
-    min-height: rem-calc(50);
+    padding-bottom: 0;
   }
 
   a {
     color: white;
     display: inline-block;
-    line-height: $line-height*2;
+    line-height: rem-calc(46);
     position: relative;
     text-align: left;
     width: 100%;
@@ -514,6 +404,36 @@ header {
       }
     }
   }
+
+  .input-group {
+    margin-bottom: 0;
+    padding-top: $line-height/4;
+  }
+
+  .input-group-field {
+    margin-bottom: 0 !important;
+  }
+
+  .input-group-button {
+    line-height: $line-height*1.5;
+
+    button {
+      background: $border;
+      border: 1px solid #ccc;
+      border-left: 0;
+      color: $text;
+      height: $line-height*1.5;
+      line-height: $line-height*1.5;
+      padding-top: 0;
+    }
+  }
+
+  input {
+    height: $line-height*1.5 !important;
+    margin-bottom: 0;
+    margin-right: 0;
+    width: 100%;
+  }
 }
 
 .submenu {
@@ -666,10 +586,6 @@ h3.sidebar-title {
 
 .auth {
 
-  .back, .icon-angle-left {
-    @include back;
-  }
-
   p, a, .checkbox {
     font-size: $small-font-size;
   }
@@ -689,6 +605,9 @@ form.locale-form {
 
   select {
     background-image: image-url("language_select.png");
+    background-origin: border-box;
+    background-position: right;
+    background-size: 24px 24px;
 
     option {
       background: white;
@@ -701,6 +620,7 @@ form.locale-form {
       background-color: transparent;
       border: 0;
       color: white;
+      font-size: $small-font-size;
       margin-bottom: 0;
       outline: none;
       padding-left: rem-calc(3);
@@ -736,11 +656,6 @@ form {
     height: $line-height*2;
     margin-bottom: rem-calc(16);
 
-    &.search-form {
-      height: rem-calc(37);
-      padding: 0 rem-calc(6);
-    }
-
     &.error {
       margin-bottom: rem-calc(1);
     }
@@ -806,7 +721,7 @@ form {
 // 07. Alerts
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.alert-box {
+.callout {
   font-family: $font-sans;
   font-size: $small-font-size;
 
@@ -816,7 +731,7 @@ form {
     color: $success-color;
   }
 
-  &.info {
+  &.primary {
     background-color: $info-bg;
     border-color: $info-border;
     color: $info-color;
@@ -850,7 +765,7 @@ span.error, small.error {
   color: $alert-color;
 }
 
-span.error, small.no-error {
+span.no-error, small.no-error {
   background: $success-bg;
   color: $success-color;
 }
@@ -866,17 +781,10 @@ label.error, label.error a {
   color: $alert-color;
 }
 
-.alert-messages {
-  background-color: white;
-  padding-top: $line-height;
-}
-
 // 08. User account
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .account {
-  background: white;
-  padding-top: $line-height;
 
   select {
     height: $line-height*2;
@@ -1038,7 +946,6 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   h3 {
     border-top: 1px solid $votes-border;
     display: inline-block;
-    font-family: $font-family-sans-serif;
     font-size: rem-calc(16);
     margin: -1px 0 $line-height/2;
     padding-top: $line-height/4;
@@ -1062,7 +969,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
     margin-bottom: 0;
     margin-top: rem-calc(28);
     position: absolute;
-    right: 15px;
+    right: 0;
     z-index: 2;
   }
 }
@@ -1121,17 +1028,6 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   background: $level-5;
 }
 
-// 11. Pagination
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-ul.pagination {
-  margin-top: $line-height;
-
-  li {
-    color: $text-medium;
-  }
-}
-
 // 12. Tables
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -1372,84 +1268,42 @@ table {
 // 14. Pages
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.page {
+.more-information {
-  padding-bottom: $line-height*2;
-
-  .menu {
-    margin-top: $line-height;
 
   ul {
-      list-style-type: none;
-      margin-left: 0;
 
-      & ul {
+    li {
-        margin-left: $line-height/2;
+      border-bottom: 1px solid $border;
-      }
+      font-weight: bold;
+      margin-left: rem-calc(-12);
+      position: relative;
+
+      span {
+        color: $text;
+        display: inline-block;
+        font-weight: normal;
       }
 
       a {
         display: block;
-      font-size: rem-calc(13);
+        padding: $line-height/2;
-      margin-bottom: $line-height/2;
-    }
-  }
 
-  .icon-check {
+        &:hover {
-    color: $check;
+          background: $highlight;
-  }
-
-  .text {
-    margin-top: $line-height;
-
-    h1, h2, h3, h4, h5, h6 {
-      text-align: left;
-    }
-
-    ul, ol {
-      margin-left: $line-height/2;
-
-      li {
-        font-size: rem-calc(15);
-        line-height: rem-calc(30);
-        margin-bottom: $line-height/2;
-      }
-    }
-
-    p {
-      font-size: rem-calc(15);
-      line-height: rem-calc(30);
-    }
-  }
-
-  .more-information {
-    margin-top: $line-height;
-
-    ul {
-      list-style-type: none;
-      margin-left: 0;
-
-      li {
-        border-bottom: 1px solid $border;
-        font-size: rem-calc(16);
-        font-weight: bold;
-        padding-bottom: $line-height/2;
-        position: relative;
-        text-align: left;
 
           span {
-          color: $text-medium;
+            text-decoration: none;
-          display: block;
+          }
-          font-size: $small-font-size;
+        }
-          font-weight: normal;
       }
 
       &:after {
         content: none;
-          color: $text-light;
+        color: $text-medium;
         font-family: "icons" !important;
         position: absolute;
         right: 0;
-          top: rem-calc(12);
+        top: 24px;
 
         @media (min-width: $small-breakpoint) {
           content: 'c';
@@ -1458,13 +1312,11 @@ table {
     }
   }
 }
-}
 
 // 15. Verification
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .verification {
-  min-height: $line-height*25;
 
   @media (min-width: $small-breakpoint) {
     .left + .left {
@@ -1497,7 +1349,7 @@ table {
   }
 
   .verification-step {
-    font-family: $font-sans;
+    background: #f6f6f6;
     font-weight: bold;
     line-height: rem-calc(20);
     padding-top: $line-height/4;
@@ -1525,10 +1377,12 @@ table {
     }
 
     &.active {
+      background: #43AC6A;
       color: white;
     }
 
     &.completed {
+      background: #43AC6A;
       color: rgba(255,255,255,.5);
 
       .number {
@@ -1782,7 +1636,6 @@ table {
 }
 
 .flag-disable, .flag-active {
-  line-height: $line-height;
   vertical-align: middle;
 }
 
@@ -1794,6 +1647,10 @@ table {
   color: $delete;
 }
 
+.dropdown-pane a {
+  color: $text-medium;
+}
+
 // 18. Activity
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 

app/assets/stylesheets/mixins.scss

@@ -7,18 +7,18 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 @mixin back {
+  clear: both;
   color: $text-medium;
-  font-family: $font-sans;
+  float: left;
-  font-size: $small-font-size;
 }
 
 @mixin logo {
   color: white;
   font-family: $font-logo;
+  font-size: $h3-font-size;
   font-weight: lighter;
 
   @media (min-width: $small-breakpoint) {
-    font-size: $h3-font-size;
     line-height: $line-height*2;
     margin-top: 0;
   }

app/assets/stylesheets/participation.scss

@@ -275,7 +275,6 @@
 .debate-new, .debate-edit,
 .proposal-new, .proposal-edit,
 .spending-proposal-new, .spending-proposal-edit  {
-  padding-top: $line-height;
 
   .back {
     @include back;
@@ -337,15 +336,6 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .debate-show, .proposal-show {
-  padding-top: rem-calc(12);
-
-  .back, .icon-angle-left {
-    @include back;
-  }
-
-  h4 {
-    margin: rem-calc(12) 0;
-  }
 
   .edit-debate, .edit-proposal {
     margin-bottom: 0;
@@ -355,7 +345,7 @@
     clear: both;
     color: $text-medium;
     font-size: $small-font-size;
-    line-height: $line-height*2;
+    min-height: $line-height*2;
     position: relative;
 
     a {
@@ -433,8 +423,8 @@
   .document-link, .video-link {
     border: 1px solid $border;
     display: block;
-    margin-top: rem-calc(12);
+    margin: $line-height/2 0;
-    padding: rem-calc(12);
+    padding: $line-height/2;
     position: relative;
 
     a {
@@ -478,7 +468,7 @@
       padding: rem-calc(24);
     }
 
-    @media (min-width: $small-breakpoint  + em-calc(1)) and (max-width:$medium-breakpoint) {
+    @media (min-width: $small-breakpoint  + rem-calc(1)) and (max-width:$medium-breakpoint) {
       .in-favor, .against {
         text-align: left;
         width: rem-calc(100);
@@ -595,6 +585,7 @@
     .debate-content, .proposal-content {
       margin: 0;
       min-height: rem-calc(180);
+      position: relative;
 
       .tags {
         display: block;
@@ -610,12 +601,12 @@
 
     .icon-debates {
       color: $debates;
-      left: rem-calc(60);
+      left: rem-calc(48);
     }
 
     .icon-proposals {
       color: $proposals;
-      left: rem-calc(88);
+      left: rem-calc(72);
     }
 
     .debate-info, .proposal-info {
@@ -807,10 +798,6 @@
 .featured-debates, .featured-proposals {
   padding: $line-height/2 0;
 
-  @media (min-width: $small-breakpoint) {
-    margin-top: $line-height !important;
-  }
-
   @media (min-width: $medium-breakpoint) {
     margin-left: 0 !important;
     margin-right: 0 !important;

app/assets/stylesheets/variables.scss

@@ -128,8 +128,8 @@ $comment-official:  rgba(70,219,145,.3);
 // 06. Responsive
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-$small:             em-calc(480);
+$small:             rem-calc(480);
-$small-breakpoint:  em-calc(640);
+$small-breakpoint:  rem-calc(640);
-$medium-breakpoint: em-calc(1024);
+$medium-breakpoint: rem-calc(1024);
-$large-breakpoint:  em-calc(1440);
+$large-breakpoint:  rem-calc(1440);
-$xlarge-breakpoint: em-calc(1920);
+$xlarge-breakpoint: rem-calc(1920);

app/views/account/show.html.erb

@@ -1,7 +1,7 @@
 <div class="row account">
   <div class="small-12 column">
-    <div class="right text-right">
+    <div class="float-right text-right">
-      <%= link_to t("account.show.change_credentials_link"), edit_user_registration_path, class: "button radius small secondary" %>
+      <%= link_to t("account.show.change_credentials_link"), edit_user_registration_path, class: "button secondary" %>
       <br>
       <%= link_to t("account.show.erase_account_link"), users_registrations_delete_form_path, class: "delete" %>
     </div>
@@ -61,7 +61,7 @@
             <% end %>
           </div>
 
-          <%= f.submit t("account.show.save_changes_submit"), class: "button radius" %>
+          <%= f.submit t("account.show.save_changes_submit"), class: "button" %>
         </div>
 
         <div class="user-permissions small-12 medium-6 column">
@@ -105,9 +105,9 @@
                     <%= t("account.show.verified_account") %>
                   </p>
                 <% elsif current_user.level_two_verified? %>
-                  <%= link_to t("account.show.finish_verification"), verification_path, class: "button radius success" %>
+                  <%= link_to t("account.show.finish_verification"), verification_path, class: "button success" %>
                 <% else %>
-                  <%= link_to t("account.show.verify_my_account"), verification_path, class: "button radius success" %>
+                  <%= link_to t("account.show.verify_my_account"), verification_path, class: "button success" %>
                 <% end %>
               </span>
             </div>

app/views/admin/comments/index.html.erb

@@ -21,12 +21,12 @@
                 restore_admin_comment_path(comment, request.query_parameters),
                 method: :put,
                 data: { confirm: t("admin.actions.confirm") },
-                class: "button radius tiny success right" %>
+                class: "button small success float-right" %>
           <% unless comment.confirmed_hide? %>
             <%= link_to t("admin.actions.confirm_hide"),
                   confirm_hide_admin_comment_path(comment, request.query_parameters),
                   method: :put,
-                  class: "button radius tiny warning right" %>
+                  class: "button small warning float-right" %>
           <% end %>
         </div>
       </div>

app/views/admin/debates/index.html.erb

@@ -19,14 +19,14 @@
               restore_admin_debate_path(debate, request.query_parameters),
               method: :put,
               data: { confirm: t("admin.actions.confirm") },
-              class: "button radius tiny success no-margin" %>
+              class: "button small success no-margin" %>
       </td>
       <td>
         <% unless debate.confirmed_hide? %>
           <%= link_to t("admin.actions.confirm_hide"),
                 confirm_hide_admin_debate_path(debate, request.query_parameters),
                 method: :put,
-                class: "button radius tiny warning right" %>
+                class: "button small warning float-right" %>
         <% end %>
       </td>
     </tr>

app/views/admin/moderators/_moderator.html.erb

@@ -5,9 +5,9 @@
   <%= link_to t('admin.moderators.moderator.delete'),
     admin_moderator_path(moderator),
     method: :delete,
-    class: "button tiny radius alert right"
+    class: "button small alert float-right"
   %>
 <% else %>
   <%= link_to t('admin.moderators.moderator.add'),{ controller: "admin/moderators", action: :create, user_id: moderator.user_id },
-    method: :post, class: "button tiny radius success right" %>
+    method: :post, class: "button small success float-right" %>
 <% end %>

app/views/admin/moderators/index.html.erb

@@ -6,7 +6,7 @@
         <%= text_field_tag :email, '', placeholder: t('admin.moderators.search.email_placeholder') %>
       </div>
       <div class="small-12 medium-6 column">
-        <%= submit_tag t('admin.moderators.search.search'), class: 'button radius' %>
+        <%= submit_tag t('admin.moderators.search.search'), class: 'button' %>
       </div>
     <% end %>
   </div>

app/views/admin/officials/edit.html.erb

@@ -1,12 +1,12 @@
 <h2>
   <%= t("admin.officials.edit.title") %>
-  <span class="official right"><strong><%= @user.name %></strong> (<%= @user.email %>)</span>
+  <span class="official float-right"><strong><%= @user.name %></strong> (<%= @user.email %>)</span>
 </h2>
 
 <%= form_for @user, url: admin_official_path(@user)  do |f| %>
   <%= f.text_field :official_position %>
   <%= f.select :official_level, official_level_options %>
-  <%= link_to t("admin.officials.edit.back"), admin_officials_path, class: "button radius small secondary" %>
+  <%= link_to t("admin.officials.edit.back"), admin_officials_path, class: "button small secondary" %>
   <%= f.submit %>
 
   <% if @user.official? %>

app/views/admin/officials/index.html.erb

@@ -15,7 +15,7 @@
       <%= official.official_position %>
     </span>
 
-    <%= link_to official.official? ? t("admin.officials.search.edit_official") : t("admin.officials.search.make_official"), edit_admin_official_path(official), class: "button radius tiny right" %>
+    <%= link_to official.official? ? t("admin.officials.search.edit_official") : t("admin.officials.search.make_official"), edit_admin_official_path(official), class: "button small float-right" %>
   </li>
 <% end %>
 </ul>

app/views/admin/officials/search.html.erb

@@ -15,7 +15,7 @@
       <span class="bullet">&nbsp;&bull;&nbsp;</span>
       <span class="level"><%= t("admin.officials.level_#{user.official_level}") %></span>
 
-    <%= link_to user.official? ? t("admin.officials.search.edit_official") : t("admin.officials.search.make_official"), edit_admin_official_path(user), class: "button radius tiny right" %>
+    <%= link_to user.official? ? t("admin.officials.search.edit_official") : t("admin.officials.search.make_official"), edit_admin_official_path(user), class: "button small float-right" %>
     </li>
   <% end %>
 </ul>

app/views/admin/organizations/index.html.erb

@@ -7,7 +7,7 @@
       <%= text_field_tag :term, "", placeholder: t("admin.organizations.index.search_placeholder") %>
     </div>
     <div class="form-inline small-12 medium-6 column">
-      <%= f.submit t("admin.organizations.index.search"), class: "button radius success" %>
+      <%= f.submit t("admin.organizations.index.search"), class: "button success" %>
     </div>
   </div>
 <% end %>
@@ -36,7 +36,7 @@
       <td>
         <%= link_to t("admin.organizations.index.verify"),
                 verify_admin_organization_path(organization, request.query_parameters),
-                method: :put, class: "button radius tiny success"
+                method: :put, class: "button small success"
         %>
       </td>
     <% end %>
@@ -49,7 +49,7 @@
     <% if can? :reject, organization %>
       <td><%= link_to t("admin.organizations.index.reject"),
                 reject_admin_organization_path(organization, request.query_parameters),
-                method: :put, class: "button radius tiny alert"
+                method: :put, class: "button small alert"
           %>
       </td>
     <% end %>

app/views/admin/organizations/search.html.erb

@@ -7,7 +7,7 @@
       <%= text_field_tag :term, "", placeholder: t("admin.organizations.index.search_placeholder") %>
     </div>
     <div class="form-inline small-12 medium-6 column">
-      <%= f.submit t("admin.organizations.index.search"), class: "button radius success" %>
+      <%= f.submit t("admin.organizations.index.search"), class: "button success" %>
     </div>
   </div>
 <% end %>
@@ -32,7 +32,7 @@
       <td>
         <%= link_to t("admin.organizations.index.verify"),
                 verify_admin_organization_path(organization, request.query_parameters),
-                method: :put, class: "button radius tiny success"
+                method: :put, class: "button small success"
         %>
       </td>
     <% end %>
@@ -45,7 +45,7 @@
     <% if can? :reject, organization %>
       <td><%= link_to t("admin.organizations.index.reject"),
                 reject_admin_organization_path(organization, request.query_parameters),
-                method: :put, class: "button radius tiny alert"
+                method: :put, class: "button small alert"
           %>
       </td>
     <% end %>

app/views/admin/proposals/index.html.erb

@@ -27,14 +27,14 @@
               restore_admin_proposal_path(proposal, request.query_parameters),
               method: :put,
               data: { confirm: t("admin.actions.confirm") },
-              class: "button radius tiny success no-margin" %>
+              class: "button small success no-margin" %>
       </td>
       <td>
         <% unless proposal.confirmed_hide? %>
           <%= link_to t("admin.actions.confirm_hide"),
                 confirm_hide_admin_proposal_path(proposal, request.query_parameters),
                 method: :put,
-                class: "button radius tiny warning right" %>
+                class: "button small warning float-right" %>
         <% end %>
       </td>
     </tr>

app/views/admin/settings/index.html.erb

@@ -7,7 +7,7 @@
 
       <%= form_for(setting, url: admin_setting_path(setting), html: { id: "edit_#{dom_id(setting)}"}) do |f| %>
         <%= f.text_area :value, label: false, id: dom_id(setting), lines: 1 %>
-        <%= f.submit(t('admin.settings.index.update_setting'), class: "button radius tiny success") %>
+        <%= f.submit(t('admin.settings.index.update_setting'), class: "button small success") %>
       <% end %>
     </li>
   <% end %>
@@ -27,7 +27,7 @@
       <%= form_for(feature_flag, url: admin_setting_path(feature_flag), html: { id: "edit_#{dom_id(feature_flag)}"}) do |f| %>
 
         <%= f.hidden_field :value, id: dom_id(feature_flag), value: (feature_flag.enabled? ? "" : "active") %>
-        <%= f.submit(t("admin.settings.index.features.#{feature_flag.enabled? ? 'disable' : 'enable'}"), class: "button radius tiny #{feature_flag.enabled? ? 'warning' : 'success'}", data: {confirm: t("admin.actions.confirm")}) %>
+        <%= f.submit(t("admin.settings.index.features.#{feature_flag.enabled? ? 'disable' : 'enable'}"), class: "button small #{feature_flag.enabled? ? 'warning' : 'success'}", data: {confirm: t("admin.actions.confirm")}) %>
       <% end %>
     </li>
   <% end %>

app/views/admin/shared/_proposal_search.html.erb

@@ -4,7 +4,7 @@
       <%= text_field_tag :search, "", placeholder: t("admin.shared.proposal_search.placeholder") %>
     </div>
     <div class="form-inline small-12 medium-6 column">
-      <%= f.submit t("admin.shared.proposal_search.button"), class: "button radius success" %>
+      <%= f.submit t("admin.shared.proposal_search.button"), class: "button success" %>
     </div>
   </div>
 <% end %>

app/views/admin/shared/_user_search.html.erb

@@ -4,7 +4,7 @@
       <%= text_field_tag :name_or_email, "", placeholder: t("admin.shared.user_search.placeholder") %>
     </div>
     <div class="form-inline small-12 medium-6 column">
-      <%= f.submit t("admin.shared.user_search.button"), class: "button radius success" %>
+      <%= f.submit t("admin.shared.user_search.button"), class: "button success" %>
     </div>
   </div>
 <% end %>

app/views/admin/spending_proposals/index.html.erb

@@ -1,6 +1,6 @@
 <h2><%= t("admin.spending_proposals.index.title") %></h2>
 
-<div class="small-12 medium-4 column right">
+<div class="small-12 medium-4 column float-right">
   <%= form_tag admin_spending_proposals_path, method: :get, enforce_utf8: false do %>
     <%= select_tag :geozone_id, options_for_select(geozone_select_options.unshift([t("geozones.none"), "all"]), params[:geozone_id]),
                   { prompt: t("admin.spending_proposals.index.geozone_filter_all"),

app/views/admin/spending_proposals/show.html.erb

@@ -56,7 +56,6 @@
   <% if @valuators.blank? %><p><%= t("admin.spending_proposals.show.no_valuators") %></p><% end %>
 </div>
 
-
 <h2><%= t("admin.spending_proposals.show.dossier") %></h2>
 
 <p><strong><%= t("admin.spending_proposals.show.price") %> (<%= t("admin.spending_proposals.show.currency") %>):</strong>

app/views/admin/stats/show.html.erb

@@ -79,12 +79,12 @@
         </div>
       </div>
 
-      <div class="small-12">
+      <div class="small-12 column">
         <h2><%= t "admin.stats.show.visits_title" %></h2>
         <%= visits_chart_tag id: "visits" %>
       </div>
 
-      <div class="small-12">
+      <div class="small-12 column">
         <% @event_types.each do |event, count| %>
           <h2><%= event.titleize %> (<%= count %>)</h2>
           <%= events_chart_tag event %>

app/views/admin/tags/index.html.erb

@@ -16,7 +16,7 @@
     </div>
   </div>
 
-  <%= f.submit(t("admin.tags.create"), class: "button radius success") %>
+  <%= f.submit(t("admin.tags.create"), class: "button success") %>
 
 <% end %>
 
@@ -32,14 +32,14 @@
           as: :tag,
           html: { id: "edit_tag_#{tag.id}", class: "text-right"}) do |f| %>
 
-          <span class="left">
+          <span class="float-left">
             <%= f.label "featured_#{tag.id}" do %>
               <%= f.check_box :featured, label: false, id: "tag_featured_#{tag.id}", class: "inline-block" %>
               <span class="checkbox inline-block"><%= t("admin.tags.mark_as_featured") %></span>
             <% end %>
           </span>
 
-        <%= f.submit(t("admin.tags.update"), class: "button radius tiny success") %>
+        <%= f.submit(t("admin.tags.update"), class: "button small success") %>
 
         <%= link_to t("admin.tags.destroy"), admin_tag_path(tag), method: :delete, class: "delete" %>
       <% end %>

app/views/admin/users/index.html.erb

@@ -13,12 +13,12 @@
           restore_admin_user_path(user, request.query_parameters),
           method: :put,
           data: { confirm: t("admin.actions.confirm") },
-          class: "button radius tiny success right" %>
+          class: "button small success float-right" %>
     <% unless user.confirmed_hide? %>
       <%= link_to t("admin.actions.confirm_hide"),
           confirm_hide_admin_user_path(user, request.query_parameters),
           method: :put,
-          class: "button radius tiny warning right" %>
+          class: "button small warning float-right" %>
     <% end %>
   </li>
 <% end %>

app/views/admin/users/show.html.erb

@@ -7,7 +7,7 @@
 </p>
 <p>
   <%= link_to t("admin.users.show.back"), admin_users_path,
-            class: "button radius tiny secondary" %>
+            class: "button small secondary" %>
 </p>
 
 <% if @debates.present? %>

app/views/comments/_comment.html.erb

@@ -10,16 +10,16 @@
         <% end %>
       <% else %>
         <% if comment.as_administrator? %>
-          <%= image_tag("admin_avatar.png", size: 32, class: "admin-avatar left") %>
+          <%= image_tag("admin_avatar.png", size: 32, class: "admin-avatar float-left") %>
         <% elsif comment.as_moderator? %>
-          <%= image_tag("moderator_avatar.png", size: 32, class: "moderator-avatar left") %>
+          <%= image_tag("moderator_avatar.png", size: 32, class: "moderator-avatar float-left") %>
         <% else %>
         <% if comment.user.hidden? || comment.user.erased? %>
             <i class="icon-deleted user-deleted"></i>
           <% elsif comment.user.organization? %>
-            <%= image_tag("collective_avatar.png", size: 32, class: "avatar left") %>
+            <%= image_tag("collective_avatar.png", size: 32, class: "avatar float-left") %>
           <% else %>
-            <%= avatar_image(comment.user, seed: comment.user_id, size: 32, class: "left") %>
+            <%= avatar_image(comment.user, seed: comment.user_id, size: 32, class: "float-left") %>
           <% end %>
         <% end %>
 
@@ -68,7 +68,7 @@
           </div>
 
           <div id="<%= dom_id(comment) %>_reply" class="reply">
-            <span id="<%= dom_id(comment) %>_votes" class="comment-votes right">
+            <span id="<%= dom_id(comment) %>_votes" class="comment-votes float-right">
               <%= render 'comments/votes', comment: comment %>
             </span>
 

app/views/comments/_errors.html.erb

@@ -1,3 +1,3 @@
-<div class="alert-box alert radius">
+<div data-alert class="callout alert">
   <%= t("errors.messages.blank").capitalize %>
 </div>

app/views/comments/_flag_actions.html.erb

@@ -1,45 +1,30 @@
 <span class="flag-content">
   <% if show_flag_action? comment %>
     <span class="divider">&nbsp;|&nbsp;</span>
-    <a class="button" id="flag-expand-comment-<%= comment.id %>"
+    <a id="flag-expand-comment-<%= comment.id %>"
-      data-dropdown="flag-drop-comment-<%= comment.id %>"
+    data-toggle="flag-drop-comment-<%= comment.id %>"
-      aria-controls="flag-drop-comment-<%= comment.id %>"
-      aria-expanded="false"
     title="<%= t('shared.flag') %>">
-      &nbsp;
+      <i class="icon-flag flag-disable"></i>
-      <i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
     </a>
-    <ul id="flag-drop-comment-<%= comment.id %>"
+    <div id="flag-drop-comment-<%= comment.id %>"
-        class="f-dropdown"
+         class="dropdown-pane"
-        data-dropdown-content
+         data-dropdown
-        aria-hidden="true"
+         data-auto-focus="true">
-        tabindex="-1">
-      <li>
       <%= link_to t("shared.flag"), flag_comment_path(comment), method: :put,
                   remote: true, id: "flag-comment-#{comment.id}" %>
-      </li>
+    </div>
-    </ul>
   <% end %>
 
   <% if show_unflag_action? comment %>
     <span class="divider">&nbsp;|&nbsp;</span>
-    <a class="button" id="unflag-expand-comment-<%= comment.id %>"
+    <a id="unflag-expand-comment-<%= comment.id %>"
-       data-dropdown="unflag-drop-comment-<%= comment.id %>"
+       data-toggle="unflag-drop-comment-<%= comment.id %>"
-       aria-controls="unflag-drop-comment-<%= comment.id %>"
-       aria-expanded="false"
        title="<%= t('shared.unflag') %>">
-      &nbsp;
+      <i class="icon-flag flag-active"></i>
-      <i class="icon-flag flag-active"></i>&nbsp;&nbsp;
     </a>
-    <ul id="unflag-drop-comment-<%= comment.id %>"
+    <div class="dropdown-pane" id="unflag-drop-comment-<%= comment.id %>" data-dropdown data-auto-focus="true">
-        class="f-dropdown"
-        data-dropdown-content
-        aria-hidden="true"
-        tabindex="-1">
-      <li>
       <%= link_to t("shared.unflag"), unflag_comment_path(comment), method: :put,
                   remote: true, id: "unflag-comment-#{comment.id}" %>
-      </li>
+    </div>
-    </ul>
   <% end %>
 </span>

app/views/comments/_form.html.erb

@@ -8,16 +8,16 @@
       <%= f.hidden_field :commentable_id, value: commentable.id %>
       <%= f.hidden_field :parent_id, value: parent_id %>
 
-      <%= f.submit comment_button_text(parent_id), class: "button radius small inline-block" %>
+      <%= f.submit comment_button_text(parent_id), class: "button" %>
 
       <% if can? :comment_as_moderator, commentable %>
-        <div class="right">
+        <div class="float-right">
           <%= f.check_box :as_moderator, id: "comment-as-moderator-#{css_id}", label: false %>
           <%= label_tag "comment-as-moderator-#{css_id}", t("comments.form.comment_as_moderator"), class: "checkbox" %>
         </div>
       <% end %>
       <% if can? :comment_as_administrator, commentable %>
-        <div class="right">
+        <div class="float-right">
           <%= f.check_box :as_administrator, id: "comment-as-administrator-#{css_id}",label: false %>
           <%= label_tag "comment-as-administrator-#{css_id}", t("comments.form.comment_as_admin"), class: "checkbox" %>
         </div>

app/views/comments/show.html.erb

@@ -1,7 +1,7 @@
 <div class="row">
   <div class="small-12 column margin-top">
-    <%= link_to @comment.commentable, class: "left back"  do %>
+    <%= link_to @comment.commentable, class: "back" do %>
-      <i class="icon-angle-left left"></i>
+      <i class="icon-angle-left"></i>
       <%= t("comments.show.return_to_commentable") + @comment.commentable.title %>
     <% end %>
   </div>

app/views/debates/_comments.html.erb

@@ -14,7 +14,7 @@
         <% else %>
         <br>
 
-        <div class="alert-box radius info">
+        <div data-alert class="callout primary">
           <%= t("debates.show.login_to_comment",
               signin: link_to(t("votes.signin"), new_user_session_path),
               signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>

app/views/debates/_debate.html.erb

@@ -1,11 +1,11 @@
 <% cache [locale_and_user_status, debate, @debate_votes[debate.id]] do %>
-  <div id="<%= dom_id(debate) %>" class="debate clear">
+  <div id="<%= dom_id(debate) %>" class="debate clear" data-type="debate">
     <div class="panel">
       <div class="row">
 
         <div class="small-12 medium-9 column">
           <div class="debate-content">
-            <span class="label-debate left"><%= t("debates.debate.debate") %></span>
+            <span class="label-debate float-left"><%= t("debates.debate.debate") %></span>
             <i class="icon-debates"></i>
             <h3><%= link_to debate.title, debate %></h3>
             <p class="debate-info">

app/views/debates/_flag_actions.html.erb

@@ -1,23 +1,19 @@
 <span class="flag-content">
   <% if show_flag_action? debate %>
-    <a class="button" id="flag-expand-debate-<%= debate.id %>" data-dropdown="flag-drop-debate-<%= debate.id %>" aria-controls="flag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
+    <a id="flag-expand-debate-<%= debate.id %>" data-toggle="flag-drop-debate-<%= debate.id %>" title="<%= t('shared.flag') %>">
-      &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
+      <i class="icon-flag flag-disable"></i>
     </a>
-    <ul id="flag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+    <div class="dropdown-pane" id="flag-drop-debate-<%= debate.id %>" data-dropdown data-auto-focus="true">
-      <li>
       <%= link_to t('shared.flag'), flag_debate_path(debate), method: :put, remote: true, id: "flag-debate-#{ debate.id }" %>
-      </li>
+    </div>
-    </ul>
   <% end %>
 
   <% if show_unflag_action? debate %>
-    <a class="button" id="unflag-expand-debate-<%= debate.id %>" data-dropdown="unflag-drop-debate-<%= debate.id %>" aria-controls="unflag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
+    <a id="unflag-expand-debate-<%= debate.id %>" data-toggle="unflag-drop-debate-<%= debate.id %>" title="<%= t('shared.unflag') %>">
-      &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
+      <i class="icon-flag flag-active"></i>
     </a>
-    <ul id="unflag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+    <div class="dropdown-pane" id="unflag-drop-debate-<%= debate.id %>" data-dropdown data-auto-focus="true">
-      <li>
       <%= link_to t('shared.unflag'), unflag_debate_path(debate), method: :put, remote: true, id: "unflag-debate-#{ debate.id }" %>
-      </li>
+    </div>
-    </ul>
   <% end %>
 </span>

app/views/debates/_form.html.erb

@@ -37,7 +37,7 @@
     </div>
 
     <div class="actions small-12 column">
-      <%= f.submit(class: "button radius", value: t("debates.#{action_name}.form.submit_button")) %>
+      <%= f.submit(class: "button", value: t("debates.#{action_name}.form.submit_button")) %>
     </div>
   </div>
 <% end %>

app/views/debates/edit.html.erb

@@ -1,12 +1,12 @@
 <div class="debate-edit row">
 
   <div class="small-12 column">
-    <%= link_to debates_path, class: "left back clear" do %>
+    <%= link_to debates_path, class: "back" do %>
-      <i class="icon-angle-left left"></i>
+      <i class="icon-angle-left"></i>
       <%= t("debates.edit.back_link") %>
     <% end %>
 
-    <div class="right">
+    <div class="float-right">
       <%= link_to t("debates.edit.show_link"), @debate %>
     </div>
 

app/views/debates/index.html.erb

@@ -9,7 +9,7 @@
   <div class="wrap row">
     <div id="debates" class="debates-list small-12 medium-9 column">
 
-      <div class="small-12 margin-top search-results">
+      <div class="small-12 search-results">
         <% if @search_terms || @advanced_search_terms %>
           <h2>
             <%= page_entries_info @debates %>
@@ -34,7 +34,7 @@
       <%= render 'shared/order_links', i18n_namespace: "debates.index" %>
 
       <div class="show-for-small-only">
-        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %>
+        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button expanded' %>
       </div>
 
       <%= render @debates %>
@@ -42,8 +42,9 @@
     </div>
 
     <div class="small-12 medium-3 column">
-      <aside class="sidebar" role="complementary">
+
-        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %>
+      <aside class="margin-bottom" role="complementary">
+        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button expanded' %>
         <%= render "shared/tag_cloud", taggable: 'debate' %>
       </aside>
     </div>

app/views/debates/new.html.erb

@@ -1,12 +1,12 @@
 <div class="debate-new row">
 
   <div class="small-12 medium-9 column">
-    <%= link_to debates_path, class: "left back" do %>
+    <%= link_to debates_path, class: "back" do %>
-      <i class="icon-angle-left left"></i>
+      <i class="icon-angle-left"></i>
       <%= t("debates.new.back_link") %>
     <% end %>
     <h1><%= t("debates.new.start_new") %></h1>
-    <div class="alert-box info radius">
+    <div data-alert class="callout primary">
       <%= t("debates.new.info",
       info_link: link_to(t("debates.new.info_link"), new_proposal_path )).html_safe %>
       <%= link_to "/more_information", target: "_blank" do %>
@@ -17,7 +17,7 @@
   </div>
 
   <div class="small-12 medium-3 column">
-    <i class="icon-debates right"></i>
+    <i class="icon-debates float-right"></i>
     <h2><%= t("debates.new.recommendations_title") %></h2>
     <ul class="recommendations">
       <li><%= t("debates.new.recommendation_one") %></li>

app/views/debates/show.html.erb

@@ -3,11 +3,12 @@
   <section class="debate-show">
     <div id="<%= dom_id(@debate) %>" class="row">
       <div class="small-12 medium-9 column">
-        <i class="icon-angle-left left"></i>&nbsp;
+        <%= link_to :back, class: "back" do %>
-        <%= link_to t("debates.show.back_link"), :back, class: 'left back' %>
+          <i class="icon-angle-left"></i>
-
+          <%= t("debates.show.back_link") %>
+        <% end %>
         <% if current_user && @debate.editable_by?(current_user) %>
-          <%= link_to edit_debate_path(@debate), class: 'edit-debate button success tiny radius right' do %>
+          <%= link_to edit_debate_path(@debate), class: 'edit-debate button success small float-right' do %>
             <i class="icon-edit"></i>
             <%= t("debates.show.edit_debate_link") %>
           <% end %>
@@ -15,7 +16,7 @@
 
         <h1><%= @debate.title %></h1>
         <% if @debate.conflictive? %>
-          <div class="alert-box alert radius margin-top">
+          <div data-alert class="callout alert margin-top">
             <strong><%= t("debates.show.flag") %></strong>
           </div>
         <% end %>

app/views/devise/confirmations/new.html.erb

@@ -1,6 +1,5 @@
 <% provide :title do %><%= t("devise_views.confirmations.new.title") %><% end %>
-<h2 class="text-center"><%= t("devise_views.confirmations.new.title") %></h2>
+<h2><%= t("devise_views.confirmations.new.title") %></h2>
-
 
 <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
   <%= render 'shared/errors', resource: resource %>
@@ -8,7 +7,6 @@
   <div class="row">
     <div class="small-12 columns">
       <%= f.email_field :email, autofocus: true, placeholder: t("devise_views.confirmations.new.email_label"), value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
-    </div>
 
       <% if @requires_password %>
           <p><%= f.password_field :password %></p>
@@ -17,9 +15,7 @@
 
       <%= hidden_field_tag :confirmation_token,@confirmation_token %>
 
-    <div class="small-12 columns">
+      <%= f.submit(t("devise_views.confirmations.new.submit"), class: "button expanded") %>
-      <%= f.submit(t("devise_views.confirmations.new.submit"), class: "button radius expand") %>
-    </div>
     </div>
 <% end %>
 

app/views/devise/confirmations/show.html.erb

@@ -27,7 +27,7 @@
   <%= hidden_field_tag :confirmation_token, params[:confirmation_token] %>
 
   <div class="small-12 columns">
-    <%= f.submit(t("devise_views.confirmations.show.submit"), class: "button radius expand") %>
+    <%= f.submit(t("devise_views.confirmations.show.submit"), class: "button expanded") %>
   </div>
 <% end %>
 

app/views/devise/menu/_login_items.html.erb

@@ -1,4 +1,3 @@
-<ul class="right">
 <% if user_signed_in? %>
   <li>
     <%= link_to notifications_path, class: "notifications" do %>
@@ -25,7 +24,6 @@
     <%= link_to(t("devise_views.menu.login_items.login"), new_user_session_path)  %>
   </li>
   <li>
-      <%= link_to(t("devise_views.menu.login_items.signup"), new_user_registration_path, class: "button radius small") %>
+    <%= link_to(t("devise_views.menu.login_items.signup"), new_user_registration_path, class: "button") %>
   </li>
 <% end %>
-</ul>

app/views/devise/passwords/new.html.erb

@@ -1,16 +1,13 @@
 <% provide :title do %><%= t("devise_views.passwords.new.title") %><% end %>
-<h2 class="text-center"><%= t("devise_views.passwords.new.title") %></h2>
+<h2><%= t("devise_views.passwords.new.title") %></h2>
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
   <%= render 'shared/errors', resource: resource %>
 
   <div class="row">
     <div class="small-12 column">
       <%= f.email_field :email, autofocus: true, placeholder: t("devise_views.passwords.new.email_label") %>
-    </div>
 
-    <div class="small-12 column text-center">
+      <%= f.submit t("devise_views.passwords.new.send_submit"), class: "button expanded" %>
-      <%= f.submit t("devise_views.passwords.new.send_submit"), class: "button radius expand" %>
-    </div>
     </div>
 <% end %>
 

app/views/devise/sessions/new.html.erb

@@ -15,7 +15,7 @@
     </div>
 
     <div class="small-12 columns">
-      <%= link_to t("devise_views.shared.links.new_password"), new_password_path(resource_name), class: "right", tabindex: "3" %>
+      <%= link_to t("devise_views.shared.links.new_password"), new_password_path(resource_name), class: "float-right", tabindex: "3" %>
       <%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.sessions.new.password_label"), tabindex: "2" %>
     </div>
 
@@ -29,7 +29,7 @@
     <% end -%>
 
     <div class="small-12 columns">
-      <%= f.submit(t("devise_views.sessions.new.submit"), class: "button radius expand") %>
+      <%= f.submit(t("devise_views.sessions.new.submit"), class: "button expanded") %>
     </div>
   </div>
 <% end %>

app/views/kaminari/_gap.html.erb

@@ -1,3 +1,3 @@
-<li>
+<li class="ellipsis" aria-hidden="true">
   <%= t("views.pagination.truncate").html_safe %>
 </li>

app/views/kaminari/_next_page.html.erb

@@ -1,3 +1,3 @@
-<li>
+<li class="pagination-next">
   <%= link_to t("views.pagination.next").html_safe, url, :rel => "next", :remote => remote %>
 </li>

app/views/kaminari/_page.html.erb

@@ -1,3 +1,10 @@
-<li class="<%= 'current' if page.current? %>">
+<% if page.current? %>
+  <li class="current">
+    <span class="show-for-sr"><%= t("views.pagination.current") %></span>
+    <%= page %>
+  </li>
+<% else %>
+  <li>
     <%= link_to page, url, {:remote => remote, :rel => page.next? ? "next" : page.prev? ? "prev" : nil} %>
   </li>
+<% end %>

app/views/kaminari/_paginator.html.erb

@@ -1,7 +1,7 @@
 <%= paginator.render do -%>
   <div class="pagination-centered">
     <nav>
-      <ul class="pagination">
+      <ul class="pagination text-center margin-top" role="navigation" aria-label="Pagination">
         <%= first_page_tag unless current_page.first? %>
         <%= prev_page_tag unless current_page.first? %>
 

app/views/kaminari/_prev_page.html.erb

@@ -1,3 +1,3 @@
-<li>
+<li class="pagination-previous">
   <%= link_to t("views.pagination.previous").html_safe, url, :rel => "prev", :remote => remote %>
 </li>

app/views/layouts/_admin_header.html.erb

@@ -5,22 +5,33 @@
     </div>
   </section>
 
-  <div class="contain-to-grid clear">
+  <div class="row">
-    <nav class="top-bar" data-topbar>
+    <div class="top-bar">
-      <ul class="title-area">
-        <li class="name">
-          <%= link_to root_path do %>
-            <%= image_tag('header_logo_madrid.png', class: 'left', size: '96x96', alt: t("layouts.header.logo")) %>
-            <%= setting['org_name'] %> <span>|</span> <span class="logo-site"><%= t("admin.dashboard.index.title") %></span>
-          <% end %>
-        </li>
-        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
-      </ul>
 
-      <section class="top-bar-section">
+      <%= link_to Setting['org_name'], root_path, class: "logo show-for-small-only" %>
-        <%= render 'devise/menu/login_items' %>
+
-        <%= render 'shared/admin_login_items' %>
+      <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
-      </section>
+        <span class="menu-icon dark" data-toggle></span>
-    </nav>
+        <%= t("application.menu")%>
+      </span>
+
+      <div id="responsive-menu">
+        <div class="top-bar-title">
+          <%= link_to root_path, class: "hide-for-small-only" do %>
+            <%= image_tag('header_logo_madrid.png', class: 'hide-for-small-only float-left', size: '80x80', alt: t("layouts.header.logo")) %>
+            <%= Setting['org_name'] %>
+            &nbsp;|&nbsp;<%= t("admin.dashboard.index.title") %>
+          <% end %>
+        </div>
+
+        <div class="top-bar-right">
+          <ul class="menu">
+            <%= render "shared/admin_login_items" %>
+            <%= render "devise/menu/login_items" %>
+          </ul>
+        </div>
+
+      </div>
+    </div>
   </div>
 </header>

app/views/layouts/_header.html.erb

@@ -1,22 +1,21 @@
 <header>
-  <section class="top-links show-for-medium-up">
-    <div class="row">
-      <%= render "shared/locale_switcher" %>
-      <div class="external-links">
-        <%= link_to setting['org_name'], root_path, class: ("selected" unless current_page?("/opendata")) %>&nbsp;|
-        <%= link_to t("layouts.header.external_link_transparency"), t("layouts.header.external_link_transparency_url") %>&nbsp;|
-        <%= link_to t("layouts.header.external_link_opendata"), "/opendata", class: ("selected" if current_page?("/opendata")) %>
-      </div>
-    </div>
-  </section>
 
-  <div class="contain-to-grid clear">
+  <%= render "shared/top_links" %>
-    <nav class="top-bar" data-topbar>
+
-      <ul class="title-area">
+  <div class="row">
-        <li class="toggle-topbar menu-icon"><a href="#"><span><%= t("application.menu")%></span></a></li>
+    <div class="top-bar">
-        <li class="name">
+
-          <%= link_to root_path do %>
+      <%= link_to Setting['org_name'], root_path, class: "logo show-for-small-only" %>
-            <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '80x80', alt: t("layouts.header.logo")) %>
+
+      <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
+        <span class="menu-icon dark" data-toggle></span>
+        <%= t("application.menu")%>
+      </span>
+
+      <div id="responsive-menu">
+        <div class="top-bar-title">
+          <%= link_to root_path, class: "hide-for-small-only" do %>
+            <%= image_tag('header_logo_madrid.png', class: 'hide-for-small-only float-left', size: '80x80', alt: t("layouts.header.logo")) %>
             <% if opendata_page? %>
               <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}") %> <span>|</span>
               <span class="logo-site"><%= t("layouts.header.open_data") %></span>
@@ -24,70 +23,33 @@
                <%= setting['org_name'] %>
             <% end %>
           <% end %>
-        </li>
+        </div>
+
+        <div class="top-bar-right">
+          <ul class="menu">
+            <%= render "shared/admin_login_items" %>
+            <%= render "devise/menu/login_items" %>
           </ul>
 
-      <section class="top-bar-section">
+          <div class="show-for-small-only">
-        <%= render "devise/menu/login_items" %>
+            <div class="subnavigation row">
-        <%= render "shared/admin_login_items" %>
+              <%= render "shared/subnavigation" %>
-      </section>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
-      <section class="subnavigation row">
+  <div class="subnavigation row expanded">
-
+    <div class="row">
-        <div class="small-12 medium-9 column">
+      <div class="hide-for-small-only">
-          <% if feature?(:debates) %>
+        <%= render "shared/subnavigation" %>
-            <%= link_to t("layouts.header.debates"), debates_path, class: ("active" if controller_name == "debates") %>
-          <% end %>
-          <%= link_to t("layouts.header.proposals"), proposals_path, class: ("active" if  controller_name == "proposals") %>
-          <% if feature?(:spending_proposals) %>
-            <%= link_to t("layouts.header.spending_proposals"), spending_proposals_path, class: ("active" if controller_name == "spending_proposals") %>
-          <% end %>
-          <%= link_to t("layouts.header.more_information"), page_path('more_information'), class: ("active" if current_page?("/more_information"))  %>
-          <% if setting['blog_url'] %>
-            <%= link_to setting['blog_url'], target: "_blank" do %>
-              <%= t("layouts.header.external_link_blog") %>
-              <i class="icon-external"></i>
-            <% end %>
-          <% end %>
       </div>
       <div class="small-12 medium-3 column">
         <%= yield :header_addon %>
       </div>
-      </section>
-    </nav>
-  </div>
-
-  <div class="row-full subnavigation-background"></div>
-
-  <% if home_page? %>
-    <div class="row home-page">
-      <div class="small-12 medium-7 column">
-        <h1><%= t("layouts.header.open_city_title") %></h1>
-        <p>
-          <%= t("layouts.header.open_city_slogan_html") %>&nbsp;
-          <%= link_to t("layouts.header.more_information"), page_path('more_information') %>
-        </p>
-        <div class="small-12 medium-6">
-          <%= link_to t("layouts.header.see_all"), proposals_path, class: "button radius see-more warning expand" %>
     </div>
   </div>
 
-      <div class="show-for-medium-up small-12 medium-5 column text-center">
-        <%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
-      </div>
-    </div>
-  <% end %>
-
-  <% if opendata_page? %>
-    <div class="row home-page">
-      <div class="small-12 medium-7 column">
-        <h1><%= t("pages.opendata.title") %></h1>
-        <h2><%= t("pages.opendata.slogan_html") %></h2>
-        <%= link_to t("pages.opendata.go_old"), t("layouts.header.external_link_opendata_url"), target: "_blank", class: "button radius" %>
-      </div>
-      <div class="show-for-medium-up small-12 medium-5 column text-center">
-        <%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
-      </div>
-    </div>
-  <% end %>
 </header>

app/views/layouts/_test.html.erb

@@ -0,0 +1,38 @@
+<div class="row">
+  <div class="top-bar">
+
+    <%= link_to Setting['org_name'], root_path, class: "logo show-for-small-only" %>
+
+    <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
+      <span class="menu-icon dark" data-toggle></span>
+      <%= t("application.menu")%>
+    </span>
+
+    <div id="responsive-menu">
+      <div class="top-bar-title">
+        <%= link_to root_path, class: "hide-for-small-only" do %>
+          <%= image_tag('header_logo_madrid.png', class: 'hide-for-small-only float-left', size: '80x80', alt: t("layouts.header.logo")) %>
+          <% if opendata_page? %>
+            <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}") %> <span>|</span>
+            <span class="logo-site"><%= t("layouts.header.open_data") %></span>
+          <% else %>
+             <%= Setting['org_name'] %>
+          <% end %>
+        <% end %>
+      </div>
+
+      <div class="top-bar-right">
+        <ul class="menu">
+          <%= render "shared/admin_login_items" %>
+          <%= render "devise/menu/login_items" %>
+        </ul>
+
+        <div class="show-for-small-only">
+          <div class="subnavigation row">
+            <%= render "shared/subnavigation" %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/layouts/admin.html.erb

@@ -7,7 +7,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title><%= content_for?(:title) ? yield(:title) : "Admin" %></title>
     <%= stylesheet_link_tag    "application" %>
-    <%= javascript_include_tag "vendor/modernizr" %>
     <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
     <%= content_for :head %>
     <%= csrf_meta_tags %>
@@ -17,7 +16,7 @@
   <body class="admin">
     <%= render 'layouts/admin_header' %>
 
-    <div class="row">
+    <div class="row expanded">
 
       <div class="small-12 medium-3 column">
         <%= side_menu %>
@@ -25,15 +24,19 @@
 
       <div class="admin-content small-12 medium-9 column">
         <% if notice %>
-          <div data-alert class="alert-box radius success">
+          <div data-alert class="callout success" data-closable>
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+            <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
             <%= notice %>
           </div>
         <% end %>
 
         <% if alert %>
-          <div data-alert class="alert-box radius alert">
+          <div data-alert class="callout alert" data-closable>
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+            <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
             <%= alert %>
           </div>
         <% end %>

app/views/layouts/application.html.erb

@@ -6,7 +6,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title><%= content_for?(:title) ? yield(:title) : setting['org_name'] %></title>
     <%= stylesheet_link_tag    "application" %>
-    <%= javascript_include_tag "vendor/modernizr" %>
     <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
     <%= csrf_meta_tags %>
     <%= favicon_link_tag "favicon.ico" %>
@@ -25,8 +24,11 @@
 
       <!--[if lt IE 9]>
       <% if browser.ie? && cookies['ie_alert_closed'] != 'true' %>
-        <div data-alert class="alert-box info ie-alert-box">
+        <div data-alert class="callout primary ie-callout" data-closable>
-          <a href="#" class="close ie-alert-box-close-js">&times;</a>
+          <button class="close-button ie-callout-close-js"
+                  aria-label="<%= t("application.close") %>" type="button" data-close>
+            <span aria-hidden="true">&times;</span>
+          </button>
           <h2><%= t("layouts.application.ie_title") %></h2>
           <p>
             <%= t("layouts.application.ie",
@@ -41,25 +43,25 @@
       <![endif]-->
 
       <% if notice %>
-      <div id="notice" class="alert-messages">
+      <div id="notice" data-alert class="row" data-closable>
-        <div class="row">
+        <div class="callout success">
-          <div data-alert class="alert-box success radius">
+          <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+            <span aria-hidden="true">&times;</span>
+          </button>
           <%= notice %>
         </div>
       </div>
-      </div>
       <% end %>
 
       <% if alert %>
-      <div id="alert" class="alert-messages">
+      <div id="alert" data-alert class="row" data-closable>
-        <div class="row">
+        <div class="callout alert">
-          <div data-alert class="alert-box alert radius">
+          <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+            <span aria-hidden="true">&times;</span>
+          </button>
           <%= alert %>
         </div>
       </div>
-      </div>
       <% end %>
 
       <%= yield %>

app/views/layouts/devise.html.erb

@@ -6,7 +6,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title><%= content_for?(:title) ? yield(:title) : "Gobierno abierto" %></title>
     <%= stylesheet_link_tag    "application" %>
-    <%= javascript_include_tag "vendor/modernizr" %>
     <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
     <%= csrf_meta_tags %>
     <%= favicon_link_tag "favicon.ico" %>
@@ -18,7 +17,7 @@
         <div class="small-12 medium-8 large-5 column small-centered margin-top">
           <h1>
             <%= link_to root_path do %>
-              <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '96x96', alt: t("layouts.header.logo")) %>
+              <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up float-left', size: '96x96', alt: t("layouts.header.logo")) %>
               <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %>
             <% end %>
           </h1>
@@ -26,25 +25,26 @@
       </div>
 
       <div class="row auth">
-        <div class="small-12 medium-8 large-5 column small-centered">
+        <div class="small-12 medium-8 large-5 column small-centered panel padding margin-bottom">
-          <div class="panel">
           <% if notice %>
-              <div data-alert class="alert-box radius success">
+            <div data-alert class="callout success" data-closable>
-                <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+              <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+                <span aria-hidden="true">&times;</span>
+              </button>
               <%= notice %>
             </div>
           <% end %>
 
           <% if alert %>
-              <div data-alert class="alert-box radius warning">
+            <div data-alert class="callout warning" data-closable>
-                <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+              <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+                <span aria-hidden="true">&times;</span>
+              </button>
               <%= alert %>
             </div>
           <% end %>
 
           <%= yield %>
-
-          </div>
         </div>
       </div>
       <div class="push"></div>

app/views/layouts/management.html.erb

@@ -8,7 +8,6 @@
     <title><%= content_for?(:title) ? yield(:title) : "Management" %></title>
     <%= stylesheet_link_tag  "application", media: "all" %>
     <%= stylesheet_link_tag  "print", media: "print" %>
-    <%= javascript_include_tag "vendor/modernizr" %>
     <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
     <%= content_for :head %>
     <%= csrf_meta_tags %>
@@ -28,8 +27,8 @@
           <ul class="title-area">
             <li class="name">
               <%= link_to management_root_path do %>
-                <%= image_tag('header_logo_madrid.png', class: 'left', size: '96x96') %>
+                <%= image_tag('header_logo_madrid.png', class: 'float-left', size: '96x96') %>
-                <%= setting['org_name'] %> <span>|</span> <span class="logo-site"><%= t("management.dashboard.index.title") %></span>
+                <%= Setting['org_name'] %> <span>|</span> <span class="logo-site"><%= t("management.dashboard.index.title") %></span>
               <% end %>
             </li>
             <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
@@ -47,15 +46,19 @@
 
       <div class="admin-content small-12 medium-9 column">
         <% if notice %>
-          <div data-alert class="alert-box radius success">
+          <div data-alert class="callout success" data-closable>
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+            <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
             <%= notice %>
           </div>
         <% end %>
 
         <% if alert %>
-          <div data-alert class="alert-box radius alert">
+          <div data-alert class="callout alert" data-closable>
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+            <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
             <%= alert %>
           </div>
         <% end %>

app/views/legislations/show.html.erb

@@ -1,11 +1,12 @@
 <div class="row margin-top">
   <div class="small-12 column">
-    <div class="right">
+    <div class="float-right">
-      <a data-dropdown="drop-help" aria-controls="drop-help" aria-expanded="false" class="button radius warning">
+      <a class="button warning" type="button" data-toggle="help-legislation">
         <sub><i class="icon-edit"></i></sub>&nbsp;
         <%= t("legislation.help.title") %>
       </a>
-      <div id="drop-help" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
+
+      <div class="dropdown-pane" id="help-legislation" data-dropdown data-auto-focus="true">
         <p>
           <%= t("legislation.help.text",
               sign_in: link_to(t("legislation.help.text_sign_in"), new_user_session_path),

app/views/management/_account_info.html.erb

@@ -2,7 +2,7 @@
   <section class="small-12 medium-9 column margin-top">
     <div class="account-info">
 
-      <%= link_to(t("management.account_info.change_user"), logout_management_users_path, method: :delete, class: 'right change-user') %>
+      <%= link_to(t("management.account_info.change_user"), logout_management_users_path, method: :delete, class: 'float-right change-user') %>
 
       <% if managed_user.level_two_or_three_verified? %>
         <p>

app/views/management/document_verifications/invalid_document.html.erb

@@ -1,4 +1,4 @@
-<div class="alert-box alert radius">
+<div data-alert class="callout alert">
   <% if @document_verification.errors[:age].any? %>
     <%= t("management.document_verifications.under_age") %>
   <% else %>

app/views/management/document_verifications/new.html.erb

@@ -1,4 +1,4 @@
-<div class="alert-box success radius">
+<div data-alert class="callout success">
   <%= t("management.document_verifications.please_check_account_data") %>
 </div>
 
@@ -11,5 +11,5 @@
     url: management_document_verifications_path do |f| %>
   <%= f.hidden_field :document_type %>
   <%= f.hidden_field :document_number %>
-  <%= f.submit t("management.document_verifications.verify"), class: "button success radius" %>
+  <%= f.submit t("management.document_verifications.verify"), class: "button success" %>
 <% end %>

app/views/management/document_verifications/verified.html.erb

@@ -1,4 +1,4 @@
-<div class="alert-box success radius">
+<div data-alert class="callout success">
   <%= t("management.document_verifications.already_verified") %>
 </div>
 
@@ -6,4 +6,4 @@
       message: t("management.document_verifications.in_census_has_following_permissions"),
       permissions: [:debates, :create_proposals, :support_proposals, :vote_proposals] %>
 
-<a href="javascript:window.print();" class="button warning radius"><%= t("management.print_info") %></a>
+<a href="javascript:window.print();" class="button warning"><%= t("management.print_info") %></a>

app/views/management/email_verifications/new.html.erb

@@ -1,4 +1,4 @@
-<div class="alert-box success radius">
+<div data-alert class="callout success">
   <%= t("management.email_verifications.document_found_in_census") %> <%= t("management.email_verifications.choose_options") %>
 </div>
 
@@ -15,7 +15,7 @@
       <%= f.hidden_field :document_number %>
       <%= f.text_field :email, label: false, placeholder: t('management.email_verifications.email_placeholder') %>
 
-      <%= f.submit t("management.email_verifications.send_email"), class: "button success radius" %>
+      <%= f.submit t("management.email_verifications.send_email"), class: "button success" %>
     <% end %>
   </li>
 
@@ -23,7 +23,7 @@
     <strong><%= t("management.email_verifications.if_no_existing_account") %></strong>
 
     <p class="margin-top">
-      <%= link_to t('management.users.create_user'), new_management_user_path(user: params[:email_verification]), class: "button warning radius" %>
+      <%= link_to t('management.users.create_user'), new_management_user_path(user: params[:email_verification]), class: "button warning" %>
     </p>
   </li>
 </ul>

app/views/management/email_verifications/sent.html.erb

@@ -1,4 +1,4 @@
-<div class="alert-box success radius">
+<div data-alert class="callout success">
   <%= t("management.email_verifications.email_sent_instructions") %>
 </div>
 
@@ -7,6 +7,6 @@
       permissions: [:debates, :create_proposals, :support_proposals, :vote_proposals] %>
 
 <p>
-  <a href="javascript:window.print();" class="button warning radius"><%= t("management.print_info") %></a>
+  <a href="javascript:window.print();" class="button warning"><%= t("management.print_info") %></a>
 </p>
 

app/views/management/proposals/index.html.erb

@@ -5,7 +5,7 @@
     <div id="proposals" class="proposals-list small-12 medium-9 column">
 
       <div class="filters">
-        <div class="small-12 medium-7 left">
+        <div class="small-12 medium-7 float-left">
           <% if @search_terms %>
             <h2 class="margin-top">
               <%= page_entries_info @proposals %>

app/views/management/proposals/print.html.erb

@@ -1,7 +1,7 @@
 <section role="main">
   <div class="row">
     <div id="proposals" class="proposals-list small-12 column">
-      <a id="print_link" href="javascript:window.print();" class="button warning radius right">
+      <a id="print_link" href="javascript:window.print();" class="button warning float-right">
         <%= t('management.proposals.print.print_button') %>
       </a>
 

app/views/management/users/new.html.erb

@@ -16,7 +16,7 @@
           label: t('management.email_label'),
           placeholder: t('management.email_label') %>
 
-      <%= f.submit t("management.users.create_user_submit"), class: "button success radius" %>
+      <%= f.submit t("management.users.create_user_submit"), class: "button success" %>
     <% end %>
   </div>
 </div>

app/views/moderation/comments/index.html.erb

@@ -5,7 +5,7 @@
 <div class="row">
   <h3 class="small-8 large-8 columns"><%= page_entries_info @comments %></h3>
   <div class="small-4 large-4 columns">
-    <div class="right">
+    <div class="float-right">
       <%= t("moderation.comments.index.order") %>
       <%= render 'shared/order_selector', i18n_namespace: "moderation.comments.index" %>
     </div>
@@ -13,7 +13,7 @@
 </div>
 
 <%= form_tag moderate_moderation_comments_path(request.query_parameters), method: :put do %>
-  <p class="right js-check">
+  <p class="float-right js-check">
     <%= t('shared.check') %>:
     <%= link_to t('shared.check_all'), '#', data: {check_all: "comment_ids[]"} %>
     |
@@ -55,19 +55,19 @@
 
   <%= submit_tag t('moderation.comments.index.block_authors'),
     name: "block_authors",
-    class: "button radius alert",
+    class: "button alert",
     data: {confirm: t('moderation.comments.index.confirm')}
   %>
 
-  <div class="right">
+  <div class="float-right">
     <%= submit_tag t('moderation.comments.index.hide_comments'),
       name: "hide_comments",
-      class: "button radius alert",
+      class: "button alert",
       data: {confirm: t('moderation.comments.index.confirm')}
     %>
     <%= submit_tag t('moderation.comments.index.ignore_flags'),
       name: "ignore_flags",
-      class: "button radius success",
+      class: "button success",
       data: {confirm: t('moderation.comments.index.confirm')}
     %>
   </div>

app/views/moderation/debates/index.html.erb

@@ -5,7 +5,7 @@
 <div class="row">
   <h3 class="small-8 large-8 columns"><%= page_entries_info @debates %></h3>
   <div class="small-4 large-4 columns">
-    <div class="right">
+    <div class="float-right">
       <%= t("moderation.debates.index.order") %>
       <%= render 'shared/order_selector', i18n_namespace: "moderation.debates.index" %>
     </div>
@@ -13,7 +13,7 @@
 </div>
 
 <%= form_tag moderate_moderation_debates_path(request.query_parameters), method: :put do %>
-  <p class="left js-check">
+  <p class="float-left js-check">
     <%= t('shared.check') %>:
     <%= link_to t('shared.check_all'), '#', data: {check_all: "debate_ids[]"} %>
     |
@@ -53,19 +53,19 @@
 
   <%= submit_tag t('moderation.debates.index.block_authors'),
     name: "block_authors",
-    class: "button radius alert",
+    class: "button alert",
     data: {confirm: t('moderation.debates.index.confirm')}
   %>
 
-  <div class="right">
+  <div class="float-right">
     <%= submit_tag t('moderation.debates.index.hide_debates'),
       name: "hide_debates",
-      class: "button radius alert",
+      class: "button alert",
       data: {confirm: t('moderation.debates.index.confirm')}
     %>
     <%= submit_tag t('moderation.debates.index.ignore_flags'),
       name: "ignore_flags",
-      class: "button radius success",
+      class: "button success",
       data: {confirm: t('moderation.debates.index.confirm')}
     %>
   </div>

app/views/moderation/proposals/index.html.erb

@@ -5,7 +5,7 @@
 <div class="row">
   <h3 class="small-8 large-8 columns"><%= page_entries_info @proposals %></h3>
   <div class="small-4 large-4 columns">
-    <div class="right">
+    <div class="float-right">
       <%= t("moderation.proposals.index.order") %>
       <%= render 'shared/order_selector', i18n_namespace: "moderation.proposals.index" %>
     </div>
@@ -13,7 +13,7 @@
 </div>
 
 <%= form_tag moderate_moderation_proposals_path(request.query_parameters), method: :put do %>
-  <p class="left js-check">
+  <p class="float-left js-check">
     <%= t('shared.check') %>:
     <%= link_to t('shared.check_all'), '#', data: {check_all: "proposal_ids[]"} %>
     |
@@ -53,19 +53,19 @@
 
   <%= submit_tag t('moderation.proposals.index.block_authors'),
     name: "block_authors",
-    class: "button radius alert",
+    class: "button alert",
     data: {confirm: t('moderation.proposals.index.confirm')}
   %>
 
-  <div class="right">
+  <div class="float-right">
     <%= submit_tag t('moderation.proposals.index.hide_proposals'),
       name: "hide_proposals",
-      class: "button radius alert",
+      class: "button alert",
       data: {confirm: t('moderation.proposals.index.confirm')}
     %>
     <%= submit_tag t('moderation.proposals.index.ignore_flags'),
       name: "ignore_flags",
-      class: "button radius success",
+      class: "button success",
       data: {confirm: t('moderation.proposals.index.confirm')}
     %>
   </div>

app/views/moderation/users/index.html.erb

@@ -6,7 +6,7 @@
       <%= text_field_tag :name_or_email, "", placeholder: t("moderation.users.index.search_placeholder") %>
     </div>
     <div class="small-12 medium-6 column">
-      <%= f.submit t("moderation.users.index.search"), class: "button radius success" %>
+      <%= f.submit t("moderation.users.index.search"), class: "button success" %>
     </div>
   </div>
 <% end %>

app/views/notifications/index.html.erb

@@ -1,14 +1,14 @@
 <div class="row">
   <div class="small-12 column">
 
-    <h1 class="left margin-top"><%= t("notifications.index.title") %></h1>
+    <h1 class="float-left margin-top"><%= t("notifications.index.title") %></h1>
 
     <% if @notifications.empty? %>
-      <div class="alert-box radius info margin-top clear">
+      <div data-alert class="callout primary margin-top clear">
         <%= t("notifications.index.empty_notifications") %>
       </div>
     <% else %>
-      <div class="right margin-top">
+      <div class="float-right margin-top">
         <%= link_to t("notifications.index.mark_all_as_read"),
                     mark_all_as_read_notifications_path, method: :put %>
       </div>

app/views/organizations/registrations/new.html.erb

@@ -35,7 +35,7 @@
       <% end %>
 
 
-      <%= f.submit t("devise_views.organizations.registrations.new.submit"), class: "button radius expand" %>
+      <%= f.submit t("devise_views.organizations.registrations.new.submit"), class: "button expanded" %>
     </div>
   </div>
 <% end %>

app/views/organizations/registrations/success.html.erb

@@ -5,5 +5,5 @@
 <p><%= t("devise_views.organizations.registrations.success.instructions_3_html") %></p>
 <p>
   <%= link_to t("devise_views.organizations.registrations.success.back_to_index"),
-      root_path, class: "button radius small margin-top expand" %>
+      root_path, class: "button small margin-top expanded" %>
 </p>

app/views/pages/conditions.html.erb

@@ -1,10 +1,8 @@
 <% provide :title do %><%= t('pages.titles.conditions') %><% end %>
-<div class="page row-full">
-  <div class="row">
-    <div class="text small-12 column">
 
-      <%= render '/shared/print' %>
+<div class="row margin-top">
 
+  <div class="small-12 medium-9 column">
     <h1><%= t("pages.conditions") %></h1>
     <h2>AVISO LEGAL SOBRE LAS CONDICIONES DE USO, PRIVACIDAD Y PROTECCIÓN DE DATOS PERSONALES DEL PORTAL DE GOBIERNO ABIERTO DEL AYUNTAMIENTO DE MADRID</h2>
 
@@ -96,5 +94,8 @@
     <h3>9. Revisión de las condiciones de uso</h3>
     <p>El Ayuntamiento de Madrid se reserva el derecho de revisar las presentes condiciones de uso y la política de privacidad en cualquier momento y por cualquier razón. En dicho caso, los usuarios registrados serán avisados a través de este espacio en línea y, si continúan utilizando el Portal de Gobierno Abierto, se entenderán aceptadas las modificaciones introducidas.</p>
   </div>
+
+  <div class="small-12 medium-3 column">
+    <%= render '/shared/print' %>
   </div>
 </div>

app/views/pages/faq.html.erb

@@ -1,28 +1,29 @@
-<div class="page row-full">
+<div class="row margin-top">
-  <div class="row">
   <div class="menu small-12 medium-3 column">
-      <i class="icon-angle-left left"></i>&nbsp;
+    <%= link_to "/more_information", class: 'back' do %>
-      <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
+      <i class="icon-angle-left"></i>
-      <ul class="clear">
+      <%= t("debates.show.back_link") %>
-        <li><a href="#1">No me funciona la verificación de residencia.</a></li>
+    <% end %>
-        <li><a href="#2">No estoy empadronado en Madrid ¿por qué no puedo participar?</a></li>
+
-        <li><a href="#3">¿Para qué sirve verificar mi cuenta? ¿qué es esto de la carta con un código que me vais a mandar?</a></li>
+    <ul class="menu vertical margin-top">
-        <li><a href="#4">¿Necesito teléfono móvil o acceso a Internet para poder participar?</a></li>
+      <li><a href="#1"><strong>No me funciona la verificación de residencia.</strong></a></li>
-        <li><a href="#5">¿Cómo creo y verifico mi cuenta?</a></li>
+      <li><a href="#2"><strong>No estoy empadronado en Madrid ¿por qué no puedo participar?</strong></a></li>
-        <li><a href="#6">¿Cómo puedo enviar una propuesta al Ayuntamiento? ¿Puedo mandaros directamente mi propuesta a alguno de los correos electrónico que aparecen en la web de participación?</a></li>
+      <li><a href="#3"><strong>¿Para qué sirve verificar mi cuenta? ¿qué es esto de la carta con un código que me vais a mandar?</strong></a></li>
-        <li><a href="#7">Hay muchas propuestas parecidas, ¿no se podrían unificar?</a></li>
+      <li><a href="#4"><strong>¿Necesito teléfono móvil o acceso a Internet para poder participar?</strong></a></li>
-        <li><a href="#8">Me he olvidado de mi contraseña o no me funciona ¿qué puedo hacer?</a></li>
+      <li><a href="#5"><strong>¿Cómo creo y verifico mi cuenta?</strong></a></li>
-        <li><a href="#9">No consigo crear mi cuenta correctamente.</a></li>
+      <li><a href="#6"><strong>¿Cómo puedo enviar una propuesta al Ayuntamiento? ¿Puedo mandaros directamente mi propuesta a alguno de los correos electrónico que aparecen en la web de participación?</strong></a></li>
-        <li><a href="#10">¿Cómo puedo cambiar mi correo electrónico, mi nombre de usuario, mi contraseña o activar/desactivar las notificaciones que me llegan al correo electrónico?</a></li>
+      <li><a href="#7"><strong>Hay muchas propuestas parecidas, ¿no se podrían unificar?</strong></a></li>
+      <li><a href="#8"><strong>Me he olvidado de mi contraseña o no me funciona ¿qué puedo hacer?</strong></a></li>
+      <li><a href="#9"><strong>No consigo crear mi cuenta correctamente.</strong></a></li>
+      <li><a href="#10"><strong>¿Cómo puedo cambiar mi correo electrónico, mi nombre de usuario, mi contraseña o activar/desactivar las notificaciones que me llegan al correo electrónico?</strong></a></li>
     </ul>
   </div>
+
   <div class="text small-12 medium-9 column">
     <h1 class="clear">Soluciones a problemas técnicos (FAQ)</h1>
-
     <p>Te presentamos una lista de las soluciones a los problemas y dudas técnicas más frecuentes del Portal de Gobierno Abierto. Si esto no resuelve tu problema, puedes llamar al 010 (o a su versión grauita 915298210) o acercarte a cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que tienes en Madrid.</p>
 
     <h2 id="1">No me funciona la verificación de residencia.</h2>
-
     <p>Comprueba las siguientes posibilidades:</p>
     <ul>
       <li>¿Has puesto el DNI o documento con todos los caracteres juntos, incluyendo la letra al final?</li>
@@ -32,11 +33,9 @@
     </ul>
 
     <h2 id="2">No estoy empadronado en Madrid ¿por qué no puedo participar?</h2>
-
     <p>El apoyo y votación de propuestas está limitado a la gente empadronada en Madrid, ya que se trata de tomar decisiones que afectarán al municipio y a los que viven en él, y por tanto nos parece que son ellos los que tienen que tomar la decisión final. Es cierto que hay personas que no están empadronadas en Madrid y que aun así les pueden afectar esas decisiones, pero el Padrón es el censo más amplio del que disponemos que nos permite que el proceso de participación sea seguro y lleguemos al máximo posible de personas. No obstante, sí que es posible participar aunque no se esté empadronado. La sección de debates está abierta a todo el mundo, y también es posible lanzar una propuesta, o comentar las propuestas existentes sin necesidad de estar empadronado. Sólo la decisión sobre las propuestas (apoyos y votaciones) están limitadas a la gente empadronada.</p>
 
     <h2 id="3">¿Para qué sirve verificar mi cuenta? ¿qué es esto de la carta con un código que me vais a mandar?</h2>
-
     <p>Para usar la web necesitamos una cuenta de usuario, que podrá hacer más o menos cosas según esté más o menos verificada:</p>
     <ul>
       <li>Si nos <a href="https://decide.madrid.es/users/sign_up">registramos</a> en la web con nuestro correo electrónico y no damos ningún dato más (no hacemos el proceso de verificación de residencia) podremos:</li>
@@ -67,21 +66,20 @@
     <p>También es importante recalcar que podemos crear y verificar completamente nuestra cuenta sin pasar por Internet, realizando el proceso completamente de manera presencial en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid.
 
     <h2 id="4">¿Necesito teléfono móvil o acceso a Internet para poder participar?</h2>
-
     <p>No. Todas las acciones relacionadas con las propuestas, tanto crearlas, como apoyarlas, votarlas o informarnos sobre ellas, es algo que podemos hacer presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, simplemente presentando nuestro DNI, pasaporte o tarjeta de residencia (recuerda que para apoyar o votar propuestas es necesario estar empadronado en Madrid). Además podremos presentar hojas de firmas para apoyar una propuesta concreta. También podremos crearnos una cuenta de usuario completamente verificada, en caso de que optemos en algún momento por utilizar la web directamente.
     </p>
+
     <h2 id="5">¿Cómo creo y verifico mi cuenta?</h2>
     <ul>
       <li>Lo primero es crear una cuenta básica. Para ello hacemos clic en el enlace <a href="https://decide.madrid.es/users/sign_up">Registrarse</a> y rellenamos los datos que nos piden. Es un requisito marcar la casilla de aceptación de las condiciones de uso, y rellenar correctamente el captcha (en la parte inferior del formulario se nos presenta una imagen con unas letras deformadas que tendremos que introducir en la casilla inferior como medida de seguridad; ten en cuenta la diferencia entre mayúsculas y minúsculas). Al crear una cuenta nos llegará un correo electrónico a la dirección que hayamos especificado, y tendremos que hacer click en el enlace que contiene (el enlace que pone "Confirmar mi cuenta") para terminar de crear la cuenta.</li>
       <li>Una vez creada la cuenta básica, y tras <a href="https://decide.madrid.es/users/sign_in">entrar</a> con nuestro correo y contraseña, el sistema nos dará la opción de realizar una verificación básica de la misma. Tanto este paso como el siguiente se pueden realizar presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid. Si preferimos hacerlo a través de la web, hacemos click en el enlace <a href="https://decide.madrid.es/account">"Mi cuenta"</a> de la parte superior derecha, y luego en el botón "Verificar mi cuenta". Lo primero que se nos pedirá es que introduzcamos nuestros datos de residencia, para verificar que estamos empadronados en el municipio de Madrid (es importante introducir el número de documento con la letra; y marcar la casilla de aceptación de acceso al Padrón). Si los datos son correctos, se nos pedirá un teléfono móvil para mandarnos un código de confirmación, que introduciremos en la siguiente página que se nos presente. Este móvil no se utilizará para contactarnos ni para enviarnos nada en ningún momento, sólo es una medida de seguridad. Si preferimos no dar ningún teléfono móvil, podemos realizar el proceso sin necesidad de él en las Oficinas de Atención al Ciudadano, como comentamos anteriormente. Una vez introducido correctamente el código de confirmación, nuestra cuenta nos permitirá apoyar propuestas.</li>
       <li>Para poder acceder a las votaciones finales de las propuestas, tendremos que verificar completamente nuestra cuenta. No obstante recuerda que la votación de propuestas es un proceso muy concreto que sólo ocurre durante una semana una vez las propuestas han llegado al 2% de apoyos, por lo tanto por lo general será posible realizar todas las acciones en la web con la anterior verificación básica de nuestracuenta. Para verificar completamente nuestra cuenta, podemos hacerlo presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a>, o bien a través de la web <a href="https://decide.madrid.es/users/sign_in">entrando</a> con nuestro correo y contraseña, hacer clic en el enlace <a href="https://decide.madrid.es/account">"Mi cuenta"</a> de la parte superior derecha, pulsar el botón "Finalizar verificación", y finalmente hacer click en "Solicitar el envío de un correo postal". Una vez solicitado, nos llegará a nuestra dirección de empadronamiento una carta, con un código de seguridad y unas sencillas instrucciones para realizar la verificación.</li>
     </ul>
-      <h2 id="6">¿Cómo puedo enviar una propuesta al Ayuntamiento? ¿Puedo mandaros directamente mi propuesta a alguno de los correos electrónico que aparecen en la web de participación?</h2>
 
+    <h2 id="6">¿Cómo puedo enviar una propuesta al Ayuntamiento? ¿Puedo mandaros directamente mi propuesta a alguno de los correos electrónico que aparecen en la web de participación?</h2>
     <p>El camino correcto para hacer una propuesta es añadirla uno mismo directamente en la web de participación dentro de la sección <a href="https://decide.madrid.es/proposals">"Propuestas"</a> (para ello es necesario primero crear una cuenta haciendo click en el enlace <a href="https://decide.madrid.es/users/sign_up">Registrarse</a>, y una vez creada, hacer click en el botón "Crear propuesta" de la sección "Propuestas"), o presencialmente a través de cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid. En caso de que lo que queremos presentar sea una sugerencia o reclamación, la información para presentarlas se encuentra <a href-"https://sede.madrid.es/portal/site/tramites/menuitem.1f3361415fda829be152e15284f1a5a0/?vgnextoid=32eddd9d6baed010VgnVCM2000000c205a0aRCRD" target="_blank">en esta página</a>.
 
     <h2 id="7">Hay muchas propuestas parecidas, ¿no se podrían unificar?</h2>
-
     <p>En breve implementaremos una nueva funcionalidad de la web que permitirá marcar propuestas similares como tales, y que se muestren al visualizar cualquiera de ellas. De esta forma la gente podrá decidir cuál de ellas apoyar tras compararlas, y ayudará a que no se dispersen tanto los apoyos y no se repitan tanto las mismas propuestas. También implementaremos un sistema que cuando creemos nuestra propuesta nos mostrará propuestas similares, por si la idea que queremos lanzar ya existiera en el portal de participación.</p>
 
     <p>Sobre la posibilidad de unificar propuestas, lo que pueden parecer pequeñas diferencias entre dos propuestas similares, pueden marcar grandes diferencias a la hora de hacerlas realidad. Por ello hay personas que pueden querer apoyar una de ellas y no otras. Es por eso que debemos respetar los apoyos particulares que haya dado la gente, y no unificar las propuestas. Esto es independiente de que los autores de las propuestas quieran unirlas. Una vez las propuestas están recibiendo apoyos pasan a ser tanto de la gente que las apoya como de sus autores.</p>
@@ -100,8 +98,6 @@
     </ul>
 
     <h2 id="10">¿Cómo puedo cambiar mi correo electrónico, mi nombre de usuario, mi contraseña, darme de baja o activar/desactivar las notificaciones que me llegan al correo electrónico?</h2>
-
     <p>Haz click en el enlace <a href="https://decide.madrid.es/users/sign_in">"Entrar"</a>, introduce tu correo electrónico y tu contraseña, y pulsa el botón "Entrar". Una vez hecho esto, haz click en el enlace <a href="https://decide.madrid.es/account">"Mi cuenta"</a> donde encontrarás todas las opciones que te permitirán cambiar tu correo electrónico, nombre de usuario, contraseña, darte de baja o activar/desactivar las notificaciones. Una vez realizado el cambio adecuado asegúrate de hacer click en el botón "Guardar cambios".</p>
   </div>
 </div>
-</div>

app/views/pages/how_it_works.html.erb

@@ -1,23 +1,23 @@
-<div class="page row-full">
+<div class="row margin-top">
-  <div class="row">
+  <div class="small-12 medium-3 column">
-    <div class="menu small-12 medium-3 column">
+    <%= link_to "/more_information", class: 'back' do %>
-      <i class="icon-angle-left left"></i>&nbsp;
+      <i class="icon-angle-left"></i>
-      <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
+      <%= t("debates.show.back_link") %>
-      <ul class="clear">
+    <% end %>
+
+    <ul class="menu vertical margin-top">
         <li>
-            <a href="#i">I. <%= t('pages.more_information.how_it_works.i') %></a>
+          <a href="#i"><strong>I. <%= t('pages.more_information.how_it_works.i') %></strong></a>
-            <ul>
+          <ul class="nested vertical menu">
-              <li><a href="#i1">I.1. <%= t('pages.more_information.how_it_works.i1') %></a></li>
+            <li><a href="#i1"><strong>I.1. <%= t('pages.more_information.how_it_works.i1') %></strong></a></li>
-              <li><a href="#i2">I.2. <%= t('pages.more_information.how_it_works.i2') %></a></li>
+            <li><a href="#i2"><strong>I.2. <%= t('pages.more_information.how_it_works.i2') %></strong></a></li>
           </ul>
         </li>
     </ul>
   </div>
-    <div class="text small-12 medium-9 column">
 
+  <div class="small-12 medium-9 column">
     <h1><%= t('pages.more_information.titles.how_it_works') %></h1>
-
     <%= markdown t('pages.more_information.how_it_works.text') %>
   </div>
 </div>
-</div>

app/views/pages/how_to_use.html.erb

@@ -1,13 +1,12 @@
-<div class="page row-full">
+<div class="row margin-top">
-  <div class="row">
   <div class="text small-12 column">
-      <i class="icon-angle-left left"></i>&nbsp;
+    <%= link_to "/more_information", class: 'back' do %>
-      <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>
 
-      <h1 class="clear"><%= t('pages.more_information.titles.how_to_use') %></h1>
+    <h1><%= t('pages.more_information.titles.how_to_use') %></h1>
 
     <%= markdown t('pages.more_information.how_to_use.text') %>
-      
-    </div>
   </div>
 </div>

app/views/pages/more_information.html.erb

@@ -1,60 +1,69 @@
 <% provide :title do %><%= t('pages.titles.more_information') %><% end %>
 <div class="page row-full">
   <div class="row">
-    <div class="more-information text small-12 medium-8 column">
+    <div class="more-information margin-top small-12 medium-7 column">
       <h1><%= t('pages.titles.more_information') %></h1>
-      <ul>
+      <ul class="no-bullet">
         <li>
           <%= link_to page_path('how_it_works') do %>
             <%= t('pages.more_information.titles.how_it_works') %>
+            <br>
             <span><%= t('pages.more_information.description.how_it_works') %></span>
           <% end %>
         </li>
         <li>
         <%= link_to page_path('how_to_use') do %>
             <%= t('pages.more_information.titles.how_to_use') %>
+            <br>
             <span><%= t('pages.more_information.description.how_to_use') %></span>
         <% end %>
         </li>
         <li>
         <%= link_to page_path('participation') do %>
             <%= t('pages.more_information.titles.participation') %>
+            <br>
             <span><%= t('pages.more_information.description.participation') %></span>
         <% end %>
         </li>
         <li>
         <%= link_to page_path('proposals_info') do %>
             <%= t('pages.more_information.titles.proposals_info') %>
+            <br>
             <span><%= t('pages.more_information.description.proposals_info') %></span>
         <% end %>
         </li>
         <li>
         <%= link_to page_path('spending_proposals_info') do %>
             <%= t('pages.more_information.titles.spending_proposals_info') %>
+            <br>
             <span><%= t('pages.more_information.description.spending_proposals_info') %></span>
         <% end %>
         </li>
         <li>
         <%= link_to page_path('participation_world') do %>
             <%= t('pages.more_information.titles.participation_world') %>
+            <br>
             <span><%= t('pages.more_information.description.participation_world') %></span>
         <% end %>
         </li>
         <li>
         <%= link_to page_path('participation_facts') do %>
             <%= t('pages.more_information.titles.participation_facts') %>
+            <br>
             <span><%= t('pages.more_information.description.participation_facts') %></span>
         <% end %>
         </li>
         <li>
         <%= link_to page_path('faq') do %>
             <%= t('pages.more_information.titles.faq') %>
+            <br>
             <span><%= t('pages.more_information.description.faq') %></span>
         <% end %>
         </li>
         <li>
         <%= link_to page_path('proposals_info', :anchor => "iii") do %>
             <%= t('pages.more_information.titles.signature_sheet') %>
+            <br>
             <span><%= t('pages.more_information.description.signature_sheet') %></span>
         <% end %>
         </li>

app/views/pages/opendata.html.erb

@@ -1,8 +1,21 @@
 <% provide :title do %><%= t('pages.titles.opendata') %><% end %>
-<div class="page row-full">
+
-  <div class="row">
+<div class="row expanded highlight">
-    <div class="alert-box info radius text small-12 column">
+  <div class="row margin">
+    <div class="small-12 medium-7 column">
+      <h1><%= t("pages.opendata.title") %></h1>
+      <p><strong><%= t("pages.opendata.slogan_html") %></strong></p>
+      <%= link_to t("pages.opendata.go_old"), t("layouts.header.external_link_opendata_url"), target: "_blank", class: "button" %>
+    </div>
+
+    <div class="show-for-medium-up small-12 medium-5 column text-center">
+      <%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
+    </div>
+  </div>
+</div>
+
+<div class="row margin-top">
+  <div class=" small-12 column">
     <p><%= t('pages.while_unfinished_html') %></p>
   </div>
 </div>
-</div>

app/views/pages/participation.html.erb

@@ -1,34 +1,37 @@
-<div class="page row-full">
+<div class="row margin-top">
-  <div class="row">
+  <div class="small-12 medium-3 column">
-  <div class="menu small-12 medium-3 column">
+    <%= link_to "/more_information", class: 'back' do %>
-    <i class="icon-angle-left left"></i>&nbsp;
+      <i class="icon-angle-left"></i>
-    <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
+      <%= t("debates.show.back_link") %>
-    <ul class="clear">
+    <% end %>
+
+    <ul class="menu vertical margin-top hide-for-small-only">
         <li>
-          <a href="#i">I. Participación</a>
+          <a href="#i"><strong>I. Participación</strong></a>
-          <ul>
+          <ul class="nested vertical menu">
-            <li><a href="#i1">I.1. Propuestas ciudadanas</a></li>
+            <li><a href="#i1"><strong>I.1. Propuestas ciudadanas</strong></a></li>
-            <li><a href="#i2">I.2. Presupuestos participativos</a></li>
+            <li><a href="#i2"><strong>I.2. Presupuestos participativos</strong></a></li>
-            <li><a href="#i3">I.3. Legislacion colaborativa</a></li>
+            <li><a href="#i3"><strong>I.3. Legislacion colaborativa</strong></a></li>
-            <li><a href="#i4">I.4. Co-gobierno ciudadano</a></li>
+            <li><a href="#i4"><strong>I.4. Co-gobierno ciudadano</strong></a></li>
-            <li><a href="#i5">I.5. Participación sectorial</a></li>
+            <li><a href="#i5"><strong>I.5. Participación sectorial</strong></a></li>
-            <li><a href="#i6">I.6. Inclusión, neutralidad y privacidad</a></li>
+            <li><a href="#i6"><strong>I.6. Inclusión, neutralidad y privacidad</strong></a></li>
-            <li><a href="#i7">I.7. Innovación social</a></li>
+            <li><a href="#i7"><strong>I.7. Innovación social</strong></a></li>
           </ul>
         </li>
         <li>
-          <a href="#ii">II. Transparencia</a>
+          <a href="#ii"><strong>II. Transparencia</strong></a>
-          <ul>
+          <ul class="nested vertical menu">
-            <li><a href="#ii1">II.1. Ordenanza de transparencia</a></li>
+            <li><a href="#ii1"><strong>II.1. Ordenanza de transparencia</strong></a></li>
-            <li><a href="#ii2">II.2. Portal de transparencia</a></li>
+            <li><a href="#ii2"><strong>II.2. Portal de transparencia</strong></a></li>
-            <li><a href="#ii3">II.3. Datos abiertos</a></li>
+            <li><a href="#ii3"><strong>II.3. Datos abiertos</strong></a></li>
-            <li><a href="#ii4">II.4. Agendas públicas</a></li>
+            <li><a href="#ii4"><strong>II.4. Agendas públicas</strong></a></li>
-            <li><a href="#ii5">II.5. Transparencia del Lobby</a></li>
+            <li><a href="#ii5"><strong>II.5. Transparencia del Lobby</strong></a></li>
           </ul>
         </li>
     </ul>
   </div>
-    <div class="text small-12 medium-9 column">
+
+  <div class="small-12 medium-9 column">
     <h1>Participación y Transparencia en Madrid - Próximas novedades</h1>
 
     <p>Desde el nuevo gobierno del Ayuntamiento de Madrid ponemos en marcha un nuevo proyecto de participación y transparencia, desarrollado a través de la recién creada área de gobierno: Participación Ciudadana, Transparencia y Gobierno Abierto. El objetivo de este nuevo proyecto es claro: que los madrileños puedan decidir directamente la política de la ciudad, y que todo lo que ocurra en el Ayuntamiento, hasta el último rincón, esté a la vista de todos.</p>
@@ -81,4 +84,4 @@
     </ul>
   </div>
 </div>
-</div>
+

app/views/pages/participation_facts.html.erb

@@ -1,16 +1,16 @@
-<div class="page row-full">
+<div class="row margin-top">
-  <div class="row">
+  <div class="text small-12 column">
-    <div class="text small-12 medium-10 column small-centered">
-      <i class="icon-angle-left left"></i>&nbsp;
-      <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
 
-      <h1 class="clear">Hechos sobre participación ciudadana y democracia directa</h1>
+    <%= link_to "/more_information", class: 'back' do %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>
+
+    <h1>Hechos sobre participación ciudadana y democracia directa</h1>
 
-      <div class="small-12 medium-9">
     <div class="flex-video">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/s_asCv_nkX0?list=PLhnvwI6F9eqUk7l8_sIVcPz7DjvE27hfS" frameborder="0" allowfullscreen title="Vídeos del canal de YouTube de Abriendo Madrid"></iframe>
     </div>
-      </div>
 
     <h2>La democracia directa produce gente más informada y con más cultura política.</h2>
     <p>El poner en marcha mecanismos de participación reales hace que la gente se preocupe por las decisiones que tiene que tomar, y que por lo tanto se informe sobre ellas. Esto se observa sistemáticamente al comparar diferentes regiones de un mismo país con diferentes grados de democracia directa, o en procesos particulares como por ejemplo la votación del Tratado por una Constitución para Europa, comparando los países que lo votaron en referéndum y los que no.</p>
@@ -36,4 +36,3 @@
     <h2>Si los ciudadanos son capaces de elegir entre políticos que toman decisiones buenas o malas para el país, deben ser capaces de elegir directamente entre buenas y malas decisiones.</h2>
   </div>
 </div>
-</div>

app/views/pages/participation_world.html.erb

@@ -1,18 +1,17 @@
-<div class="page row-full">
+<div class="row margin-top">
-  <div class="row">
+  <div class="small-12 medium-3 column">
-  <div class="menu small-12 medium-3 column">
+    <%= link_to "/more_information", class: 'back' do %>
-    <i class="icon-angle-left left"></i>&nbsp;
+      <i class="icon-angle-left"></i>
-    <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
+      <%= t("debates.show.back_link") %>
-    <ul class="clear">
+    <% end %>
-        <li>
+
-          <a href="#i">La nueva ola global de participación ciudadana</a>
+    <ul class="menu vertical margin-top">
-        </li>
+        <li><a href="#i"><strong>La nueva ola global de participación ciudadana</strong></a></li>
-        <li>
+        <li><a href="#ii"><strong>Participación ciudadana directa con experiencia</strong></a></li>
-          <a href="#ii">Participación ciudadana directa con experiencia</a>
-        </li>
     </ul>
   </div>
-    <div class="text small-12 medium-9 column">
+
+  <div class="small-12 medium-9 column">
     <h1>Participación ciudadana directa en el mundo</h1>
     <p>En el mundo existen sistemas de participación ciudadana muy similares al que vamos a implementar en Madrid, que llevan funcionando desde hace más de cien años y en países muy diferentes. La experiencia larga y variada de dichos sistemas demuestra que lo que ponemos en marcha en Madrid tendrá un impacto muy positivo en la sociedad, como ha tenido en esos otros países.</p>
 
@@ -47,4 +46,3 @@
 
   </div>
 </div>
-</div>

app/views/pages/privacy.html.erb

@@ -1,10 +1,8 @@
 <% provide :title do %><%= t('pages.titles.privacy') %><% end %>
-<div class="page row-full">
-  <div class="row">
-    <div class="text small-12 column">
 
-      <%= render '/shared/print' %>
+<div class="row margin-top">
 
+  <div class="small-12 medium-9 column">
     <h1><%= t("pages.privacy") %></h1>
 
     <h2>AVISO DE PROTECCIÓN DE DATOS</h2>
@@ -22,5 +20,10 @@
       <li>Como principio general, este sitio web no comparte ni revela información obtenida, excepto cuando haya sido autorizada por el usuario, o la informacion sea requerida por la autoridad judicial, ministerio fiscal o la policia judicial, o se de alguno de los supuestos regulados en el artículo 11 de la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal.</li>
     </ol>
   </div>
+
+  <div class="small-12 medium-3 column">
+    <%= render '/shared/print' %>
   </div>
+
 </div>
+

app/views/pages/proposals_info.html.erb

@@ -1,21 +1,19 @@
-<div class="page row-full">
+<div class="row margin-top">
-  <div class="row">
+  <div class="small-12 medium-3 column">
-  <div class="menu small-12 medium-3 column">
+
-    <i class="icon-angle-left left"></i>&nbsp;
+    <%= link_to "/more_information", class: 'back' do %>
-    <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
+      <i class="icon-angle-left"></i>
-    <ul class="clear">
+      <%= t("debates.show.back_link") %>
-        <li>
+    <% end %>
-          <a href="#i">Explicación detallada del proceso</a>
+
-        </li>
+    <ul class="vertical menu margin-top">
-        <li>
+        <li><a href="#i"><strong>Explicación detallada del proceso</strong></a></li>
-          <a href="#ii">Preguntas Frecuentes</a>
+        <li><a href="#ii"><strong>Preguntas Frecuentes</strong></a></li>
-        </li>
+        <li><a href="#iii"><strong>Hojas de firmas para recoger apoyos</strong></a></li>
-        <li>
-          <a href="#iii">Hojas de firmas para recoger apoyos</a>
-        </li>
     </ul>
   </div>
-    <div class="text small-12 medium-9 column">
+
+  <div class="small-12 medium-9 column">
     <h1>¿Cómo funcionan las propuestas ciudadanas?</h1>
     <p>El mecanismo de propuestas ciudadanas se resume en cuatro pasos muy sencillos:</p>
     <ol>
@@ -97,13 +95,11 @@
 
       <li><strong>¿Cómo se sabe que una propuesta se ha cumplido?</strong><br>
       Cuando se aprueba una propuesta, el Ayuntamiento publica en la página web cuáles son los pasos que se van a realizar para ponerla en práctica, incluyendo los informes que las correspondientes áreas redacten y las acciones que se emprenden. La información es completa y transparente para que puedas hacer un seguimiento de cómo evoluciona cada propuesta ciudadana.</li>
+    </ol>
 
     <h2 id="iii">Hojas de firmas para recoger apoyos</h2>
-
     <p>El proceso de recogida de apoyos de una propuesta, además de en la web, puede realizarse a través de hojas de firmas, cuyo modelo puede ser <a href="/docs/formulario_propuestas_ciudadanas.pdf" target="_blank">descargado en este documento PDF</a>.</p>
     <p>La hoja debe contener en las casillas superiores el código de la propuesta y su título, según figura en la página web específica de la propuesta, dentro del Portal de Gobierno Abierto.</p>
     <p>Los apoyos recogidos de esta manera se sumarán a los apoyos ya existentes en el portal de gobierno abierto. Las hojas pueden ser entregadas en cualquiera de los Registros del Ayuntamiento, presentes en cada una de las Juntas de Distrito. <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/Ayuntamiento/Oposiciones-y-Empleo/Direcciones-y-telefonos/Oficinas-de-Registro-del-Ayuntamiento-de-Madrid?vgnextfmt=default&vgnextoid=adedb88db777f010VgnVCM2000000c205a0aRCRD&vgnextchannel=ddc3ca1c5a057010VgnVCM100000dc0ca8c0RCRD" target="_blank">Ver la lista completa de Oficinas de Registro</a>.</p>
-
-    </div>
   </div>
 </div>

app/views/pages/spending_proposals_info.html.erb

@@ -1,20 +1,18 @@
-<div class="page row-full">
+<div class="row margin-top">
-  <div class="row">
+  <div class="small-12 medium-3 column">
-  <div class="menu small-12 medium-3 column">
+    <%= link_to "/more_information", class: 'back' do %>
-    <i class="icon-angle-left left"></i>&nbsp;
+      <i class="icon-angle-left"></i>
-    <%= link_to t("spending_proposals.new.back_link"), "/more_information", class: 'left back' %>
+      <%= t("debates.show.back_link") %>
-    <ul class="clear">
+    <% end %>
-        <li>
+
-          <a href="#i">Explicación detallada del proceso</a>
+    <ul class="menu vertical margin-top">
-        </li>
+      <li><a href="#i"><strong>Explicación detallada del proceso</strong></a></li>
     </ul>
   </div>
-    <div class="text small-12 medium-9 column">
-      <h1>¿Cómo funcionan los presupuestos ciudadanos?</h1>
 
+  <div class="small-12 medium-9 column">
+    <h1>¿Cómo funcionan los presupuestos ciudadanos?</h1>
     <h2 id="i">Explicación detallada del proceso</h2>
     <p>Próximamente se podrá encontrar aquí una descripción del proceso de participación ciudadana en los presupuestos.</p>
-
-    </div>
   </div>
 </div>

app/views/proposals/_comments.html.erb

@@ -15,7 +15,7 @@
         <% else %>
         <br>
 
-        <div class="alert-box radius info">
+        <div data-alert class="callout primary">
           <%= t("proposals.show.login_to_comment",
               signin: link_to(t("votes.signin"), new_user_session_path),
               signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>

app/views/proposals/_featured_votes.html.erb

@@ -6,7 +6,7 @@
       </div>
     <% else %>
       <%= link_to vote_featured_proposal_path(proposal, value: 'yes'),
-          class: "button button-support tiny radius expand",
+          class: "button button-support small expanded",
           title: t('proposals.proposal.support_title'), method: "post", remote: true do %>
         <%= t("proposals.proposal.support") %>
       <% end %>

app/views/proposals/_flag_actions.html.erb

@@ -1,23 +1,19 @@
 <span class="flag-content">
   <% if show_flag_action? proposal %>
-    <a id="flag-expand-proposal-<%= proposal.id %>" data-dropdown="flag-drop-proposal-<%= proposal.id %>" aria-controls="flag-drop-proposal-<%= proposal.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
+    <a id="flag-expand-proposal-<%= proposal.id %>" data-toggle="flag-drop-proposal-<%= proposal.id %>" title="<%= t('shared.flag') %>">
-      &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
+      <i class="icon-flag flag-disable"></i>
     </a>
-    <ul id="flag-drop-proposal-<%= proposal.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+    <div class="dropdown-pane" id="flag-drop-proposal-<%= proposal.id %>" data-dropdown data-auto-focus="true">
-      <li>
       <%= link_to t('shared.flag'), flag_proposal_path(proposal), method: :put, remote: true, id: "flag-proposal-#{ proposal.id }" %>
-      </li>
+    </div>
-    </ul>
   <% end %>
 
   <% if show_unflag_action? proposal %>
-    <a id="unflag-expand-proposal-<%= proposal.id %>" data-dropdown="unflag-drop-proposal-<%= proposal.id %>" aria-controls="unflag-drop-proposal-<%= proposal.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
+    <a id="unflag-expand-proposal-<%= proposal.id %>" data-toggle="unflag-drop-proposal-<%= proposal.id %>" title="<%= t('shared.unflag') %>">
-      &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
+      <i class="icon-flag flag-active"></i>
     </a>
-    <ul id="unflag-drop-proposal-<%= proposal.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
+    <div class="dropdown-pane" id="unflag-drop-proposal-<%= proposal.id %>" data-dropdown data-auto-focus="true">
-      <li>
       <%= link_to t('shared.unflag'), unflag_proposal_path(proposal), method: :put, remote: true, id: "unflag-proposal-#{ proposal.id }" %>
-      </li>
+    </div>
-    </ul>
   <% end %>
 </span>

app/views/proposals/_form.html.erb

@@ -89,7 +89,7 @@
     </div>
 
     <div class="actions small-12 column">
-      <%= f.submit(class: "button radius", value: t("proposals.#{action_name}.form.submit_button")) %>
+      <%= f.submit(class: "button", value: t("proposals.#{action_name}.form.submit_button")) %>
     </div>
   </div>
 <% end %>

app/views/proposals/_proposal.html.erb

@@ -1,16 +1,18 @@
-<div id="<%= dom_id(proposal) %>" class="proposal clear">
+<div id="<%= dom_id(proposal) %>" class="proposal clear" data-type="proposal">
   <div class="panel">
     <div class="row">
 
       <div class="small-12 medium-9 column">
         <div class="proposal-content">
+
           <% cache [locale_and_user_status(proposal), 'index', proposal, proposal.author] do %>
-            <span class="label-proposal left"><%= t("proposals.proposal.proposal") %></span>
+            <span class="label-proposal float-left"><%= t("proposals.proposal.proposal") %></span>
             <i class="icon-proposals"></i>
             <h3><%= link_to proposal.title, namespaced_proposal_path(proposal) %></h3>
             <p class="proposal-info">
               <i class="icon-comments"></i>&nbsp;
               <%= link_to t("proposals.proposal.comments", count: proposal.comments_count), namespaced_proposal_path(proposal, anchor: "comments") %>
+
               <span class="bullet">&nbsp;&bull;&nbsp;</span>
               <%= l proposal.created_at.to_date %>
 

app/views/proposals/_votes.html.erb

@@ -23,7 +23,7 @@
       </div>
     <% else %>
       <%= link_to vote_url,
-          class: "button button-support tiny radius expand",
+          class: "button button-support small expanded",
           title: t('proposals.proposal.support_title'), method: "post", remote: true do %>
         <%= t("proposals.proposal.support") %>
       <% end %>

app/views/proposals/edit.html.erb

@@ -1,12 +1,12 @@
 <div class="proposal-edit row">
 
   <div class="small-12 column">
-    <%= link_to proposals_path, class: "left back clear" do %>
+    <%= link_to proposals_path, class: "back" do %>
-      <i class="icon-angle-left left"></i>
+      <i class="icon-angle-left"></i>
       <%= t("proposals.edit.back_link") %>
     <% end %>
 
-    <div class="right">
+    <div class="float-right">
       <%= link_to t("proposals.edit.show_link"), @proposal %>
     </div>
 

app/views/proposals/index.html.erb

@@ -9,7 +9,7 @@
   <div class="wrap row">
     <div id="proposals" class="proposals-list small-12 medium-9 column">
 
-      <div class="small-12 margin-top search-results">
+      <div class="small-12 search-results">
         <% if @search_terms || @advanced_search_terms %>
           <h2>
             <%= page_entries_info @proposals %>
@@ -43,7 +43,7 @@
       <%= render 'shared/order_links', i18n_namespace: "proposals.index" %>
 
       <div class="show-for-small-only">
-        <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %>
+        <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button expanded' %>
       </div>
 
       <%= render partial: 'proposals/proposal', collection: @proposals %>
@@ -51,8 +51,8 @@
     </div>
 
     <div class="small-12 medium-3 column">
-      <aside class="sidebar" role="complementary">
+      <aside class="margin-bottom" role="complementary">
-        <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %>
+        <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button expanded' %>
         <%= render "shared/tag_cloud", taggable: 'proposal' %>
         <%= render 'categories' %>
         <%= render 'geozones' %>

app/views/proposals/new.html.erb

@@ -1,12 +1,12 @@
 <div class="proposal-new row">
 
   <div class="small-12 medium-9 column">
-    <%= link_to proposals_path, class: "left back" do %>
+    <%= link_to proposals_path, class: "back" do %>
-      <i class="icon-angle-left left"></i>
+      <i class="icon-angle-left"></i>
       <%= t("proposals.new.back_link") %>
     <% end %>
     <h1><%= t("proposals.new.start_new") %></h1>
-    <div class="alert-box info radius">
+    <div data-alert class="callout primary">
       <%= link_to "/proposals_info", target: "_blank" do %>
         <%= t("proposals.new.more_info")%>
       <% end %>
@@ -15,7 +15,7 @@
   </div>
 
   <div class="small-12 medium-3 column">
-    <i class="icon-proposals right"></i>
+    <i class="icon-proposals float-right"></i>
     <h2><%= t("proposals.new.recommendations_title") %></h2>
     <ul class="recommendations">
       <li><%= t("proposals.new.recommendation_one") %></li>

app/views/proposals/show.html.erb

@@ -10,11 +10,12 @@
   <section class="proposal-show">
     <div id="<%= dom_id(@proposal) %>" class="row">
       <div class="small-12 medium-9 column">
-        <i class="icon-angle-left left"></i>&nbsp;
+        <%= link_to :back, class: "back" do %>
-        <%= link_to t("proposals.show.back_link"), :back, class: 'left back' %>
+          <i class="icon-angle-left"></i>
-
+          <%= t("proposals.show.back_link") %>
+        <% end %>
         <% if current_user && @proposal.editable_by?(current_user) %>
-          <%= link_to edit_proposal_path(@proposal), class: 'edit-proposal button success tiny radius right' do %>
+          <%= link_to edit_proposal_path(@proposal), class: 'edit-proposal button success small float-right' do %>
             <i class="icon-edit"></i>
             <%= t("proposals.show.edit_proposal_link") %>
           <% end %>
@@ -22,7 +23,7 @@
 
         <h1><%= @proposal.title %></h1>
         <% if @proposal.conflictive? %>
-          <div class="alert-box alert radius margin-top">
+          <div data-alert class="callout alert margin-top">
             <strong><%= t("proposals.show.flag") %></strong>
           </div>
         <% end %>
@@ -39,11 +40,14 @@
           <span class="js-flag-actions">
             <%= render 'proposals/flag_actions', proposal: @proposal %>
           </span>
-          <br>
-            <%= t("proposals.show.code") %>
-            <%= @proposal.code %>
         </div>
 
+        <br>
+        <p>
+          <%= t("proposals.show.code") %>
+          <strong><%= @proposal.code %></strong>
+        </p>
+
         <blockquote><%= @proposal.summary %></blockquote>
 
         <%= safe_html_with_links @proposal.description %>

app/views/shared/_admin_login_items.html.erb

@@ -1,4 +1,3 @@
-<ul class="right">
 <% if current_user %>
   <% if current_user.administrator? %>
     <li>
@@ -12,4 +11,3 @@
     </li>
   <% end %>
 <% end %>
-</ul>