Giter Club home page Giter Club logo

biola-frontend-toolkit's Introduction

Biola Frontend Toolkit

This toolkit includes a shared header and some other view helpers designed for our Biola web applications.

Installation

Add this line to your application's Gemfile:

gem 'biola_frontend_toolkit'

And then execute:

$ bundle

Or install it yourself as:

$ gem install biola_frontend_toolkit

Dependencies

  • bootstrap-sass
  • font-awesome-rails
  • slim

Usage

Rails > 3.1

Your layout file should look something like this

doctype html
html lang="en-us"
  head
    / frontend_toolkit/head includes default html head tags and csrf_meta_tags
    = render 'frontend_toolkit/head', title: 'Direcotry'
    = stylesheet_link_tag "application", media: "all"
  body class="#{controller_name} #{action_name}"
    = render 'frontend_toolkit/header'
    = yield
    = javascript_include_tag "application"

Include the following in application.css.scss. This will add require statements for bootstrap and font-awesome automatically. It also includes some biola variables and mixins.

@import "biola-frontend-toolkit";

Include the following in application.js. This includes jquery, jquery_ujs, and bootstrap automatically.

//= require biola-frontend-toolkit

Other requirements

  • current_user - When a user is logged in
  • logout_path - Should return a link to the logout path
  • /whateverpath?login=true - Should be caught by ApplicationController and redirect to login page if not already logged in.

Configuration

Create a new file called /config/initializers/biola_frontend_toolkit.rb

BiolaFrontendToolkit.configure do |config|
  config.app_name = Settings.app.name
  config.app_version = Version.current  # optional
  config.relative_root = Settings.app.relative_url_root
  config.release_phase = Settings.release.phase

  # App Links
  config.app_links = [
    {title: 'Gmail', url: 'http://mail.biola.edu', icon: 'envelope-square'},
    {title: 'Forms', url: 'http://forms.biola.edu', icon: 'check-square-o'},
  ]

  # Profile Links
  config.profile_links = [
    {title: 'My Account', url: [:my_account, :user], icon: 'user'},
  ]

  # Google Analytics   ## Optional ##
  config.ga_account = 'UA-XXXXXXXX-XX'
  config.ga_domain = 'biola.edu'
  config.ga_enabled = true   # defaults to false
end

View Partials

frontend_toolkit/head

Use this partial to include default html head tags and csrf_meta_tags

frontend_toolkit/header

Use frontend_toolkit/header for content publishers and other employee web apps.

frontend_toolkit/prerelease_banner

Use frontend_toolkit/prerelease_banner when your app is in the alpha or beta phases. Make sure BiolaFrontendToolkit.config.release_phase is set to alpha or beta.

= render 'frontend_toolkit/prerelease_banner', feedback_form_url: Settings.feedback.form_url

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.