The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

• [x] Incorporate Sass 3.3 features such as maps and provide a settings API for all Sass components
• [x] .editorconfig #4720
• [ ] Unit tests for Sass https://github.com/ericam/true
• [ ] Support both em's and rem's using a generic calc function #4633
• [ ] Experimental advanced grid system - Singularity, Susy, Zen Grids rely more on mixins, make less assumptions and do not constraint design #4134
• [ ] Animation library for use with all js plugins - http://h5bp.github.io/Effeckt.css/
• [ ] Megamenu - http://geedmo.github.io/yamm3/#
• [ ] Labels with close buttons (like alerts) - Useful in search contexts
• [x] Accessibility

Will add more Edit: Added accessibility

Foundation 5.2 has the fancy option to direct dropdowns to the sides and top, but this issue is about something else. It's about the side used as an alignment for the dropdowns (or dropups, etc.), when it expands. There already is a feature request which explains it: #2423, but that was closed because there was also issue #3949, but like I said, that's about two different things. There were even two pull requests for the feature: #2905 and #3260. The latter even got merged into stable by @mhayes, but somehow got lost before it got to a real release. I'm bringing this up again now because 5.2 has been released and therefore #3949 has been closed.

Combined with the new feature from #3949, this would give a total of 12 different positions possible for the dropdowns/ups/lefts/rights.

Sorry for my sloppy English, it seems I have not fully woken up yet today.

https://github.com/zurb/foundation-sites/wiki/Project-Roadmap#other-things-to-investigateschedule

Other Things to Investigate/Schedule

3. CSS Grid - Not sure what the timeline is on this but we should target this, perhaps similar to flexbox mode?

CSS Grids has landed a week back first in firefox, and then in chrome, safari and opera

I am opening this thread for the discussion on this awesome layout monster! ( This might be very soon, but better to be early than late! )

1. Quick Overview => https://www.slideshare.net/rachelandrew/talk-web-design-css-grid-layout

2. Complete Guide => https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/

3. Grid by example => http://gridbyexample.com/

4. What mozilla says => https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

5. Yes or no to IE and its old spec => https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

6. Feature Queries => https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

Update: Well its so co-incidental ..... that when i posted this thread, Zurb was already working on this on a youtube video :smiling_imp: => https://youtu.be/bI1wNuvuFxo
Maybe its because both zurb and community wants the advancements! Right ??

Implementation for: #9592 Forwarded from: #9606 ( Due to branching issue )

This adds a new feature CSS Dropcaps, Simply use a dropcaps class in any html tag and the first letter of the text collection will grow to a bigger size proportionate to 3 normal lines and is as similar to what is found in magazines and the modern web

@ncoden @kball for review

Update: Here is the updated code from the below humongous code discussion b/w me & Nicolas

The Source Code behind all of this - _dropcaps.scss

$dropcaps-lines: 3 !default;
$dropcaps-line-height: 1.6 !default;
$dropcaps-uppercase: true !default;

@mixin dropcaps(
  $lines: $dropcaps-lines,
  $line-height: $dropcaps-line-height,
  $uppercase: $dropcaps-uppercase
) {
  $-margin-right: 0.0962em;
  $mt: (15.6 / 100); 
  $mb: (13.2 / 100);

  $lh: $line-height;
  $n: $lines;
  $h: $n * $lh;

  $-font-size: ($h - ($lh + $mt + $mb) + 1) / (1 - ($mt + $mb));
  $-margin-top: -($mt - ($mt + ($lh - 1) / 2) / $-font-size);
  $-margin-bottom: -($mb);

  &::first-letter {
    float: #{$global-left};
    margin-top: $-margin-top * 1em;
    margin-bottom: $-margin-bottom * 1em;
    margin-#{$global-right}: $-margin-right;
    font-size: $-font-size * 1em;
    line-height: 1;

    @if $uppercase {
      text-transform: uppercase;
    }
  }
}

@mixin foundation-dropcaps {
  .dropcaps {
    @include dropcaps();
  }
}

Generated CSS

.dropcaps {
  line-height: 1.6; 
}

.dropcaps::first-letter {
  float: left;
  margin-top: -0.07301em;
  margin-bottom: -0.132em;
  margin-right: 0.0962em;
  font-size: 5.49438em;
  line-height: 1;
  text-transform: uppercase; 
}

And, the output (Helvetica font)

Mobile output

Desktop output

I know there are some who have proposed to let user code CSS Grid But here is what i think,

For Foundation 7, It has been decided to drop support for IE9 & IE10 ... I propose to drop support for IE11 also. Whoever need to support IE, should use foundation 6

What are the benefits ??

Well we can use feature queries combining css grid with fallback to flex grid.

@supports (display: grid) {
  .grid-x, .grid-y {
    display: grid; // CSS Grid
  }
}
@supports not (display: grid) {
  .grid-x, .grid-y {
    display: flex; // Flex Grid as fallback
  }
}

Browser Support

Feature Queries : http://caniuse.com/#feat=css-featurequeries CSS Grid: http://caniuse.com/#feat=css-grid

=> Let's Make the web Great again!

From what I can tell there isn't a way to select and use the Flexbox grid if you use the Custom Download tool.

