M.T Davis M.T Davis - 6 months ago 28
CSS Question

Pure css not loading in Ruby on Rails correctly

I'm using pure.css to load "_form.html.erb" in my rails app.

However the css isn't styling the rails portion but styles the regular HTML that I have below it. NOTE: I added the HTML below to ensure the the css was working correctly.

Here is an example of the _forms.html.erb file

<%=f orm_for(@client) do |f| %>
<% if @client.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@client.errors.count, "error") %> prohibited this client from being saved:</h2>

<ul>
<% @client.errors.full_messages.each do |message| %>
<li>
<%=m essage %>
</li>
<% end %>
</ul>
</div>
<% end %>
<!-- beginning of rails code -->
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<%=f .label:firstName %>
<br>
<%=f .text_field :firstName %>
</div>
</div>

</fieldset>
</form>

<div class="actions">
<%=f .submit class: "btn btn-primary" %>
</div>
<% end %>
<!-- end of rails code -->
<!-- Begining of HTML code -->
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>

<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<label for="first-name">First Name</label>
<input id="first-name" class="pure-u-23-24" type="text">
</div>

<div class="pure-u-1 pure-u-md-1-3">
<label for="last-name">Last Name</label>
<input id="last-name" class="pure-u-23-24" type="text">
</div>

<div class="pure-u-1 pure-u-md-1-3">
<label for="email">E-Mail</label>
<input id="email" class="pure-u-23-24" type="email" required>
</div>

<div class="pure-u-1 pure-u-md-1-3">
<label for="city">City</label>
<input id="city" class="pure-u-23-24" type="text">
</div>

<div class="pure-u-1 pure-u-md-1-3">
<label for="state">State</label>
<select id="state" class="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>

<label for="terms" class="pure-checkbox">
<input id="terms" type="checkbox"> I've read the terms and conditions
</label>

<button type="submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>


Here is the application.scss file

*= require_tree .
*= require_self
*= require datatables.net-bs/css/dataTables.bootstrap.min
*= require css/pure-min.css
*= require css/grids-responsive-min.css
*/
@import "bootstrap-sprockets";
@import "bootstrap";
@import "AdminLTE/AdminLTE";
@import "AdminLTE/skins/skin-blue";


I have "grids-responsive-min.css" and "pure-min.css" that are required in assets/components/css

I'm thinking it could be a rails syntax issue but I'm not sure. I'm sure it's something simple I'm missing.

Answer

You can apply CSS classes to the form_for method with:

<%= form_for(@client, html: { class: 'pure-form pure-form-stacked' }) do |f| %>