CSS Regression, Git bisect?

Design
1

As a result of a recent commit (though I’m not sure which one) I’ve botched the CSS/view partial for my site search box and it’s now breaking my layout in major and minor ways.

I’m looking for help either diagnosing the problem and engineering a fix, or digging into my git history and figuring out what I broke and where.

The minor issue is with the search box on the homepage. The production version shows a rounded rectangle of a certain width, while the staging version is missing the right-hand rounded corners and is 20px narrower.

The major issue is the upper-right-hand-corner search box on each non-home page. It too has the truncated search box, but it also completely breaks out of the nav bar it’s supposed to be contained by and messes up the text in the div below the nav bar.

Production site homepage

Staging site homepage with truncated search box

Production site login screen with search box in upper right hand corner

Staging site login screen with broken search box

Any assistance would be greatly appreciated.

Thanks!

Dean Richardson
Genlighten.com

2

@hikari17 The homepage is because you added box-sizing: border-box; which calculates the padding in the width of the element. To fix this simply increase the width of the element.

The search in the right hand corner in the nav is being affected by the box-sizing too. If you float the <ul> and <form> to the left and remove the padding: 0 0 0 597px; on the <form> too

3

Wow, Kyle, you nailed it. I tried these changes out in Firefox (editing the CSS in Firebug) and the broken layout issues went away, just as you predicted.

My problem now is I don’t seem to be able to get some CSS changes I’ve made locally to actually get deployed to my staging site. You’ll notice that the homepage search box size/rounded corners at staging.genlighten.com are now as desired. But the various changes to the non-homepage search form (ul float:left, form float:left, deleting the 597px padding) don’t seem to have propagated there. I suspect it’s something I’m doing wrong with compiling/importing my scss files. Here’s a possible symptom of that:

My application.css.css file contains an error message indicating that it failed to @import bourbon successfully:

/*
Syntax error: File to import not found or unreadable: bourbon.
Load paths:
/Users/dean/genlighten
/Users/dean/genlighten/app/assets/stylesheets
on line 1 of app/assets/stylesheets/application.css.scss

1: @import “bourbon”;
2: @import “neat”;
3: @import “base_variables”;
4: @import “grid-settings”;
5: @import “genlighten_new”;
6: @import “newSol”;

Backtrace:
app/assets/stylesheets/application.css.scss:1
/Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/…/lib/sass/…/sass/tree/import_node.rb:67:in import' /Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/../lib/sass/../sass/tree/import_node.rb:28:in imported_file’
/Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/…/lib/sass/…/sass/tree/import_node.rb:37:in css_import?' /Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/../lib/sass/../sass/tree/visitors/perform.rb:217:in visit_import’
/Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/…/lib/sass/…/sass/tree/visitors/base.rb:37:in send' /Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/../lib/sass/../sass/tree/visitors/base.rb:37:in visit’
/Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/…/lib/sass/…/sass/tree/visitors/perform.rb:100:in visit' /Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/../lib/sass/../sass/tree/visitors/base.rb:53:in visit_children’
/Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/…/lib/sass/…/sass/tree/visitors/base.rb:53:in map' /Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/../lib/sass/../sass/tree/visitors/base.rb:53:in visit_children’
/Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/…/lib/sass/…/sass/tree/visitors/perform.rb:109:in visit_children' /Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/../lib/sass/../sass/tree/visitors/perform.rb:121:in with_environment’
/Library/Ruby/Gems/1.8/gems/sass-3.2.10/bin/…/lib/sass/…/sass/tree/visitors/perform.rb:108:in `visit_children’
/Library/Ruby/Gems/

I have the bourbon gem installed in my Gemfile:

gem ‘bourbon’
gem ‘neat’

but they’re not in the assets group.

However, I don’t seem to have the bourbon/neat subdirectories anywhere in the assets subdirectory. They were there before when I was using them under Rails 2.3.x, but when I created the assets directory as I upgraded to Rails 3.1, I didn’t transfer them over. My understanding was that the gems took care of that for me. Not so?

Any suggestions would be greatly appreciated…

Thanks!

Dean Richardson
Genlighten.com

4

@hikari17 Sorry Dean somehow I didn’t get a notification for your reply here.

The gems should take care of importing the right files. This might be sill but did you run bundle and which version of bourbon do you have installed?

5

Kyle:

My Gemfile has just:

gem 'bourbon'

No version number is specified. Entering

$ gem list bourbon

on my development box yields:

*** LOCAL GEMS ***

bourbon (3.0.0)

Running

$ bundle install

yields the usual list of gems with everything saying “Using” at the beginning instead of “Installing”.

Hope this helps… :slight_smile:

–Dean

6

@hikari17 it doesn’t really help.

When you were running it on 2.3 were you generating sass cache? I’m assuming that you deleted the sprocket directive too.

I’ve never seen this before so I’m just guessing at this point.

7

Kyle:

I did generate a sass-cache, yes. But I deleted it when I made the transition to 3.1.

Also, here’s my application.css.scss:

@import "bourbon";
@import "neat";
@import "base_variables";
@import "grid-settings";
@import "genlighten_new";
@import "newSol";
@import "landing_pages";

So the sprocket directives are gone, yes.

–Dean

8

Try following the steps here: GitHub - thoughtbot/bourbon: A Lightweight Sass Tool Set
But replace the word ‘mixin’ with ‘@import’.

Basically the idea is to disable Bourbon and regenerate the CSS so that the site renders without throwing errors (even if the styles are broken). Then enable Bourbon and refresh again.