Uikit
Installs a basic set of user interface templates for your Rails application.
Most of this code is from http://nobodysofnyc.com.
Installation
Add this line to your application's Gemfile:
group :development do
gem 'uikit'
end
And then execute:
$ bundle
Or install it yourself as:
$ gem install uikit
Usage
After installing the gem you:
rails g uikit:install
This installs a basic layout with a footer and header. It might be completely wrong for you. You could use a more basic layout instead. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= yield :title %></title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= yield :stylesheets %>
<%= javascript_include_tag "application" %>
<meta charset="utf-8">
<%= csrf_meta_tags %>
</head>
<body class="<%= "#{current_controller}-#{current_action}" %> <%= content_for :classes %>">
<% flash.each do |type, msg| %>
<p class="flash <%= type %>"><%= msg %></p>
<% end %>
<div id="container">
<%= yield %>
</div>
</body>
<%= yield :javascripts %>
</html>
After that you will want to adjust your application.css:
/*
*= require_self
*= require './uikit.css'
*/
You do not want to use require_tree to import uikit.css. This will inject all
of the styles in path order. Instead, by leveraging the SCSS imports you can
summarize all of the default styles.
When creating a new controller, for instance PagesController, you'll want to
create a new stylesheet such as app/assets/stylesheets/pages.css.scss. Then add
this file to be compiled into your global stylesheet:
/*
*= require_self
*= require './uikit.css'
*= require './pages.css'
*/
Within your new stylesheet, you may want to refer to pre-defined style variables
(like colors and fonts). To ensure that the load order is preserved you can
use the @import method at the top of the file:
@import "uikit/fonts.scss";
/* Each page has the controller and action added as classes on the body element */
body.pages.home h1 {
font-family: $sans;
}
Within your pages you can set content for :classes and :title:
<% content_for :title do 'Exciting new feature' end %>
<% content_for :classes do 'marketing' end %>
This will set the <title> tag and add a "marketing" class to the <body> tag.
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request