Right-to-Left for Foundation 4

The Yeti Strikes Back

Good news! Not only have we added right-to-left text direction support to Foundation 4, but we also made a bunch of updates and improvements to the right-to-left JavaScript and SCSS. It’s now easier than ever before to make mobile-first websites for any language!

Who uses this anyway?

Foundation is the most advanced responsive framework in the world, and we mean that last part! We want people to start building and prototyping for any device, in any language — hassle free!

Download Right-to-Left Foundation

Trust the customizer, Luke

Change the Text Direction setting in the Foundation customizer to RTL to download an RTL-ready version of Foundation.

New hero

Right to... What Now?

Right-to-left languages read well … from right to left! Our grid was previously hardcoded for left-to-right text direction, but we've unleashed the Yeti's full potential in all languages by adding in super easy setup and fully functional javascript for right-to-left support.

If you've designed right-to-left websites, you know how challenging it is to find a reliable jumping off point to begin your front-end work, so you had to hack a left-to-right framework or start from scratch.

Awesome! How do I use it?

We're glad you asked, because it's super to easy to get started using the right-to-left version of Foundation. Simply customize and download your own version of Foundation using our download customizer, and fire it up in your text editor.

If you downloaded RTL Foundation using the customizer, then you're good to go! The zip folder you downloaded has everything you need to start building your site.

SASSy RTL

If you're using the Foundation Gem version, RTL support comes built-in, and switching text directions is easier than ever. You only need to change a single variable in your SCSS, and make a tiny one-time adjustment to your markup.

Mind Your Language

<html lang="ar" dir="rtl">

The One True SCSS Variable

$text-direction: rtl !default;

Examples

Check out these examples to see how the grid flips for right-to-left layouts.

Download Foundation RTL

Quick Start

You can download the right-to-left version of Foundation right here.

Download Foundation RTL

Use this link to download a custom version of Foundation with RTL or install the Gem version.

Mind Your Language

Not sure what your language code is? Here's a handy-dandy list of right-to-left language codes:

  • Arabic: ar
  • Simplified Chinese: zh-hans
  • Traditional Chinese: zh-hant
  • Farsi: fa
  • Hebrew: he, iw
  • Japanese: ja
  • Urdu: ur
  • Yiddish: yi, ji

Score an awesome product engineering or design job

via Job Board from ZURB


Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×