Am I missing something and there is there a way to do this?

If not, this option needs to be available.

List of issues with the Customizer and Customizer Page:

• [x] ~~No way to select Flexbox Grid~~
• [x] Error in the console saying jQuery is not defined. (In Firefox, Chrome does not throw a jQuery error.)
• [x] JS Error: SyntaxError: function statement requires a name templates.js:1:8
• [x] ~~The max-width is set to 62.5rem on the customizer page, however, the download max-width is 75rem. Colors are also different.~~
• [x] The link at the top of the page (in the top bar) for Docs is broken on the customizer page.
• [x] ~~In the foundation.js (and min.js) file the version is listed as 6.0.0-alpha.1.~~
• [x] In the foundation.js (and min.js) file the version is 6.0.1. Should be 6.0.4.
• [x] When I unzip (using 7zip) the custom download I see this error: Data error in 'custom-f6\app.css'. File is broken. Other files appear okay.
• [x] If you select the Flex Grid and no other items, the customizer only downloads the normalize CSS and nothing else.
• [x] Some downloads are missing foundation.css #7520 #7702
• [x] Gutter size can't be changed #7593
• [x] Essentials missing the grid #7753
• [x] Selecting "No Grid" results in a missing foundation.css file #7819
• [x] Add field to change $warning-color #7858
• [ ] Checkbox state can go out of whack when manipulating the "All Foundation Components" checkbox #7820
• [x] 7 digits can be entered into the color fields #8061

This is my vision of a brand new flex grid, based on a lot of research and input from some very knowledgeable people 😄

The aim:

• Fully rewritten flexbox grid
• Padding OR margin grid option
• Vertical grid option
• Easy to use, flexible mixins
• Cleaner generated classes with less/no specificity issues

It's still very much work in progress, but I would appreciate feedback on whats present so far.

Things to decide on:

• How we ship this with 6.4 (how its included, what other grids are also available etc)
• How we handle the move to new classes - .grid and .cell

There are probably more things which I've forgotten, but wanted to get this up for people to look at 😄

I've seen that a LESS version of the css is (possibly) in the works as of three months ago, any news on that? A LESS version of the foundation system would be amazing.

In the comments to Issue#25, Chaddeus left a comment about creating full-height columns. In other words, columns should automatically adjust to the height of the longest column in that row.

https://github.com/zurb/foundation/issues/25

The issue is easy to see when you have a div.panel inside two or more columns of unequal length.

This is the very first thing I wanted to do in Foundation. Before I tried to put together a solution based on Chad's suggested method (http://bit.ly/r1DsEy), I wanted to see if anyone else has already done this or incorporated this.

Thanks in advance!

I have not seen a new pull request go through since Jan 2019. Is Foundation still in active development? I just want to know before I use on a few new projects.

Thanks in advance.

I would like to import some foundation js files in a webpack app.

In my entry js file I do the following:

import 'foundation-sites/js/foundation.core.js'; // this works
import 'foundation-sites/js/foundation.tabs.js'; // this works
import 'foundation-sites/js/foundation.reveal.js'; // this fails

The last one fails with the following error:

ERROR in ./~/foundation-sites/js/foundation.reveal.js
Module not found: Error: Cannot resolve module 'foundation' in /home/kai/Projects/myapp/node_modules/foundation-sites/js
 @ ./~/foundation-sites/js/foundation.reveal.js 474:4-476:6

So it seems there is a problem with all files that contain the code define(['foundation'] ... as foundation is not defined anywhere.

I installed foundation-sites (v6.0.5) using NPM.

How do I import those files that have the define(['foundation'] correctly?

Bumps json5 from 1.0.1 to 1.0.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Description

The switch element do not change on keyboard events. For example buttons have outline and their color scaled on focus.

Changes

1. adding new color for switch on active. this color is based on switch-active-background and it is scaled like color scalling in buttons.
2. adding colors to switch based on input state (checked or not)

• Pull request is based on This issue

Types of changes

• [ ] Documentation
• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (anything that would change an existing functionality)
• [ ] Maintenance (refactor, code cleaning, development tools...)

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] The pull request title and template are correctly filled.
• [x] The pull request targets the right branch (develop or develop-v...).
• [x] My commits are correctly titled and contain all relevant information.
• [ ] I have updated the documentation accordingly to my changes (if relevant).
• [ ] I have added tests to cover my changes (if relevant).

  I have tested other JS components like accordions and they work fine. For some reason media queries are not working as expected. 

For example: .header-first, .header-second { @include breakpoint(medium) { background: $cerulean; } }

compiles to the below where the name of the breakpoint is added but not the size of 640px as in the _settings.scss:

@media (min-width: medium) { .header .header-first, .header .header-second { background: #0098db;} }

I have tested that _settings.scss is working by customizing other components. I have also tested that the JS is working with: console.log('Current: ' + Foundation.MediaQuery.current)

Any hints on what going on?

Originally posted by @mannclay in https://github.com/foundation/foundation-sites/discussions/12516

Is foundation 7 still in the works as promised two years ago in the roadmap. Should we consider the project suspended? I love foundation but I am really concerned about its future. 🤔

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.