Add bootstrap-sass to your Gemfile and point to the repo at git
gem 'bootstrap-sass', git: '[email protected]:VerveWireless/bootstrap-sass.git'
Add the following runtime dependency
gem 'select2-rails', '~> 3.5.9.3'
gem 'jquery-ui-sass-rails', '~> 4.0.3.0'
Run bundle install
Add the following to your application.scss
```scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
```
Add the following to your application.js
//= require bootstrap-sprockets
//= require verve_all
Or if you would like to use coffeescript syntax
#= require bootstrap-sprockets
#= require verve_all
Restart your rails server...
Update your application.html.erb to read the look like the following. This will give you a basic setup with a header, sidebar, and footer components.
<!DOCTYPE html>
<html>
<head>
<title>StyleGuide</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="wrap">
<%= render 'layouts/navigation' %>
<div class="container-fluid">
<div class="row">
<%= render 'layouts/sidebar' %>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 col-xs-offset-2 main">
<%= yield %>
</div>
</div>
</div>
</div>
<%= render 'layouts/footer' %>
</body>
</html>
Download and run the sample rails app here for a full list of components and sample page views. Bellow are a few of the common components that you may use in your application.
By default the Verve namespace has been created and is available to you for use with your js.
Verve.FormValidation
Add data-required="true" to your input field and label. Form validator will apply simple validation to check if the field is empty before your form is submitted.
Add the following to your javascript file
# coffeescript
$ document
.ready ->
Verve.FormsValidation?.simpleValidation()
// javascript
$(document).ready(function(){
if( Verve.FormsValidation !== null ){
Verve.FormsValidation.simpleValidation()
}
});
Add the following html to your page
<from class="form-horizontal">
<div class="form-group">
<label for="inputOrderName" class="col-lg-2 control-label" data-required="true">Order Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputOrderName" name="inputOrderName" data-required="true">
</div>
</div>
</form>
The sidebar helper provides a simple method to use for building out a left navigation. To use this method you will need to modify the application.erb code from above as follows.
<div class="wrap">
[remove] <%= render 'layouts/navigation' %> [/remove]
[add]
<div class="col-sm-3 col-md-2 accordion sidebar" id="acd1">
<div class="accordion-group">
<div class="accordion-heading" id="menu-controller">
<ul class="nav nav-stacked nav-sidebar">
<li>
<a class="accordion-toggle collapsed"><i class="glyphicon glyphicon-plus"></i></a>
</li>
</ul>
</div>
</div>
<%= SidebarHelper.render_menu self, menu_items %>
</div>
[/add]
<div class="container-fluid">
<div class="row">
<%= render 'layouts/sidebar' %>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 col-xs-offset-2 main">
<%= yield %>
</div>
</div>
</div>
</div>
render_menu( Object, Array)
(type) Object: ActionView object is used for template helpers to write html tags
(type) Array: An array of objects to use to generate links and sub-menu items
\javascript
Example: [
{
icon: 'dashboard',
name: 'Reports',
url: '#',
sub_menu: [
{
name: 'VLM Programming Direct',
url: '#'
},
{
name: 'Geo-temporal',
url: '#'
}
]
},
{
icon: 'reports',
name: 'API',
url: '#',
active: true,
sub_menu: [
{
name: 'VLM Programming Direct',
url: '#',
active: true
},
{
name: 'Geo-temporal',
url: '#'
}
]
}
]
| name | type | description | required | default value |
|---|---|---|---|---|
| icon | string | Name of icon will be appended to the glyphicon class name. Example: icon: 'reports' Response with: glyphicon-reports CSS styleing is handled through bootstrap. |
y | |
| name | string | Name to be used in the link. | y | |
| active | boolean | Ads an active class for the active url. This logic is not maintained within the gem, but can be set within the application. | n | false |
| url | string | Url for the link. | n | # |
| sub_menu | array | An array of link objects. Sub-menu links do not support icon usage. | n |
Sample navigation.yml format. This is a template that can be used for setting up your yml file. Your application logic will have to set the default active states so that it is dynamic per page load.
---
# Menu Items
- icon: 'dashboard'
name: 'Reports'
url: '#'
sub_menu:
- name: 'VLM Programming Direct'
url: '#'
- name: 'Geo-temporal'
url: '#'
- icon: 'reports'
name: 'API'
url: '#'
active: true
sub_menu:
- name: 'VLM Programming Direct'
url: '#'
active: true
- name: 'Geo-temporal'
url: '#'
jQuery datepicker is available for use within your project. We've already included formatting to standardize the look across applications, however you can still customize the datepicker widgets within in your application if needed.
Add the following to your application.scss
@import "jquery.ui.core";
@import "jquery.ui.datepicker";
To use the standard date picker add the picker class to any input field
<input type="text" class="picker" id="" />
Sample code for use in your forms.
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control picker" id="">
</div>
</div>
</form>
To use the date range picker add the range-picker class to any input field. Date range usage is provided through datePick.js which adds additional functionality to jQuery's DatePicker.
View the datePick.js documentation here
<input type="text" class="range-picker" id="" />
Select2 adds search functionality as well as additional styling for select and multi select drop downs.
$('#your-element').select2()
Additional options and api documentation for usage can be found at https://select2.github.io/
This gem was forked from bootstrap-sass. View there documentation for more information on usage.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent