Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The next step is... Bootstrap by Omar Qunsul

818 views

Published on

The next step is... Bootstrap

Published in: Technology
  • Be the first to comment

  • Be the first to like this

The next step is... Bootstrap by Omar Qunsul

  1. 1. Bootstrap .. is the next step Omar Qunsul honeytracks.com
  2. 2. So you built a website .... ?
  3. 3. RailsGirls Munich 2012 “So what is the next step ?”
  4. 4. But what about CSS ?
  5. 5. But what about CSS ?
  6. 6. But what about CSS ?
  7. 7. But what about CSS ?
  8. 8. Bootstrap CSS and JS Framework
  9. 9. First include Bootstrap 3 in your application app/views/layouts/application.html.erb <head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "dataturbolinks-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>
  10. 10. Navigation app/views/layouts/application.html.erb <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>
  11. 11. IS THAT NICE !?
  12. 12. Tables should be AWESOME ! app/views/ideas/index.html.erb <h1>Listing ideas</h1> <table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Description</th> <th>Picture</th>
  13. 13. But still this looks odd
  14. 14. Buttons should look like ........well buttons ! app/views/ideas/index.html.erb <%= link_to 'New Idea', new_idea_path, :class => "btn btn-primary btn-lg" %>
  15. 15. Cool ! But let’s click that button !
  16. 16. Forms ! app/views/ideas/_form.html.erb <%= form_for(@idea, :html => {:class =>"form-horizontal", :role =>"form"}) do |f| %>
  17. 17. Each form element app/views/ideas/_form.html.erb <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>
  18. 18. See getbootstrap.com for more details and info, about Boostrap 3. There are many css components!
  19. 19. Themes app/views/layouts/application.html.erb <head> <title>Railsgirls</title> <%= stylesheet_link_tag "application", media: "all", "dataturbolinks-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>
  20. 20. </presentation> Thanx ! @OmarQunsul

×