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 RTLUse 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
Check out other Playground experiments
Foundation Grids within Grids
Foundation for Apps
Slinky
Motion UI
