F5 wishlist

[vinayraghu]

I know we are still firefighting the issues with the latest release of F4. But I couldn't contain my excitement about F5. Now would be a nice time to discuss with the community on what features they would expect in F5.

Repo level changes

• Unit/Integration tests Unit / Integration Tests #3028
• Include the compiled and un-minified version of CSS and JS in the repo
• Contributing.md to be updated with a check-list before submitting PR
• Exhaustive documentation with examples for all the capabilities

Feature requests

• Support only the latest browsers and ditch <ie9 support.
  • Remove *zoom and other older browser related hacks
• Rem font sizing http://caniuse.com/#search=rem
• Border box sizing on individual CSS components as opposed to applying it on * Fix global CSS bad practices #2460 (comment)
• Remove support for old emCalc keyword
• Optional class names for every scss file
  • More specific $include-html-whatever-classes #2793
  • Convert all core class names (eg: .button) into variables so its easy to change
  • Useful when using foundation in an existing project and the project uses the same naming convention as foundation and you wish to retain both

CSS

• Microformats default styles mixin @MekZii @steveluscher
• New look and feel @zslabs, @rvinay88
• Improved Grid https://github.com/MekZii/foundation/tree/improveGrid
• Vertical centering columns
• Equal column heights
  • search for Match column heights here http://getuikit.com/docs/grid.html
• Different text alignment for different grids
  • large-6 large-text-right medium-4 medium-text-center small-12 small-text-left)
  • https://groups.google.com/forum/#!topic/foundation-framework-/xx485-cQZWs
• More semantic float classes
  • .float-left, .float-right (instead of just .left and .right)
• Helper classes
  • add .clearfix class (currently its only a mixin)
  • add a .center class (margin: 0 auto;) I find this extremely useful in my personal projects
• Inline elements instead of inline lists Style tags other than li (eg; dt and dd) as inline-list elements #3065
• Centering Inline elements Centering Inline elements #3114
• Mega menu and grid nesting support for top bar
• Block grid support for clearing thumbs
• Vertical Rhythm
  • All (bottom and top) margins/line-heights are multples of a single variable to maintain consistency
  • Vertical Rhythm is all guesswork it seems #2776
• Variable name consistency Inconsistent naming for border variables #3511

JS

• no-js fallback for all js components like nav-bar
  • Refer http://alistapart.com/article/designing-for-breakpoints#section3
• Add JS events for the dropdown, close, open, closed, opened.
• Deep linking in section tabs by default
• Hide Sidebar - ability to hide a column on click. Useful to show/hide sidebar
• Tooltips to be reusable and not require unique IDs First tooltip works, second tooltip shows both old and new-style popups #3082
• Per component JSON/XML file with all the options, allowed values, allowed combinations

Fancy Items

Maybe not directly into the core but an experimental branch directly from zurb that supports additional components. User downloads at their own risk and can be a bit buggy

• - Wizard steps breadcrumbs using CSS triangles
  • http://www.emirplicanic.com/css/css-step-by-step-menu-wizard-style
• Auto complete/Typeahead F5 suggestion: a typeahead plugin #2819
  • http://harvesthq.github.io/chosen/
• Calendar
  • http://foundation-datepicker.peterbeno.com/example/example.html
• Tree Menu
  • http://www.thecssninja.com/css/css-tree-menu

Feel free to upvote, downvote or add

@mhayes @seantimm @Mekzii @RobertinoValue @steveluscher

[Ilyes512]

Nice list. Maybe removing zepto and moving to jQuery 2.., wish removes support for older browsers(ie). We should try and make it compatible with 1.9.* because some popular CMS/blog systems are using the older one (WordPress).

Using your own grid names, breaking points and visibility classes. I already worked on it but it needs some polishing: https://github.com/MekZii/foundation/tree/improveGrid

Also I just completed a book "Adaptive Web Design" by Aaron Gustafson. He tells you about content being first(and much more) and the webpage that gradually upgrades its self when support for it is available. I still think we can build F5 in such a way that it will support the newest browsers only, but when setting a variable to "true" to support the older ones as well, but that will probably cause more CSS (fallbacks).

[zslabs]

Would love to see a flexible equal column height (with optional child selector) JS plugin. There are tons out there, but think it's a common use for most areas that use panels in different columns. Would need to calculate if stacked (not just on screen size since we could have multiple columns on mobile) to revert back any min-height attr

[vinayraghu]

@zslabs do you have any link or samples to explain what you want?

[Ilyes512]

Another point on the list that could/might be added:
Javascript fallback for all the javascript depended modules (no-js). Content need to be always available even when javascript is not turned on.

For example for the navigation:

keep it near the bottom of the screen and place a link to that navigation near the top of the screen. JavaScript, when available and working as expected, can move that navigation up to the top and create the drop-down menu on the fly.
http://alistapart.com/article/designing-for-breakpoints#section3

In "theory" a really nice way of handeling a no-js scenario for navigation.

[zslabs]

@rvinay88 Yep, take a look here. You'll see a match height area on that page. The automatic grid margin is a great idea as well. In-fact, the framework itself has lots of nice additions, just a matter of if anyone thinks they are worth adding.

[vinayraghu]

@zslabs yes that's a definite possibility. Have added it to the list. Thanks for the suggestion.
@MekZii I am not sure how much of effort it might take to find a no-js way of handling all the js components. But the navbar certainly seems like a good candidate. I have added it to the list as well.

Just out of curiosity, are there no-js devices or people who disable js on their devices? Is the number significant? Is there a need to support those devices?

Also, we should probably take these discussions off this page and into a group mail ID, I guess. We can retain this page for suggestions alone and discuss each suggestion separately. Any thoughts on how to handel that @mhayes

[Ilyes512]

To support no-js is quite a discussion. Not sure if google's spider uses javascript these days when crawling? If it doesn't have javascript then it might not see the content contained within section's (Google might still be able to read it, but doesn't give it much value cause of visibility: hidden;). So I don't know how this works for SEO standpoint.

The solution to extend all section and to collapse them all but the first with javascript will probably cause "flashes" when the page loads (seeing the extended section for a few millisecond wish will move the content beneath it as well).

We could use the Foundation Google Groups ( I don't really like it though).

[SAFAD]

a better style for the tabs maybe ? Just get the F3 tabs styling back
Add JS events for the dropdown, close, open, closed, opened.

[zslabs]

What I'd honestly like to see as well are better "default" styles. I totally get Zurb is trying to keep Foundation slim -- and they still can -- but I think the overall style guide needs a once-over. I'll go ahead and be "that person", but for all of the great things Foundation gives us, compared to Bootstrap and UiKit, the styles are a bit out-dated. I'd take on this project on my own, but would like to know if anyone else agrees.

[vinayraghu]

The new bootstrap theme is certainly very good. I didn't like a few default styles and the color scheme that came with foundation. A new theme would totally set apart the next release.

As for UiKit, although its neat, I feel its too bright. I'd love to help you out on a new theme/color scheme/look and feel for all the components. I'll add it to the list.

[zslabs]

@rvinay88 Awesome. Aside from my last comment, while adding all these new features are great, one thing to keep in mind is the size of Foundation. I realize Foundation does a few things that the other frameworks don't, but if this article is true, just the core CSS is massive compared to others and I don't see a good reason why. Like you had in your wishlist, I think it's time to take advantage of advanced CSS selectors wherever possible to try to trim down Foundation a bit. For those that still require support, we could just add links to respondJs and Selectivizr (but I 100% agree it's time to leave those browsers behind anyway).

[steveluscher]

Just a tiny thing, but I'd like an $include-microformats-classes option. I've just had to negate those in my app because I have no need of the Foundation defaults.

[Ilyes512]

Add AwesomeFonts.

And indeed I always need to reset the microformats default styles as well. Those style should only be added to child elements of a certain class. It could easily be made into a mixin. So you can add that to your parent class at choice.

[vinayraghu]

Font awesome has a pretty decent scss support, which is pretty much just drag and drop. Also, foundation has their own version called found-icons. I think its better to keep them separate.

Could you elaborate on the microformat styles? I am not aware of those and am pretty sure they are important. Some examples, maybe?

[steveluscher]

@rvinay88 Foundation forcibly adds a bunch of styles (in _global.scss) that look something like:

.vcard { … }
.vevent { … }

