Background

This page is for picking up the most fundamentals for building front end for Student Organizer.

Get Started

Student Organizer is built on top of Rails 4 with bootstrap.

https://getbootstrap.com/

With bootswatch theme Cerulean.

https://bootswatch.com/cerulean/

Frontend Gem file

#bootstrap series
gem 'bootstrap-sass', '~> 3.3.5'
# bootswatch theme for bootstrap
gem 'bootswatch-rails'
#date picker
gem 'bootstrap-datepicker-rails'
#font awesome icons
gem "font-awesome-rails"

Date picker plugin

We are now using bootstrap-datepicker package for the calendar.

But we may decide to develop a calendar that meets only our use.

Fontawesome icon example

<i class="fa fa-cog"></i>

This code snippet adds a settings like cog icon.

For more icon names. Look it up at http://fortawesome.github.io/Font-Awesome/icons/

Import to Rails

app/assets/javascripts/application.js

//= require bootstrap-datepicker

app/assets/stylesheets/application.css.scss

//Import bootstrap-sprockets
@import "bootstrap-sprockets";

// Import cerulean variables
@import "bootswatch/cerulean/variables";

// Then bootstrap itself
@import "bootstrap";

// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";

// First set or import your overrides
// $textColor: #000;

// Then load variables
// @import "bootswatch/journal/variables";

// font awesome
@import "font-awesome";

//datepicker and customized css for datepicker
@import "bootstrap-datepicker3";

@import "datepicker";