Rails + Turbolinks Starter Template Generator

Material ripple

PACE.js loader

RTL support

RTL mode

Theme settings panel

Light style

Material style

Dark style

PAGE LAYOUT

LAYOUT OPTIONS

Fixed navbar

Fixed footer

Reversed

Collapsed sidenav

THEME

NAVBAR BG

SIDENAV BG

FOOTER BG

<!DOCTYPE html>

<%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  {% if settingsPanel -%}
  <meta name="turbolinks-cache-control" content="no-preview">
  {% endif %}

<title><%= @title ? @title + " - " : "" %>Rails + Turbolinks Starter</title>

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">

<%= stylesheet_pack_tag 'vendor/fonts/ionicons', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= stylesheet_pack_tag 'vendor/{% if rtlSupport %}rtl/{% endif %}bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}', media: 'all'{% if settingsPanel %}, class: 'theme-settings-bootstrap-css'{% else %}, 'data-turbolinks-track': 'reload'{% endif %} %>
  <%= stylesheet_pack_tag 'vendor/{% if rtlSupport %}rtl/{% endif %}appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}', media: 'all'{% if settingsPanel %}, class: 'theme-settings-appwork-css'{% else %}, 'data-turbolinks-track': 'reload'{% endif %} %>
  <%= stylesheet_pack_tag 'vendor/{% if rtlSupport %}rtl/{% endif %}theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}', media: 'all'{% if settingsPanel %}, class: 'theme-settings-theme-css'{% else %}, 'data-turbolinks-track': 'reload'{% endif %} %>
  <%= stylesheet_pack_tag 'vendor/{% if rtlSupport %}rtl/{% endif %}colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}', media: 'all'{% if settingsPanel %}, class: 'theme-settings-colors-css'{% else %}, 'data-turbolinks-track': 'reload'{% endif %} %>
  <%= stylesheet_pack_tag 'vendor/{% if rtlSupport %}rtl/{% endif %}uikit', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= javascript_pack_tag 'vendor/polyfills', 'data-turbolinks-track': 'reload' %>
  <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

{% if materialRipple %}
  
  <%= javascript_pack_tag 'vendor/material-ripple', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'vendor/material-ripple', media: 'all', 'data-turbolinks-track': 'reload' %>
  {% endif %}
  {%- if materialRipple and not settingsPanel -%}
  <script>window.attachMaterialRippleOnLoad();</script>
  {% endif %}

{% if pageLayout != 'blank' or settingsPanel %}
  
  <%= javascript_pack_tag 'vendor/layout-helpers', 'data-turbolinks-track': 'reload' %>
  {% endif %}

{% if settingsPanel %}
  
  <%= javascript_pack_tag 'vendor/theme-settings', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'vendor/theme-settings', media: 'all', 'data-turbolinks-track': 'reload' %>
  <script>
    // Use settings panel generator to configure the plugin
    window.themeSettings = new ThemeSettings({
      cssPath: '',
      themesPath: '',
      {%- if styles.length < 3 %}
      styles: ['{{ styles.join("', '")|safe }}'],
      {%- endif %}
      pathResolver: function(path) {
        var resolvedPaths = {
          // Core stylesheets
          <%- ['bootstrap', 'appwork', 'colors'].each do |name| %>
            {%- for styleName in styles %}
            '<%= name %>{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css': '<%= asset_pack_path "vendor/{% if rtlSupport %}rtl/{% endif %}#{name}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css" %>',
            {%- endfor %}
          <% end %>

// UI Kit
          'uikit.css': '<%= asset_pack_path "vendor/{% if rtlSupport %}rtl/{% endif %}uikit.css" %>',

// Themes
          <%- ['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'].each do |name| %>
            {%- for styleName in styles %}
            'theme-<%= name %>{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css': '<%= asset_pack_path "vendor/{% if rtlSupport %}rtl/{% endif %}theme-#{name}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css" %>',
            {%- endfor %}
          <% end %>
        };

return resolvedPaths[path] || path;
      }
    });
  </script>
  {% endif %}

{% if paceLoader %}
  
  <%= javascript_pack_tag 'vendor/pace', 'data-turbolinks-track': 'reload' %>
  {% endif %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

{% if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}

<%= stylesheet_pack_tag 'vendor/libs/perfect-scrollbar/perfect-scrollbar', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'vendor/libs/perfect-scrollbar/perfect-scrollbar', 'data-turbolinks-track': 'reload' %>
  {% endif %}

<%= javascript_pack_tag 'vendor/libs/popper/popper', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'vendor/bootstrap', 'data-turbolinks-track': 'reload' %>
  {%- if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}
  <%= javascript_pack_tag 'vendor/sidenav', 'data-turbolinks-track': 'reload' %>
  {%- endif %}
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

<%= yield :head %>
</head>
<body>
  {% if paceLoader %}
  
  <div class="page-loader"><div class="bg-primary"></div></div>
  {% endif %}

<%= content_for?(:content) ? yield(:content) : yield %>

</body>
</html>

<nav class="layout-navbar navbar navbar-expand-lg align-items-lg-center bg-{{navbarBg}} container-p-x" id="layout-navbar">

<%= link_to "Rails Starter", root_path, class: "navbar-brand" %>

<% if local_assigns[:hide_toggle] != true %>
  
  <div class="layout-sidenav-toggle navbar-nav align-items-lg-center mr-auto mr-lg-4">
    <a class="nav-item nav-link px-0 ml-2" href="javascript:void(0)">
      <i class="ion ion-md-menu text-large align-middle"></i>
    </a>
  </div>
  <% end %>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#layout-navbar-collapse">
    <span class="navbar-toggler-icon"></span>
  </button>

</nav>

$enable-rtl-support: {% if rtlSupport %}true{% else %}false{% endif %};
$enable-light-style: {% if (not settingsPanel and style == 'light') or (settingsPanel and styles.indexOf('light') !== -1) %}true{% else %}false{% endif %};
$enable-material-style: {% if (not settingsPanel and style == 'material') or (settingsPanel and styles.indexOf('material') !== -1) %}true{% else %}false{% endif %};
$enable-dark-style: {% if (not settingsPanel and style == 'dark') or (settingsPanel and styles.indexOf('dark') !== -1) %}true{% else %}false{% endif %};

@mixin feature-ltr($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      html:not([dir=rtl]) & { @content; }
    } @else {
      html:not([dir=rtl]) { @content; }
    }
  } @else {
    @content;
  }
}

@mixin feature-ltr-style() {
  @if $enable-rtl-support {
    &:not([dir=rtl]) { @content; }
  } @else {
    @content;
  }
}

@mixin feature-rtl($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      [dir=rtl] & { @content; }
    } @else {
      [dir=rtl] { @content; }
    }
  }
}

@mixin feature-rtl-style() {
  @if $enable-rtl-support {
    &[dir=rtl] { @content; }
  }
}