Menu icon Foundation

Designer

Design Lead at ZURB.

My Posts

No Content

My Comments

Ghaida Zahran commented on Terkel Gjervig's post over 3 years

In addition to Rafi's advice, if you want to redefine the variables for different media sizes then the variable values in the _settings file will be for mobile. In your custom scss file you can create a media query like you did and restyle the element by using the class selectors.

Ghaida Zahran commented on Brendan Stock's post almost 4 years

Hey Brendan,
To effectively override caption styles you'll need to be pretty specific with your CSS declarations. Check out the example here:
http://cdpn.io/kcJrx

Ghaida Zahran commented on Eduardo's post almost 4 years

Sections are deprecated in F5. You now get a lot more control over content and presentation with tabs and accrodions in Foundation 5. You can load the appropriate component for different screen sizes with Interchange.

Accordion Docs
http://foundation.zurb.com/docs/components/accordion.html

Tab Docs
http://foundation.zurb.com/docs/components/tabs.html

Interchange Docs
http://foundation.zurb.com/docs/components/interchange.html

Ghaida Zahran commented on Rafi Benkual's post almost 4 years

Hey Rafi,
You can easily add the glyph to the Back button without touching the Javascript at all, and with a couple of simple CSS lines. To do this you'll use the CSS content property to style the back button like so:

.top-bar .back a:before {
  content: "\00ab ";
  margin-right: 4px;
}

Here's the link to a Codepen with the solution:
http://cdpn.io/FImAu

Ghaida Zahran commented on Rafi Benkual's post almost 4 years

Sounds like this might be a browser encoding issue. We're able to see those characters on the Forum, and that's built on Foundation as well. You could try changing the font-family variable to a font that supports Finnish.
http://cl.ly/image/0Y093n2m3T2o

Ghaida Zahran commented on George's post almost 4 years

You can still write semantic markup with custom class names and mixins in Foundation 5. Every component page on the docs has a Customize with Sass section, containing all the component variables, as well as a Semantic Markup with Sass section that contains the mixins that are available for you to build your elements.

For example, here's the mixins section for the Side Nav:
http://foundation.zurb.com/docs/components/sidenav.html#semantic-markup-with-sass

Ghaida Zahran commented on Alex Wright's post almost 4 years

While the technique is correct in Ben's code, the method isn't compatible with how Foundation works. Foundation is built Mobile First meaning you'll need to write your mobile styles without media queries like so:

header { 
  @include grid-row();
  nav { @include grid-column(12); }
}
@media #{$medium-up} {
  header { 
    @include grid-row();
    nav { @include grid-column(8); }
  }  

You'll notice a couple of things here:

  • Mobile is the default: The mobile styles are written outside media queries.
  • Use medium-up Media Sizes: Use the "-up" sizes to define your media queries. This will allow larger sizes to inherit from the smaller ones. We provided the "-only" media queries to help with QA issues, not to build out layouts.

Here's detailed info on Foundation's media queries:
http://foundation.zurb.com/docs/media-queries.html

Ghaida Zahran commented on shahin's post almost 4 years

Thanks for the heads-up! We've put this on our issues list for the upcoming 5.0.3 release. https://github.com/zurb/foundation/issues/4087

Ghaida Zahran commented on SANDEEP KUMAR ROY's post almost 4 years

Thanks for finding this bug. We've fixed it in the repo, but you can fix this in your local copy as well by going into the _topbar.scss file. First find the chunk of code following:
scss
// Position overrides for ul.right and ul.left

Then after the ul.right declaration and styles add this:
scss
.left {
li .dropdown {
right: auto;
left: 0;
li .dropdown { left: 100%; }
}
}

Ghaida Zahran commented on Abesse SMAHI's post almost 4 years

If you're using the Sass version then change the $text-direction variable to rtl in the _settings.scss file.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Terkel Gjervig's post over 3 years

In addition to Rafi's advice, if you want to redefine the variables for different media sizes then the variable values in the _settings file will be for mobile. In your custom scss file you can create a media query like you did and restyle the element by using the class selectors.

You commented on Brendan Stock's post almost 4 years

Hey Brendan,
To effectively override caption styles you'll need to be pretty specific with your CSS declarations. Check out the example here:
http://cdpn.io/kcJrx

You commented on Eduardo's post almost 4 years

Sections are deprecated in F5. You now get a lot more control over content and presentation with tabs and accrodions in Foundation 5. You can load the appropriate component for different screen sizes with Interchange.

Accordion Docs
http://foundation.zurb.com/docs/components/accordion.html

Tab Docs
http://foundation.zurb.com/docs/components/tabs.html

Interchange Docs
http://foundation.zurb.com/docs/components/interchange.html

You commented on Rafi Benkual's post almost 4 years

Hey Rafi,
You can easily add the glyph to the Back button without touching the Javascript at all, and with a couple of simple CSS lines. To do this you'll use the CSS content property to style the back button like so:

.top-bar .back a:before {
  content: "\00ab ";
  margin-right: 4px;
}

Here's the link to a Codepen with the solution:
http://cdpn.io/FImAu

You commented on Rafi Benkual's post almost 4 years

Sounds like this might be a browser encoding issue. We're able to see those characters on the Forum, and that's built on Foundation as well. You could try changing the font-family variable to a font that supports Finnish.
http://cl.ly/image/0Y093n2m3T2o

You commented on George's post almost 4 years

You can still write semantic markup with custom class names and mixins in Foundation 5. Every component page on the docs has a Customize with Sass section, containing all the component variables, as well as a Semantic Markup with Sass section that contains the mixins that are available for you to build your elements.

For example, here's the mixins section for the Side Nav:
http://foundation.zurb.com/docs/components/sidenav.html#semantic-markup-with-sass

You commented on Alex Wright's post almost 4 years

While the technique is correct in Ben's code, the method isn't compatible with how Foundation works. Foundation is built Mobile First meaning you'll need to write your mobile styles without media queries like so:

header { 
  @include grid-row();
  nav { @include grid-column(12); }
}
@media #{$medium-up} {
  header { 
    @include grid-row();
    nav { @include grid-column(8); }
  }  

You'll notice a couple of things here:

  • Mobile is the default: The mobile styles are written outside media queries.
  • Use medium-up Media Sizes: Use the "-up" sizes to define your media queries. This will allow larger sizes to inherit from the smaller ones. We provided the "-only" media queries to help with QA issues, not to build out layouts.

Here's detailed info on Foundation's media queries:
http://foundation.zurb.com/docs/media-queries.html

You commented on shahin's post almost 4 years

Thanks for the heads-up! We've put this on our issues list for the upcoming 5.0.3 release. https://github.com/zurb/foundation/issues/4087

You commented on SANDEEP KUMAR ROY's post almost 4 years

Thanks for finding this bug. We've fixed it in the repo, but you can fix this in your local copy as well by going into the _topbar.scss file. First find the chunk of code following:
scss
// Position overrides for ul.right and ul.left

Then after the ul.right declaration and styles add this:
scss
.left {
li .dropdown {
right: auto;
left: 0;
li .dropdown { left: 100%; }
}
}

You commented on Abesse SMAHI's post almost 4 years

If you're using the Sass version then change the $text-direction variable to rtl in the _settings.scss file.

Posts Followed

No Content

Following

  • No Content

Followers