Design Great Products Faster
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.
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.
Quick Start
You can download the right-to-left version of Foundation right here.
Examples
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
- Chinese: zh
- Farsi: fa
- Hebrew: he, iw
- Japanese: ja
- Urdu: ur
- Yiddish: yi, ji