The next step is... Bootstrap by Omar Qunsul

Bootstrap .. is the next step

Omar Qunsulhoneytracks.com

So you built a website .... ?

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

But what about CSS ?

BootstrapCSS 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>


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.comfor 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>


Themes

</presentation>

Thanx !

@OmarQunsul

The next step is... Bootstrap by Omar Qunsul

Technology

Transcript of The next step is... Bootstrap by Omar Qunsul