🌐 Public

Foundation Framework

By Chase Higgins

Introduction

Foundation is a great, mobile first, easy to use responsive web design framework.

Added by Chase Higgins: “What can Foundation do?

1 What can you do with Foundation?

Foundation: The Most Advanced Responsive Front-end Framework from ZURBThere's so much shiny awesomeness in this release we think it speaks for itself. In case it doesn't though, here's a rundown on some of the new (and existing) features in the first, most-advanced responsive framework out there. Faster for UsersThe nuts and bolts of Foundation have never been speedier (if nuts

Added by Chase Higgins: “Getting started.

2 Foundation for Beginners: Getting Started

For many web folk, developing a project from scratch every time is part of the job; it's often tricky to build up a reusable codebase when each project is different. More experienced developers may have taken the time to build up some form of front-end framework, but doing this properly can be a serious undertaking, not to mention the need

Added by Chase Higgins: “Get to know the grid system.

3 Foundation for Beginners: The Grid System

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

4 Foundation for Beginners: Navigation

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. The Section

5 Foundation for Beginners: The Top Bar

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. Top Bar, or no Top BarFoundation's top bar is a very useful little component, but it's by no means obligatory to use it in your builds. I'd estimate that I've made use of

6 How to Customize the Foundation 4 Top Bar

Zurb's Foundation 4 features a brilliant top bar which has become almost symbolic of a Foundation site build. Today we're going to look at how you can implement it in a different way, placing it elsewhere on the page, giving you a custom and responsive horizontal navigation menu. Getting StartedFirst up, we'll need the latest Foundation. Unzip and place all

7 Foundation for Beginners: Buttons and Dropdowns

In this part of "Foundation for Beginners" we'll look at buttons, dropdowns and the "Clearing" plugin. ButtonsFoundation has a solid set of buttons and they are very easy to implement. Simply add a class of 'button' to any anchor, input, div or button element to see it transform into a glorious Foundation styled button. This just gets you the standard

8 Foundation for Beginners: Custom Forms and Switches

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. Forms, for me at least,

10 Foundation for Beginners: Joyride, Interchange, Tables and Panels

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. We'll begin with the most straight-forward of

11 Foundation for Beginners: Sticky Navigation, Flexible Video and Zepto

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

12 Setting up Foundation With Sass and Compass

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

Added by Chase Higgins: “If the tutorial wasn't enough, Zurb provides excellent documentation for Foundation. Getting to know Foundation is very easy to do.

14 Check out the docs.

Mariusz Malachowski

WordPress developer with over 5 years experience. SEO Specialist and Ecommerce enthusiast.

  • 4 Playlists
  • 123 Followers

rambococonut

Freshman

  • 0 Playlists
  • 0 Followers

NAVIN KUMAR CHAHAR

I AM HUMAN ,SIMPLE AND STRAIGHT.

  • 0 Playlists
  • 0 Followers

John Wilton Williams

Visit my personal site at johnyux.com

  • 0 Playlists
  • 0 Followers

Austin Feltan

Técnico Electrónico, Aficionado al Diseño Web y HackSchooling

  • 0 Playlists
  • 0 Followers

Walkyrie

Freshman

  • 0 Playlists
  • 0 Followers

Beanez

Freshman

  • 0 Playlists
  • 0 Followers

Ronnie Montoya

Freshman

  • 0 Playlists
  • 0 Followers

Abu Hauri Asy-Syifa Falisha

Freshman

  • 0 Playlists
  • 0 Followers

abdallah alshaer

big ambition and crazy dream

  • 0 Playlists
  • 0 Followers

Alexis Lawson

Freshman

  • 0 Playlists
  • 0 Followers

sofia-mas

Freshman

  • 0 Playlists
  • 0 Followers

Dan Marian

Web / UX / UI Designer denismarian92@gmail.com

  • 0 Playlists
  • 0 Followers

eformle

Freshman

  • 0 Playlists
  • 0 Followers

Jorge a. caballero

Freshman

  • 0 Playlists
  • 0 Followers

Haris Hamdani

a daydreamer. he thinks that someday he'll visit north pole, who knows!

  • 0 Playlists
  • 0 Followers

Bassant Shararah

Freshman

  • 0 Playlists
  • 0 Followers

Shermin ⌒⃘ཽ⃜ ළ̆ ⌒⃘ཽ⃜

Learning to code confidently.

  • 0 Playlists
  • 0 Followers

saumin kirve

Expertise in Front End Development and share thoughts on User Interaction.

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?