rails-starter
directory structure
The starter project by default includes all third-party plugins (see config/initializers/assets.rb
file).
Optionally you can remove unwanted plugins to reduce output assets size and compile time:
dependencies
section in the package.json
file.vendor/assets/libs
directory.@import
s and @include
s in the vendor/assets/stylesheets/_theme/_libs.scss
file.For example, if you want to exclude plyr
plugin, you will need to:
plyr
dependency in the package.json
file.vendor/assets/libs/plyr
directory.@import "../../libs/plyr/mixins";
and @include plyr-theme($background, $color);
lines in the vendor/assets/stylesheets/_theme/_libs.scss
file.
cmd.exe
as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools
.cmd.exe
and go to the rails-starter
directory.bundle install
.yarn install
.bundle exec rails s
.sudo apt-get update && sudo apt-get upgrade
.sudo apt-get install curl
.sudo apt-get install zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev
.sudo apt-add-repository ppa:brightbox/ruby-ng; sudo apt-get update; sudo apt-get install ruby2.4 ruby2.4-dev
.sudo gem install bundler
.rails-starter
directory.bundle install
.yarn install
.bundle exec rails s
.ruby -v
command in the terminal. Update ruby if required.sudo gem install bundler
.rails-starter
directory.bundle install
.yarn install
.bundle exec rails s
.Main layout
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en" class="default-style">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<title><%= @title ? @title + " - " : "" %>Rails Starter</title>
<!-- Main font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
<!-- Icons. Uncomment required icon fonts -->
<!-- <%= stylesheet_link_tag 'fontawesome.css', media: 'all', 'data-turbolinks-track': 'reload' %> -->
<%= stylesheet_link_tag 'ionicons.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- <%= stylesheet_link_tag 'linearicons.css', media: 'all', 'data-turbolinks-track': 'reload' %> -->
<!-- <%= stylesheet_link_tag 'open-iconic.css', media: 'all', 'data-turbolinks-track': 'reload' %> -->
<!-- <%= stylesheet_link_tag 'pe-icon-7-stroke.css', media: 'all', 'data-turbolinks-track': 'reload' %> -->
<!-- Core stylesheets -->
<%= stylesheet_link_tag 'bootstrap.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'appwork.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'theme-corporate.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'colors.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'uikit.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- Layout helpers -->
<%= javascript_include_tag 'layout-helpers.js', 'data-turbolinks-track': 'reload' %>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Libs -->
<!-- `perfect-scrollbar` library required by SideNav plugin -->
<%= stylesheet_link_tag 'perfect-scrollbar/perfect-scrollbar.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'perfect-scrollbar/perfect-scrollbar.js', 'data-turbolinks-track': 'reload' %>
<!-- Core scripts -->
<%= javascript_include_tag 'popper/popper.js', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'bootstrap.js', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'sidenav.js', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= yield :head %>
</head>
<body>
<%= content_for?(:content) ? yield(:content) : yield %>
</body>
</html>
<!DOCTYPE html>
<html lang="en" class="default-style">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="turbolinks-cache-control" content="no-preview">
<title><%= @title ? @title + " - " : "" %>Rails Starter</title>
<!-- Main font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
<!-- Icons. Uncomment required icon fonts -->
<!-- <%= stylesheet_link_tag 'fontawesome.css', media: 'all', 'data-turbolinks-track': 'reload' %> -->
<%= stylesheet_link_tag 'ionicons.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- <%= stylesheet_link_tag 'linearicons.css', media: 'all', 'data-turbolinks-track': 'reload' %> -->
<!-- <%= stylesheet_link_tag 'open-iconic.css', media: 'all', 'data-turbolinks-track': 'reload' %> -->
<!-- <%= stylesheet_link_tag 'pe-icon-7-stroke.css', media: 'all', 'data-turbolinks-track': 'reload' %> -->
<!-- Core stylesheets -->
<%= stylesheet_link_tag 'bootstrap.css', media: 'all', class: 'theme-settings-bootstrap-css' %>
<%= stylesheet_link_tag 'appwork.css', media: 'all', class: 'theme-settings-appwork-css' %>
<%= stylesheet_link_tag 'theme-corporate.css', media: 'all', class: 'theme-settings-theme-css' %>
<%= stylesheet_link_tag 'colors.css', media: 'all', class: 'theme-settings-colors-css' %>
<%= stylesheet_link_tag 'uikit.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- Layout helpers -->
<%= javascript_include_tag 'layout-helpers.js', 'data-turbolinks-track': 'reload' %>
<!-- Theme settings -->
<%= javascript_include_tag 'theme-settings.js', 'data-turbolinks-track': 'reload' %>
<script>
// Use settings panel generator to configure the plugin
window.themeSettings = new ThemeSettings({
cssPath: '',
themesPath: '',
pathResolver: function(path) {
var resolvedPaths = {
// Core stylesheets
<%- ['bootstrap', 'appwork', 'colors'].each do |name| %>
'<%= name %>.css': '<%= asset_path "#{name}.css" %>',
'<%= name %>-material.css': '<%= asset_path "#{name}-material.css" %>',
<% end %>
// UI Kit
'uikit.css': '<%= asset_path "uikit.css" %>',
// Themes
<%- ['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'].each do |name| %>
'theme-<%= name %>.css': '<%= asset_path "theme-#{name}.css" %>',
'theme-<%= name %>-material.css': '<%= asset_path "theme-#{name}-material.css" %>',
<% end %>
};
return resolvedPaths[path] || path;
}
});
</script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Libs -->
<!-- `perfect-scrollbar` library required by SideNav plugin -->
<%= stylesheet_link_tag 'perfect-scrollbar/perfect-scrollbar.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'perfect-scrollbar/perfect-scrollbar.js', 'data-turbolinks-track': 'reload' %>
<!-- Core scripts -->
<%= javascript_include_tag 'popper/popper.js', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'bootstrap.js', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'sidenav.js', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= yield :head %>
</head>
<body>
<%= content_for?(:content) ? yield(:content) : yield %>
</body>
</html>
There are several ways you can set the layout:
layout
declaration in the ApplicationController
.layout
declaration in the SomeController
.layout
option.
You can find navbar, sidenav and footer templates in the app/views/layouts/partials
directory.
app/controllers/some_controller.rb
class SomeController < ApplicationController
layout 'main/layout-1'
def index
render layout: 'main/layout-1'
end
end
app/controllers/some_controller.rb
class SomeController < ApplicationController
layout 'main/layout-1-flex'
def index
render layout: 'main/layout-1-flex'
end
end
app/controllers/some_controller.rb
class SomeController < ApplicationController
layout 'main/layout-2'
def index
render layout: 'main/layout-2'
end
end
app/controllers/some_controller.rb
class SomeController < ApplicationController
layout 'main/layout-2-flex'
def index
render layout: 'main/layout-2-flex'
end
end
app/controllers/some_controller.rb
class SomeController < ApplicationController
layout 'main/layout-blank'
def index
render layout: 'main/layout-blank'
end
end
To use settings panel, you need to add Appwork's stylesheets to the precompilation list (use the generator to see the example):
config/initializers/assets.rb
...
# Precompile core stylesheets
Rails.application.config.assets.precompile += [
# Core stylesheets
'stylesheets/bootstrap.css',
'stylesheets/bootstrap-material.css',
'stylesheets/appwork.css',
'stylesheets/appwork-material.css',
'stylesheets/colors.css',
'stylesheets/colors-material.css',
'stylesheets/uikit.css',
# Themes
'stylesheets/theme-air.css',
'stylesheets/theme-air-material.css',
...
]
...
To enable a theme you need to:
Add theme file to the precompilation list in the config/initializers/assets.rb
.
config/initializers/assets.rb
...
# Precompile core stylesheets
Rails.application.config.assets.precompile += [
...
"stylesheets/theme-air.css",
...
]
...
Include theme stylesheet.
app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'theme-air.css', media: 'all', 'data-turbolinks-track': 'reload' %>
To enable a theme just include the required theme stylesheet.
app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'theme-air.css', media: 'all', class: 'theme-settings-theme-css' %>
To enable material styling you need to:
Set material-style
class on the <html>
element instead of default-style
.
app/views/layouts/application.html.erb
<html class="material-style">
Add -material
suffix to bootstrap.css
, appwork.css
, theme-*.css
and colors.css
paths in the config/initializers/assets.rb
.
config/initializers/assets.rb
...
# Precompile core stylesheets
Rails.application.config.assets.precompile += [
"stylesheets/bootstrap-material.css",
"stylesheets/appwork-material.css",
"stylesheets/theme-corporate-material.css",
"stylesheets/colors-material.css",
...
]
...
Add -material
suffix to bootstrap.css
, appwork.css
, theme-*.css
and colors.css
stylesheets.
app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'bootstrap-material.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'appwork-material.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'theme-corporate-material.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'colors-material.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'bootstrap-material.css', media: 'all', class: 'theme-settings-bootstrap-css' %>
<%= stylesheet_link_tag 'appwork-material.css', media: 'all', class: 'theme-settings-appwork-css' %>
<%= stylesheet_link_tag 'theme-corporate-material.css', media: 'all', class: 'theme-settings-theme-css' %>
<%= stylesheet_link_tag 'colors-material.css', media: 'all', class: 'theme-settings-colors-css' %>
Optionally you can enable material ripple. Just append material-ripple.js
script to the <head>
section and call attachMaterialRippleOnLoad()
function.
app/views/layouts/application.html.erb
<%= javascript_include_tag 'material-ripple.js', 'data-turbolinks-track': 'reload' %>
<script>
window.attachMaterialRippleOnLoad();
</script>
Optionally you can enable material ripple. Just append material-ripple.js
script to the <head>
section.
app/views/layouts/application.html.erb
<%= javascript_include_tag 'material-ripple.js', 'data-turbolinks-track': 'reload' %>
To enable RTL direction support:
Open config/initializers/assets.rb
file
and edit paths to load Appwork's stylesheets from the stylesheets/rtl/
directory instead of stylesheets/
.
config/initializers/assets.rb
...
# Precompile core stylesheets
Rails.application.config.assets.precompile += [
"stylesheets/rtl/bootstrap.css",
"stylesheets/rtl/appwork.css",
"stylesheets/rtl/theme-corporate.css",
"stylesheets/rtl/colors.css",
"stylesheets/rtl/uikit.css"
]
...
...
# Precompile core stylesheets
Rails.application.config.assets.precompile += [
# Core stylesheets
'stylesheets/rtl/bootstrap.css',
'stylesheets/rtl/bootstrap-material.css',
'stylesheets/rtl/appwork.css',
'stylesheets/rtl/appwork-material.css',
...
]
...
Import Appwork's stylesheets from the rtl/
path.
app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'rtl/bootstrap.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'rtl/appwork.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'rtl/theme-corporate.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'rtl/colors.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'rtl/uikit.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'rtl/bootstrap.css', media: 'all', class: 'theme-settings-bootstrap-css' %>
<%= stylesheet_link_tag 'rtl/appwork.css', media: 'all', class: 'theme-settings-appwork-css' %>
<%= stylesheet_link_tag 'rtl/theme-corporate.css', media: 'all', class: 'theme-settings-theme-css' %>
<%= stylesheet_link_tag 'rtl/colors.css', media: 'all', class: 'theme-settings-colors-css' %>
<%= stylesheet_link_tag 'rtl/uikit.css', media: 'all', 'data-turbolinks-track': 'reload' %>
To enable RTL direction, add dir="rtl"
attribute to the <html>
element.
app/views/layouts/application.html.erb
<html dir="rtl">
You can configure the initial layout by setting control classes to the <html>
element.
app/views/layouts/application.html.erb
<html class="layout-fixed layout-collapsed">
Control class | Description |
---|---|
.layout-reversed |
Reverse layout direction without markup change. |
.layout-expanded |
Expand layout sidenav on small screens (< 992px). |
.layout-collapsed |
Collapse layout sidenav on large screens (>= 992px). |
.layout-offcanvas |
Make layout sidenav offcanvas. |
.layout-fixed |
Set layout position to fixed. |
.layout-fixed-offcanvas |
Set layout position to fixed with offcanvas sidenav. |
.layout-navbar-fixed |
Set layout navbar position to fixed. |
.layout-footer-fixed |
Set layout footer position to fixed. |
Optionally you can enable PACE.js progress bar:
Append pace.js
script to the <head>
section.
app/views/layouts/application.html.erb
<%= javascript_include_tag 'pace.js', 'data-turbolinks-track': 'reload' %>
Append .page-loader
element to the <body>
.
app/views/layouts/application.html.erb
<div class="page-loader"><div class="bg-primary"></div></div>
Use starter template generator to simplify the initial setup. Just replace a content of appropriate files with the generated code within the rails-starter
directory.