Webdesigntuts+

---

Foundation for Beginners: Sticky Navigation, Flexible Video and Zepto Posted: 15 Aug 2013 03:48 AM PDT In this part of our examination of Zurb Foundation we'll talk about Magellan, which creates sticky navigation. We'll look at visibility classes, right-to-left support, keystrokes, thumbnails, flexible video and the ins and outs of zepto. I'll explain the use cases of these features and how best to implement them in your projects. In this session we’ve covered a large portion of the Foundation framework and there is still a fair way to go. Let’s now look at a few features which you can quickly implement into your sites. We’ll start with a JavaScript plugin this time, it’s called Magellan and allows you to add sticky navigation to your projects. Magellan It’s not uncommon for a client to ask for navigation that stays fixed on the page when the user navigates away from the standard navigation, such as scrolling down the page. Magellan comes to the rescue, adding fixed navigation to the page once the user scrolls past a certain point. With simple markup it’s easy to get started. <div data-magellan-expedition="fixed"> <ul class="sub-nav"> <li data-magellan-arrival="contact"><a href="#">Contact</a></li> <li data-magellan-arrival="about"><a href="#">About</a></li> </ul> </div> Housed in a traditional uniformed list structure with a div to contain everything, this should be quick and easy to get up and running. There are two types of special attributes for Magellan; data-magellan-expiditon which is used as the position type and data-magellan-arrival which can be paired with the likes of a page anchor. As this JavaScript plugin is so lightweight the only other option you need to know are those which can be passed on initialization. $(document).foundation('magellan',{ // specify the class used for active sections activeClass: 'active', // how many pixels until the magellan bar sticks, 0 = auto threshold: 0 }); So again, two options here; set yourself a custom magellan class and set the point on the page where magellan will spring into action. Visibility Now you see it, now you don’t! Quite often it can be tricky re-jigging all your content for different screen sizes. With Foundation’s visibility classes you can simply display more or fewer elements depending on the breakpoint set. Let’s start with the “show” classes, all fairly simple with a variety of breakpoints to play with. I find visibility classes most useful when I need to add/remove elements between smartphone and desktop,  maybe for a device like an iPad. .show-for-small /* Visible up to 768px */ .show-for-medium-down /* Visible from 768px down */ .show-for-medium /* Visible between 768px and 1280px */ .show-for-medium-up /* Visible from 768px up */ .show-for-large-down /* Visible from 1280px down */ .show-for-large /* Visible between 1280px and 1440px */ .show-for-large-up /* Visible from 1280px up */ .show-for-xlarge /* Visible above 1440px only */ To hide elements at these same break points just use “hide” instead of “show”. Perhaps you need a specific orientation-based class? These are also included. You’ll also notice classes for touch too. Spoilt for choice here. .show-for-landscape /* Visible for landscape orientation */ .show-for-portrait /* Visible for portrait orientation */ .hide-for-landscape /* Hidden for landscape orientation */ .hide-for-portrait /* Hidden for portrait orientation */ /* The touch detection classes */ .show-for-touch /* Visible for touch enabled devices */ .hide-for-touch /* Hidden for touch enabled devices */ Again, these will come in really handy if you’re in a tight spot and need to hide some elements or, the polar opposite, if you find yourself in a vast open space you can throw some more elements in. RTL Support I thought I’d cover this quickly as no-one really mentions right-to-left support. This is supremely handy if you ever have an international project with an arabic-centric (for example) user base. Take Persian, which uses a modified version of the Arabic alphabet, which requires right-to-left text. Whereas sites like BBC News demonstrate this functionality, they have a team of developers capable of taking on this design challenge. In Foundation, it’s all been done for you. <html class="no-js" lang="ar" dir="rtl"> Replace you html tag with this and you’ll be away. Wait, I know what you’re thinking, I don’t want Arabic, right? No worries, Chinese zh, Farsi fa, Hebrew he/iw, Japanese ja, Urdu ur, Yiddish yi/ji are also supported. Simply change the value of the “lang” attribute with your preferred language. Keystrokes I bet many of you who have downloaded Foundation have skimmed over the keystrokes checkbox as you weren’t sure what it was. Right? Well, if you haven’t already looked at the docs, you’re about to find out. Keystrokes wrap around text and show them as a key. So, rather than saying press control, alt and delete in boring old text you can spruce it up and give it some meaning. <kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>del</kbd> Simplistic but effective, especially if you have keys assigned to certain functions such as making the directional buttons control the orbit slider. Thumbnails Thumbnails are a quick way to style a small image with an anchor. This is one of those small details that adds to the magic that is Foundation. Grab yourself an image, slap it in an <a class="th"> tag with a class of “th”. Boom. Job done. This is great for projects that have little or no design input, as the developer can make the site look great with the minimal styles included in the framework. <a href="#" class="th" > <img src="images/funkyTown.jpg" alt="Get down to funky town" /> </a> Flex Video Embedding videos can be a pain, especially with those old flash-based video players that have double sets of dimension attributes (ugh, what an inconvenience) making videos responsive too, is an effort.  The goal is simple; you want to add your favorite video of lol cats to your site, but the darn thing gets squished, or cut off when you watch it on your phone every night before bed, or every morning on the iPad whilst in the bathroom. With flex-video you can release a sigh of relief and get back to all the lol cat action. Wrap any video from popular sites (like Youtube and Vimeo) in a div with the “flex-video” class, then foundation will keep the aspect ratio in place, scaling the video and preventing horribly disfigured or chopped in half lol cats. <div class="flex-video"> <iframe width="420" height="315" src="//www.youtube.com/embed/RcVyl9X3gFo" frameborder="0" allowfullscreen></iframe> </div> Zepto In every package of the Foundation framework lies a special JavaScript library called “zepto”, which behaves in much the same way as jQuery. On page load Foundation looks to see if zepto will run, if it does then jQuery is sent to the naughty step. The trouble is, though, zepto isn’t a complete replacement for jQuery. In fact, it’s roughly 7,100 lines of code lighter than jQuery, so why is this and why would Foundation drop jQuery for this infantile JavaScript library? Zepto duplicates enough of the jQuery feature set to cope with all the basic commands Foundation lays out. Using a library that’s much lighter is a smart move now that the framework is mobile-first – it takes more than a few seconds to load jQuery on a mobile device over a cellular connection. Those additional 7,100 lines of code aren’t redundant though, as they take care of all of the fancy animation and browser compatibility, amongst other stuff. I’m a pretty heavy jQuery animation user, so I tend to just kill zepto from the get go. However, I recently worked on a project which was mobile-only and which did not require any jQuery animation; using zepto gave users a full 2.3 seconds faster load time. So if you can do without the bloat of jQuery, then zepto is a fantastic bare bones replacement. Useful Tool Give your users something to do when they inevitably get lost down a dead end on your website, the 404 invader game! Found on the mass:werk website, this is a fun and potentially addictive way to get lost on your next site project. Use your arrow keys to control the gun <kbd>A</kbd> & <kbd>S</kbd> to move and <kbd>space</kbd> to fire (see what I did there?) Coming Next In the next article we’ll be looking at SASS, how to get the SASS version of Foundation, setting it up, tools you’ll need and a brief overview of how to use this mighty style preprocessor in your future projects.

You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610