Bootstrap and Design Hacks by Omar Qunsul

Bootstrap .. is the next step Omar Qunsul honeytracks.com

So you built a website .... ?

RailsGirls Munich 2012 “So what is the next step ?”

But what about CSS ?

Bootstrap CSS and JS Framework

<head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "data- turbolinks-track" =>
true %> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap. min.css" rel="stylesheet"> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> </head> app/views/layouts/application.html.erb First include Bootstrap 3 in your application

<body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header">
<a class="navbar-brand" href="/">Project</a> </div> <div class="navbar-collapse collapse"> <a class="navbar-brand" href="/ideas">Ideas</a> </div> </div> </div> <div class="container"> <%= yield %> </div> app/views/layouts/application.html.erb Navigation

IS THAT NICE !?

<h1>Listing ideas</h1> <table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Description</th> <th>Picture</th>
app/views/ideas/index.html.erb Tables should be AWESOME !

But still this looks odd

<%= link_to 'New Idea', new_idea_path, :class => "btn btn-primary btn-lg"
%> app/views/ideas/index.html.erb Buttons should look like ........well buttons !

Cool ! But let’s click that button !

<%= form_for(@idea, :html => {:class =>"form-horizontal", :role =>"form"}) do |f|
%> app/views/ideas/_form.html.erb Forms !

<div class="field form-group"> <%= f.label :name, :class => "control-label col-sm-2"
%> <div class="col-sm-10"> <%= f.text_field :name , :class => "form-control", :placeholder => "Write the idea name" %> </div> </div> app/views/ideas/_form.html.erb Each form element

See getbootstrap.com for more details and info, about Boostrap 3.
There are many css components!

<head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "data- turbolinks-track" =>
true %> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap. min.css" rel="stylesheet"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2 /css/bootstrap-theme.min.css"> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> </head> app/views/layouts/application.html.erb Themes

</presentation> Thanx ! @OmarQunsul

Bootstrap and Design Hacks by Omar Qunsul

Bootstrap and Design Hacks by Omar Qunsul

Rails Girls Munich

More Decks by Rails Girls Munich

Other Decks in Technology

Featured

Transcript

Bootstrap .. is the next step Omar Qunsul honeytracks.com

So you built a website .... ?

RailsGirls Munich 2012 “So what is the next step ?”

But what about CSS ?

But what about CSS ?

But what about CSS ?

But what about CSS ?

Bootstrap CSS and JS Framework

<head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "data- turbolinks-track" =>

<body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header">

IS THAT NICE !?

<h1>Listing ideas</h1> <table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Description</th> <th>Picture</th>

But still this looks odd

<%= link_to 'New Idea', new_idea_path, :class => "btn btn-primary btn-lg"

Cool ! But let’s click that button !

<%= form_for(@idea, :html => {:class =>"form-horizontal", :role =>"form"}) do |f|

<div class="field form-group"> <%= f.label :name, :class => "control-label col-sm-2"

See getbootstrap.com for more details and info, about Boostrap 3.

<head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "data- turbolinks-track" =>

</presentation> Thanx ! @OmarQunsul