HTML/CSS to display flash messages "à la Rails" like alert, notice, warning, ...

https://github.com/zurb/foundation/blob/master/public/src/stylesheets/mobile.css

Basically, handheld is ignored or badly supported among mobile devices.

If you change .reveal-modal-bg to using opacity instead of rgba you will gain support for older, as well as all new browsers.

.reveal-modal-bg {
background: #000;
opacity: 0.8;
filter:alpha(opacity=80);
}

Php short tags should be replaced with classical ones for maximum portability / compatibility...

There is no styling for a type="submit" form button, be good to have some that matched the other form elements.

Best wishes
Lee

Some people might want to just cherry pick the grid, or typography from Foundation. So long as there are not inter dependencies, Type, Reset, and the Grid should be broken into separate stylesheets.

If people are really concerns about too many http requests, they can bundle the assets at deploy time.

I have problems to run the examples with Internet Explorer.
Firefox and Chrome works, but IE loads very slow and shows a weird page as result.

Screenshot: http://imageshack.us/photo/my-images/72/foundationieproblem.png/
OS: Win7Pro 64bit
IE: 9 (9.0.8112.16421)

Check out http://mrcitrin.com/.

On a desktop, the page renders like this: https://zurb.notableapp.com/posts/93861d5cdcc557cefd504e48487424e975ea1c58. Notice that all the article panels are displayed the same way.

Now check it out at mobile resolution: https://zurb.notableapp.com/posts/7f35024f35f90a3349770773f202b35344cd1b5a. When viewed on a mobile phone, the first row of panels is displayed differently than the second one.

It would be great to allow developer decide, which type of grid behavior will be used - responsive or static. Sometimes responsive grids adds extra headache, if we dont really care about "all possible resolutions" and just want to use 980px grid.

Maybe some kind of prefix or class-modifier can be used for this? Something like <div class="row static">?

A comment in the script section is showing in IE due to the syntax of the comment.

The Rails form helper date_select shows three lists for year, month and day. These typically appear inline. When using foundation, they each are pushed to a new line. Typical form code:

<%= f.date_select :birthdate, :start_year => "2000", :end_year => "2010" %>

Expected behavior: the three fields associated with the date_select form helper will appear inline.

The standard form date_select for a field called birthdate in the Person model generates this HTML (options removed):

<select id="person_birthdate_1i" name="person[birthdate(1i)]">
... options removed ...
</select>

<select id="person_birthdate_2i" name="person[birthdate(2i)]">
... options removed ...
</select>

<select id="person_birthdate_3i" name="person[birthdate(3i)]">
... options removed ...
</select>

Note, there also is a select_date helper. It generates the following HTML (options removed):

<select id="date_year" name="date[year]">
... options removed ...
</select>

<select id="date_month" name="date[month]">
... options removed ...
</select>

<select id="date_day" name="date[day]">
... options removed ...
</select>

This: ffc6e86#L106R8

Especially loading so many script files might not be good for performance.

A more complete and robust polyfill might be desired, e.g, https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

<a class="button">a Button</a>

and

<input class="button" type="button" value="a Button" />

should look the same

Hi folks,
Tabs stopped work for me after upgrading to 2.0.2
i had to rollback to 2.0.1 gem

Here: https://github.com/zurb/foundation/blob/master/public/src/stylesheets/globals.css#L233

Rationale: http://nicolasgallagher.com/micro-clearfix-hack/

As recommended by bradbirdsall, could be a slimmer plugin with better interaction.
https://github.com/bradbirdsall/Swipe

Minor issue - I noticed that list in the block are inheriting it's parent features, was this intentional or is it a bug???

