Ive looked at the examples for Bourbon Neat responsive grid. To my knowledge I'm using it correctly.
Issues
<div> tags all take up their own line as if I had made them all
span-columns(12)My guess is that I am not nesting the elements correctly or I should be using tags such as <section or <aside>
The following is what I have so far in order to learn this responsive framework ...
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>LawRails</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render "layouts/header" %>
<%= yield %>
</body>
</html>
header.html.erb
<div class="contain-header">
<div class = "last-names">Attorney & Attorney</div>
<div class = "contain-eight">
<div class = "street-address">250 W. Main Street Suite 9999</div>
<div class = "city-state-zip">City, US 30399</div>
</div>
</div>
header.css.scss
.contain-header {
@include outer-container;
.last-names {
@include span-columns(4);
}
.contain-eight {
@include span-columns(8);
.street-address {
@include span-columns(4 of 8);
}
.city-state-zip {
@include span-columns(4 of 8);
}
}
}
application.css.scss
@import "bourbon";
@import "neat";
@import "welcome";
@import "layout";
As previously mentioned. The divs all take up their own full line. I would like to learn how to make this all one line with separation as the css suggests.
It appears that your code should work. See gist here: http://sassmeister.com/gist/d8f0c7ffa3ff16e93b8a
My guess is that you are not properly importing neat and/or bourbon.
In your application.css.scss make sure that you @import "header"