Layout
The theme uses a main layout for the admin pages and another layout for "external" pages
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Bootstrap Admin App + Ruby on Rails">
<meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin">
<title>Angle - Bootstrap Admin Template</title>
<!-- =============== VENDOR STYLES ===============-->
<%= stylesheet_link_tag 'base' %>
<!-- =============== VIEW VENDOR STYLES ===============-->
<%= stylesheet_link_tag params[:controller] %>
<%= yield :vendor_css_area %>
<!-- =============== APP STYLES ===============-->
<%= stylesheet_link_tag 'application', media: 'all', id: "maincss" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="wrapper">
<!-- top navbar-->
<header class="topnavbar-wrapper">
<%= render partial: "layouts/partials/topnavbar" %>
</header>
<!-- sidebar-->
<aside class="aside-container">
<%= render partial: "layouts/partials/sidebar" %>
</aside>
<!-- offsidebar-->
<aside class="offsidebar d-none">
<%= render partial: "layouts/partials/offsidebar" %>
</aside>
<!-- Main section-->
<section class="section-container">
<!-- Page content-->
<div class="content-wrapper">
<%= yield %>
</div>
</section>
<!-- Page footer-->
<footer class="footer-container">
<%= render partial: "layouts/partials/footer" %>
</footer>
</div>
<!-- =============== VENDOR SCRIPTS ===============-->
<%= javascript_include_tag 'base' %>
<!-- =============== VIEW VENDOR SCRIPTS ===============-->
<%= javascript_include_tag params[:controller] %>
<%= yield :vendor_js_area %>
<!-- =============== APP SCRIPTS ===============-->
<%= javascript_include_tag 'application' %>
<%= yield :body_area %>
</body>
</html>
app/views/layouts/pages.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Bootstrap Admin App + Ruby on Rails">
<meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin">
<title>Angle - Bootstrap Admin Template</title>
<!-- =============== VENDOR STYLES ===============-->
<%= stylesheet_link_tag 'base' %>
<!-- =============== VIEW VENDOR STYLES ===============-->
<%= stylesheet_link_tag params[:controller] %>
<!-- =============== APP STYLES ===============-->
<%= stylesheet_link_tag 'application', media: 'all', id: "maincss" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="wrapper">
<%= yield %>
</div>
<div class="p-lg text-center">
<span>©</span>
<span>2016</span>
<span>-</span>
<span>Angle</span>
<br>
<span>Bootstrap Admin Template</span>
</div>
<!-- =============== VENDOR SCRIPTS ===============-->
<%= javascript_include_tag 'base' %>
<!-- =============== VIEW VENDOR SCRIPTS ===============-->
<%= javascript_include_tag params[:controller] %>
<!-- =============== APP SCRIPTS ===============-->
<%= javascript_include_tag 'application' %>
</body>
</html>
Stylesheets and Scripts
Here is how we manage assets per controller inclusion.
Following what is defined in the main layout file application.html.erb
This requires the file base.css.scss that contains vendor styles necessary accros all application
<%= stylesheet_link_tag 'base' %>
This requires the file [controller_name].css.scss that contains vendor styles for such controller
<%= stylesheet_link_tag params[:controller] %>
This requires the file application.css.scss that contains the application styles
<%= stylesheet_link_tag 'application', media: 'all', id: "maincss" %>
This requires the file base.js that contains vendor scripts necessary across the application
<%= javascript_include_tag 'base' %>
This requires the file [controller_name].js that contains vendor scripts for such controller
<%= javascript_include_tag params[:controller] %>
This requires the file application.js that contains the application scripts
<%= javascript_include_tag 'application' %>
SASS
This projects also implements a SASS version (scss) of the theme.
All files are located under the folder /app/assets/stylesheets/angle/
It will compile the app styles with Bootstrap integrated. Remember that the less you change bootstrap, the easier will be to update it later.
One line about coffee
We don't use coffee scripts but this application is ready to use so you can create .coffee assets and they will compiled automatically.
New vendor assets
To add new third party assets, you can install using npm and the reference in the assets folder
npm install something -S
- Flag "-S" is to save the dependency in package.json
Edit assets and add the paths of files you want to use
Note that you don't need to specify the node_modules folder
// app/assets/javascripts/controller_name.js
//= require something/some/file.js
// app/assets/stylesheets/controller_name.css.scss
//= something/some/file.css
The "controller_name" name used corresponds to the controller associated so the assets are loaded when the route associated with such controller is accessed.
Finally, add the new assets in the list of precompile assets in config/application.rb
config.assets.precompile += [
...
'controller.js',
'controller.css'
]
Modernizr
Modernizr build is generated after the command npm install ends. Specifically, using the postinstall script in package.json which at the same time executes the "modernizr" scripts responsible for generating the file modernizr.custom.js under folder vendor/assets/javascripts/modernizr.js
The configuration of the Modernizr build can be found in file modernizr-config.json
jQuery and Wrapper script
Starting from version 4.1, this template doesn't need jQuery as a mandatory dependency for core files, this means it is only required when using jQuery based plugins for some features included.
Seed project versions no more include jQuery by default..
The wrapper.js (~ 7k minified) is a new script introduced to emulate some specific jQuery functions used in the template. This made possible to significantly cut the refactoring changes in the code, keeping it readable in a jQuery way and avoiding extra bytes, mainly when loops are repeatedly used to work with multiple elements.
Important The Wrapper script is NOT a replacement for jQuery. All methods were designed for an adequate and specific use and they don't do a deep validation on the arguments provided. It's suggested NOT to use this library extensively. Instead, use pure JS or you might even need jQuery.