<ul class="block-grid mobile four-up">
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </li>
</ul>```

Based on commit comment from JakeWharton:
bc4b589#commitcomment-667353

I'm reading on http://foundation.zurb.com/docs/reveal.php

"

• Go to the includes/_js.php file and include the Reveal JS (jQuery also need to be included if it's not already)
• Do the same for includes/_css.php and include the Reveal CSS
  "

But I can't find any of these files, and I truly hope I don't have to use PHP in my Django-project ;-)

Best regards
Peppe

PX should be before REM https://github.com/zurb/foundation/blob/master/public/src/stylesheets/globals.css#L95
a duplicate selector "blockquote cite a:visited" https://github.com/zurb/foundation/blob/master/public/src/stylesheets/globals.css#L114

Grid fails in medium screen width causing the content to drop down below the visible area in the webbrowser.

Must have lost these in the update. Adding this issue so I can fix it this evening.

This line:

https://github.com/zurb/foundation/blob/master/public/src/includes/_doc_head.php#L12

1. Ideally this should be addressed on the server. This is what we recommend on H5BP as well. Using it with meta keyword causes too many inconsistencies to handle. http://h5bp.com/b/378
2. I have no idea why anyone would want IE 8 to "render in IE7". What problem does that solve?

We've received a number of questions and requests regarding starter themes for Wordpress built on Foundation. Currently the best example we've received is available here: https://github.com/drewsymo/Foundation

Rotating mobile Safari to landscape causes the page to scale beyond view of the viewport.

When in portrait mode, the tabs have not much space, especially when 3 or more, so they collapse into the second line, however the line height is much smaller then the size of the nice tab flap, creating a weird overlapping effect of the flaps. Possible solutions: correct multiline tab flaps, or switching to tab list when not enough width to accommodate them.

I am working on a WordPress framework using Foundation (not the one from Drew), one problem that I noticed is the images won't auto adjust according to the aspect ratio. The scale works fine for images without height and width attributes, but for some WordPress users who have used WP for a long time, those attributes do exists. So I recommend add the auto adjust image height to the CSS of Foundation like below:

img { height: auto; }

This works fine with all images with or without height width attributes.

In a Rails form, using:

<%= f.submit "Sign up »", :class => "small radius button" %>

applies the zurb/foundation styling to the button, but doesn't remove the standard button border. I had to add

input[type="submit"] {
    border:none;
}

to get rid of the grey border around the button and have my button appear as your style guide suggests. Is this a misuse of your intended styling or a css bug?

p.s. I'm using the zurb-foundation gem

Why only resize the p tags with a media query and not the h tags? Should this be included?

Given most newer browsers already implement the stable prefixless versions http://caniuse.com/css-boxshadow & http://caniuse.com/css-borderradius

Is there any reason why the css is on single lines as opposed to multi-line? I know its personal preference but when using a VCS it makes it so much easier to see changes.

1c61574#stylesheets/forms.css

Shows the replacement of an entire line where really only a few things where edited.

I'm happy to make a pull and make the changes

I am using Foundation with Rails and displaying Google Maps using gmaps4rails. Normal map markers are unaffected, but when I create a dynamic marker and set it to draggable, Foundation scales the marker to approx. 50% of its width. The marker is created with

var marker = new google.maps.Marker({draggable: true});

Omitting the Foundation CSS from the asset manifest restores the marker look, as does setting draggable to false.

I tried to hunt down the CSS that would cause this, but failed. The marker element in the DOM is:

<img style="position: absolute; left: 0px; top: 0px; width: 20px; 
 height: 34px; -moz-user-select: none; border: medium none; 
 padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/markers/marker_sprite.png" 
 usemap="#gmimap1"> 

Any help would be much appreciated!

It can be simplied as follows: https://github.com/paulirish/html5-boilerplate/blob/master/index.html#L7

Line 229 of orbit.css refers to bullets.jpg from the public demo, instead of a relative path of the distribution package.

You should add a .gitignore to prevent OS (like .DS_Store) and Editor files being saved in the repo. The one found in the HTML5 Boilerplate repo is probably a good start.

A commented on Smashing Mag raised a good point: the mobile visibility classes could be a nightmare for screen readers. Going to investigate if there's a way we can alleviate that.

How about a responsive version of Orbit!!!

The Orbit timer appears over the Reveal modal if they overlap.

div.timer has z-index of 1001 while .reveal-modal z-index is 101

Your documentation page yesterday showed black buttons (now they appear blue) and described how to use the class .black to get them. The code, however, used the class .charcoal. Those buttons appear blue today and are using .charcoal in code; maybe you changed this back to .black?

Here's the relevant documentation page:
http://foundation.zurb.com/docs/buttons.php

We've received a couple requests for a responsive-friendly base element for dropdown nav. Tagging this here to investigate, or for another intrepid coder to take a stab at :)

There are numerous files in the repo that have the type attribute on these elements. They can safely be removed.

The repo has files that only seem to be used for the Foundation promo site (and appears to have your GA account numbers in the footer code?). This might make it harder for people to use the code in the repo as the basis of their own project...I'm certainly a little confused.

Ensuring that the master branch is only what people need to start their own projects could help.

Request from Chad, add the on-page nav from this post http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na to Foundation UI.

Foundation is distributing 1.5.1, while 1.6.4 is already available.

$ rails g foundation:install     
      insert  app/assets/javascripts/application.js
/usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/actions/inject_into_file.rb:99:in `binread': No such file or directory - /home/darion/projects/exptrack/app/assets/javascripts/application.js (Errno::ENOENT)
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/actions/inject_into_file.rb:99:in `replace!'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/actions/inject_into_file.rb:60:in `invoke!'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/actions.rb:95:in `action'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/actions/inject_into_file.rb:31:in `insert_into_file'
        from /usr/lib/ruby/gems/1.9.1/gems/zurb-foundation-2.0.1/lib/foundation/generators/install_generator.rb:9:in `add_assets'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/task.rb:22:in `run'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:118:in `invoke_task'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `block in invoke_all'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `each'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `map'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `invoke_all'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/group.rb:226:in `dispatch'
        from /usr/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/base.rb:389:in `start'
        from /usr/lib/ruby/gems/1.9.1/gems/railties-3.1.1/lib/rails/generators.rb:168:in `invoke'
        from /usr/lib/ruby/gems/1.9.1/gems/railties-3.1.1/lib/rails/commands/generate.rb:12:in `<top (required)>'
        from /usr/lib/ruby/gems/1.9.1/gems/activesupport-3.1.1/lib/active_support/dependencies.rb:240:in `require'
        from /usr/lib/ruby/gems/1.9.1/gems/activesupport-3.1.1/lib/active_support/dependencies.rb:240:in `block in require'
        from /usr/lib/ruby/gems/1.9.1/gems/activesupport-3.1.1/lib/active_support/dependencies.rb:223:in `block in load_dependency'
        from /usr/lib/ruby/gems/1.9.1/gems/activesupport-3.1.1/lib/active_support/dependencies.rb:640:in `new_constants_in'
        from /usr/lib/ruby/gems/1.9.1/gems/activesupport-3.1.1/lib/active_support/dependencies.rb:223:in `load_dependency'
        from /usr/lib/ruby/gems/1.9.1/gems/activesupport-3.1.1/lib/active_support/dependencies.rb:240:in `require'
        from /usr/lib/ruby/gems/1.9.1/gems/railties-3.1.1/lib/rails/commands.rb:28:in `<top (required)>'
        from script/rails:6:in `require'
        from script/rails:6:in `<main>'

Gemfile:

gem 'rails'
gem 'zurb-foundation'

Howdy,

I have started to play around with your framework, and I am loving it so far.....but I did find some errors in the zip file you gave for download. Here goes;

Messy Zip file with Mac OSX files;

• foundation-download.zip
  __MACOSX
• foundation-download.zip\javascripts
  .DS_Store

404s in the index.html file

Bad code, 404ing

• <script src="javascripts/jquery.placeholder.js"></script>
• <link rel="stylesheet" href="public/css/ie.css">

It Should be

• <script src="javascripts/jquery.placeholder.min.js"></script>
• link rel="stylesheet" href="stylesheets/ie.css">

Thanks,

Jason

Could you consider using a css preprocessor like lesscss instead of vanilla css ?

Wonder if anyone could help me out please. How would I create a centralised 1 pixel border between columns?

Best wishes
Lee

Tried everything cannot seem to get a four column row to work in IE7, even added to the demo... Even looked at the code for ZURBsoapbox and the image grid is a 4 column list... cannot seem to find a working four column example....

Am I missing something???

Thanks Guys