Advertisement

Foundation

  • Foundation
    How to Build a Shrinking Fixed Top Bar With FoundationFoundation bar
    155 shares
    A very common trend these days is the use of a fixed navigation, which shrinks to become less intrusive as the user scrolls down the page. In this tutorial, I'm going to show you how you can achieve this by using ZURBs Foundation Top Bar, some custom sass and jQuery. To top it off we'll add a couple of media queries to make our menu responsive. Let's get started!Read More…
  • Foundation
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    181 shares
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Foundation
    Foundation’s Sassy Styles ExplainedFoundation sass retina1
    32 shares
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Compass
    Setting up Foundation With Sass and CompassFoundation sass retina
    22 shares
    Sass is a great way to speed up front-end development in general, I use it in every one of my projects. Sass (as with all other preprocessors) allows for nested styles, functions and prewritten code in what are called mixins. Foundation has a few different versions, currently we've covered the most common HTML/CSS variants, but now let's talk about a version built on Sass.Read More…
  • Foundation
    Foundation for Beginners: Sticky Navigation, Flexible Video and ZeptoFouindation retina
    8 shares
    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.Read More…
  • Foundation
    Foundation for Beginners: Joyride, Interchange, Tables and PanelsFoundation thumb retina
    22 shares
    Let's further add to our Foundation arsenal by looking at the Joyride plugin, which helps guide users through your sites. We'll also look at pricing tables, standard tables and interchange; a novel responsive image tool. We'll cover the implementation of these features with a simple template which you can download and play with.Read More…
  • Foundation
    Foundation for Beginners: Progress, Alerts, Tooltips and the Elusive Mega DropFoundation mega retina
    13 shares
    Let's add to our Foundation skill set by learning how to make use of progress bars, alerts, tooltips and the mega drop which Zurb make use of on their site, but isn't actually in Foundation. We'll look at adding all of these components into the contact form from the previous tutorial, using a touch of custom jQuery so you can get an idea of how these elements could work in your own projects. Let's get started.Read More…
  • Foundation
    Foundation for Beginners: Custom Forms and SwitchesFoundation form retina
    9 shares
    Following on from our look at buttons in Zurb's Foundation, let's now take a look at custom forms and switches. During this tutorial we're going to work on an exercise; a contact form which you can add to your projects or just play around with. Once we've built that, we'll move onto other form elements.Read More…
  • Foundation
    Foundation for Beginners: Buttons and DropdownsFoundation button retina
    35 shares
    In this part of "Foundation for Beginners" we’ll look at buttons, dropdowns and the "Clearing" plugin.Read More…
  • Foundation
    Foundation for Beginners: The Top BarFoundation top bar retina
    16 shares
    Let's take a look at the top bar included within the Foundation framework. As there’s quite a lot to cover we’ll break it down into easy chunks.Read More…
  • Foundation
    Foundation for Beginners: NavigationFoundation 3 retina
    34 shares
    One of the most important aspects of a front-end framework is how it handles navigation. In this part of Foundation for Beginners, we'll take a look at several forms of navigation, along with some JavaScript tools which add extra flourish. I’ll also introduce you to another helpful tool which will help you to become a better Foundation developer.Read More…
  • Foundation
    Foundation for Beginners: The Grid SystemFoundation 2 retina
    35 shares
    In the opening part of this session on the Foundation Framework, we took a look at how you could make use of this framework, what it can do and how you can fashion a custom build. In this part we’ll look in detail at the grid system, demonstrating some examples as we go. We’ll also shake things up a bit and take a look at the Orbit JavaScript Slider plugin; a great slider for displaying all sorts of content.Read More…
Advertisement
Advertisement