It's inconvenient if you use those classes, but don't want Foundation's default styles for them.

[vinayraghu]

Thanks Steve! I have added this to the wishlist. For now I have assumed that either you or @MekZii can take it up.
Let me know if that needs to change.

It would be great when we start to get cracking!

[vinayraghu]

👍 for namespace. In a customized jquery UI build, it allows for an option to prefix all jquery UI CSS components with another classname so that it doesn't interfere with anything else. I have had problems with CSS from foundation colliding with CSS classes on an existing project, because form.custom and .button are pretty standard for naming your CSS

I have an item on the list that plans to provide the user an option of changing the class name. So the .button or .custom is stored in a variable for every component. Defaults are set, but if you want to use a different name, you can.

👍 Top bar bugs need to go away!

Adding the JSON files to the list.

[vinayraghu]

Comprehensive documentation, that shows all capabilities of the component with examples
Eg: Current top-bar, there's no example with a button in the top bar, but the docs explain this is a possibility. #3144

[mhayes]

Hey guys, really stoked to see some great ideas here!

@rvinay88 We're looking at updating the documentation. A few examples of things we really like so far are:

http://backbonejs.org/
http://bourbon.io/docs/

Any other awesome docs that you guys like?

@RobertinoValue We're going to fully ditch IE8 in Foundation 5, however IE9 will still be supported.

@zslabs I like the idea of improving the default styles in Foundation 5, however I still want to keep things as minimal as possible. I don't want to see a bunch of sites that all look the same if no one bothers to customize them.

[vinayraghu]

@mhayes 👍 for bourbon docs. They look neat!

Does anyone know if we can update the code part of the documentation automatically when the code changes?

Its a little painful to have to fix an issue, push a commit. Only to realize you didn't change it in the documentation. Would be rad if we could directly pull in the code and it reflects in the documentation as and when code is updated.

[mhayes]

@rvinay88 totally agree with you on doing part of this automation to keep the docs up to date. As a proof of concept I started working on a JS and Sass variable extractor here:

https://github.com/zurb/foundation/tree/5.0-wip/lib/foundation/utils

The goal is to allow some of the documentation to be generated directly from the source files. For example using Statis we can generate a table of all the default Sass values with the following snippet of code:

https://github.com/zurb/foundation/blob/5.0-wip/docs/controller.rb#L38

[vinayraghu]

@mhayes the POC looks cool. I couldn't understand the intricacies of it, but definitely looks like a step in the right direction. Will this also have the ability to pull out Sass (code as it is updated) and place it in the docs pages?

I was looking at other options such as

1. StyleDocco for Sass (refer http://jacobrask.github.io/styledocco/ and http://www.tech-step.net/?p=64)
2. KSS (http://warpspire.com/posts/kss/)

Where the documentation is generated from within the Sass file and all the other markup for the docs are added as comments within the sass file.

Not sure if we can use that for all cases, but would like for you to take a look at these options as well.

[zslabs]

@mhayes Awesome to hear! I'm on the same page with you about keeping the styles as lightweight as possible. What would you propose is the best way to go about this? Let me know if you want to talk on skype/gtalk and we can setup a time. Thanks!

[erredeco]

IMHO

1. rem font size, modular scale and responsive font size like http://cardinalcss.com/
2. it would be nice to have a separation between "core" styles (grid, typography...)
   and "theme" styles which would be interchangeable and set for example the colors

[SAFAD]

We need a way to make the fonts scale with the screen size, something similar to cardinalcss.com

[istrasoft]

Actually this

More semantic float classes
.float-left, .float-right (instead of just .left and .right)

should even be bidi compliant :

.float-start and .float-end :)

[rafibomb]

re: mega menu's

We have a challenge out to see who can make the best Mega Menu in Foundation. I'm sure you guys can come up with something awesome! http://foundation.zurb.com/forum/posts/2082-mega-menu---full-width-dropdown-challenge

[istrasoft]

More semantic float classes
.float-left, .float-right (instead of just .left and .right)

This is actually presentational, in my humble opinion.

[smileyj68]

This was a good list and did inform Foundation 5 in some big ways. If you have a wish list for F6, we'd love to hear it! Closing this guy down.