Designing responsive ibm i web applications

Designing Responsive
IBM i Web Applications
Presented by:
Chelsea Fenton
Senior Web Application Developer
Fresche Solutions
October 2017

2Fresche Solutions | BCD - looksoftware - Quadrant
Topics
￭ What is Responsive Web Design?
￭ Introduction to Bootstrap
￭ How you can use Bootstrap
￭ How to install Bootstrap on IBM i

Fresche Solutions | BCD - looksoftware - Quadrant
What is Responsive Web Design?

Make web pages look good on all devices
Responsive Web Design

What is Responsive Web Design
￭ Content responds to device size
￭ Uses CSS and HTML
￭ Hide, move, stack, resize
￭ Grid Layout
￭ One code base

Live Example
https://www.wengercorp.com/audience-seating/index.php

CSS Media Queries
￭ Dimensions
@media (max-width: 480px){
.box{ width: 100%; }
}
￭Media Type
@media print {
.printIcon { display: none; }
}

B2B eCommerce on IBM i
https://www.taindustrial.com/

IBM i Dashboard

IBM i Document Portal

Key Challenges
￭ User Experience
￭ Longer Development
￭ Large Tables Of Data
￭ Balance of feature rich vs fast paced experience

Alternatives?
￭ Desktop only
￭ Mobile only
￭ Separate
￭ Native Mobile App

Introduction to Bootstrap

What is Bootstrap
￭ Most popular HTML, CSS, and JS framework for
developing responsive web applications
￭ Build sleek sites quickly and easily
￭ Single code base
￭ Free Open Source

CSS Styles and Components

JavaScript and Plug-ins

Forms

Grid Layout

Using Grid and Media Queries
1. col-md-12
2. col-md-6 3. col-md-6
4. col-md-4 5. col-md-4 6. col-md-4
MD Screen
3. col-sm-6
1. col-sm-12
2. col-sm-12
4. col-sm-6
5. col-sm-12
SM Screen
<div class=”col-md-12 col-sm-12” >...</div>
<div class=”col-md-4 col-sm-12 ”>...</div>
<div class=”col-md-4 hidden-sm”>...</div>

Mobile First
When you page is viewed at 768px or more
767px or less

Starter Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Navigation Bar

Design Page Layout

Other Useful Media Queries

Buttons

Form

Other Advantages
￭ Popular
￭ Saves Time
￭ What Other Platforms Use
￭ Cross Browser
￭ Attract New Developers

Themes
https://bootswatch.com/
https://www.bootstrap-live-customizer.com/

￭ http://getbootstrap.com/
￭ https://bootswatch.com/
￭ http://builtwithbootstrap.com/
￭ https://wrapbootstrap.com
￭ http://www.w3schools.com/bootstrap/
￭ http://startbootstrap.com/bootstrap-resources/
Resources

Bootstrap 4
￭ Removed xs from the lowest breakpoint col-6 instead of col-xs-6 covers all
￭ Dropped IE8 and iOS 6 support. v4 is now only IE9+ and iOS 7+
￭ Added a new grid tier for ~480px and below
￭ Dropped the Glyphicons icon font
￭ Renamed some classes
￭ https://v4-alpha.getbootstrap.com/migration/

How to install Bootstrap on IBM i

Download
￭Bootstrap offers several ways to download and
install its package - http://getbootstrap.com/
▶ npm install bootstrap@3
▶ composer require twbs/bootstrap
▶ bower install bootstrap
▶ download directly from their site
￭you will receive a package of javascript, css and font
files

Install
￭Upload these into your project folder on the IFS
￭Bootstrap also required jquery https://jquery.com/
so download and upload these files as well
￭Bootstrap 4 beta also requires Popper
https://popper.js.org/

Install
￭Add Apache directives so your programs can access
these files
￭ AliasMatch /(.*)$ /path/to/root/$1
￭ <Directory /path/to/root>
Order allow,deny
Allow from all
</Directory>

Questions
Chelsea Fenton
chelsea.fenton@freschesolutions.com
www.freschesolutions.com

Designing responsive ibm i web applications

Recommended

Recommended

More Related Content

Similar to Designing responsive ibm i web applications

Similar to Designing responsive ibm i web applications (20)

Recently uploaded

Recently uploaded (20)

Designing responsive ibm i web applications