Using pure.css to load "_form.html.erb" in my rails app.
The css is styling the regular HTML below it, but not the rails portion. Important: The additional HTML was added to verify that the css is working correctly.
Below is an example from 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 -->
<!-- Beginning 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 content of 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";
Required "grids-responsive-min.css" and "pure-min.css" are located in the assets/components/css directory
Possibly a rails syntax issue, but not confirmed. It seems like something simple might be overlooked.