Responsive Design & ZURB Foundation

View Github Repository Open presentation in a new window

pascalalfadian

See all presentation from pascalalfadian

Responsive Design & ZURB Foundation

0 0

responsive

Slides about responsive web design using ZURB Foundation

On Github pascalalfadian / responsive

Responsive Design & ZURB Foundation

pascal@unpar.ac.id

Access at http://pascalalfadian.github.io/responsive

Background: 2000's

2010's

Today

  • Mobile version: costly to maintain two versions
  • Responsive design: same code, different looks on desktop vs mobile
  • Example: http://www.unpar.ac.id

How to do it? With HTML

  • Add the following code inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">

With CSS

  • Media Queries: Allow separate CSS for different screen, example:
@media (max-width: 700px) { font-size: 10px; }
  • will set font size to 10px if screen width is < 700px.

Framework/Library

  • Two notable frameworks:
    • Bootstrap: widely used, many plugins, difficult to customize.
    • Foundation: serves as foundation, less plugins, easier to customize.
  • We will learn Foundation only.

ZURB Foundation: Introduction

  • In this course, we will use the easiest way: CSS
  • Other ways include:
    • Sass (Write in Sass, compile to CSS)
    • App (using Ruby on Rails)
  • Download "Everything", extract, then start modifying index.html or from template in next slide.

Template

(adapted from Foundation's template)

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.css">
    <script src="js/vendor/modernizr.js"></script>
</head>
<body>

    <!-- body content here -->

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

12-column Grid

  • Imagine desktop screen is divided into 12 equal-width columns
  • In a single row, your content may take up 1 or more columns, but must total to 12.
  • To create:
    • row, use <div class="row"> tag
    • columns, use <div class="large-n columns> tag (where n is the number of columns to span, large may be replaced with medium and small)
  • See example next slide, or Foundation's Doc.

12-column Grid - Example

<div class="row">
    <div class="large-4 columns">
        <h1>News #1</h1>
        <p>For the purpose of improving students’ knowledge and insight, the Industrial Engineering Study Program conducted a factory Study event. It...</p>
    </div>
    <div class="large-4 columns">
        <h1>News #2</h1>
        <p>Starting June 1, 2015 until January 30, 2019, the School of Post-Graduate Studies will be under the leadership of Tri...</p>
    </div>
    <div class="large-4 columns">
        <h1>News #3</h1>
        <p>Students of the Economic Development Study Program of Parahyangan Catholic University, made a field study trip to Bank Indonesia (BI)...</p>
    </div>
</div>

Block Grid

  • Allows listing of items, evenly spaced and adjusted by screen size
  • Usually used for pictures
  • If horizontal space does not allow, will wrap to next row
  • See example next slide, or Foundation's Doc

Block Grid - Example

<div class="row">
    <div class="large-12">
        <h1>UNPAR's Notable Alumni</h1>
        <ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-6">
            <li>Syahnaz Sadiqah</li>
            <li>Tulus</li>
            <li>Vicky Shu</li>
            <li>Asyifa Latief</li>
            <li>Nazril Irham</li>
            <li>Dewi Lestari</li>
            <li>Chantal Della Concetta</li>
            <li>Maruarar Sirait</li>
            <li>Hotman Paris Hutapea</li>
            <li>Choky Sitohang</li>
            <li>Bima Arya Sugiarto</li>
            <li>Marzuki Darusman</li>
            <li>Marco Kusumawijaya</li>
            <li>Trisutji Kamal</li>
            <li>Otto Cornelis Kaligis</li>
        </ul>
    </div>
</div>

Other Features

  • That's it about basic responsive design using ZURB Foundation.
  • However, Foundation provides additional HTML elements, that we will discuss one by one in the Kitchen Sink

Extras

  • Why should you trust me? KIRI uses Foundation, give it a look! (right-click, view source)
  • Foundation (and Bootstrap) is client-side Framework (works together with JS, not PHP)
  • Thank you
Responsive Design & ZURB Foundation pascal@unpar.ac.id Access at http://pascalalfadian.github.io/responsive