Mobile First Responsive Contact form Grid CSS
Travesy Media

Table of Contents

• Introduction
  • Live Server
• Emmet
• HTML responsiveness
• Raw Form
• CSS
• ICONS
• Finished form
  • Mobile First
  • Large devices
• Animate
• Firebase Google NoSQL
  • Firebase connection information
  • Changes for using Firebase
  • Permission denied

This is two of Brad’s courses on going minimal.

Using CSS Grid for mobile first app and Firebase for the data store.

No frameworks, no CSS libraries,

It uses the new Grid based CSS which in a way replaces Bootstrap.

Reference: Brad Travesy Video

Location: myDev/Grid CSS - Travesy

Introduction

Start design with phone first and then scale up to a desktop.

Focus on using Visual Studio Code for IDE.

Live Server

Use Live Server extension to VSCode for dynamic web page refreshes.

Figure 1. Live Server Extension

Starting up the Live server

Figure 2. Starting Live Server

The server opens and load the pages you selected.

Figure 3. Live Server Loaded

Note	The port is typically 5500

Emmet

Emmet extension built into VSCode !+Tab to generate HTML scafolding inside of a HTML file.

Create a div tag with a class name of container type

.container kbd[tab]

Create a H1 tag with a class of brand type

h1.brand kbd[tab]

To get a set of 3 list item li type

li*3 kdb[Tab]

HTML responsiveness

The viewport meta tag is important for responsive web pages

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Raw Form

The raw form is just the HTML without any styling sheets.

Figure 4. Raw Form

CSS

*{} - refers to everything on the page.

box-sizing: border-box; - Any width will factor in the margin and padding into width

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - A very nice display font

list-style: none; - Elminate the bullets on the list items

ICONS

The icons come from font awesome. We will use the CDN and copy the link into the code.

To add an ICON to the page use <i class="fa fa-road">

Finished form

The finished form works with smaller devices first, then resizes for larger ones. The reformatting for larger devices is quite a change from the mobile first.

Mobile First

Figure 5. Mobile First

Large devices

Figure 6. Larger devices

Animate

A little icing on the cake is some animation.

This uses the Animate.css style sheet.

We will use the CDN version

Figure 7. Example of ANimtae in action

Firebase Google NoSQL

To use Firebase you will need a Google Account. The free tier is great for this type of project.

Firebase is not just a NoSQL database. It also includes authentication, files store and testing.

To access the Firebase console use the web based GUI.

Figure 8. Firebase Console

Firebase connection information

The connection to Firebase is very similar to connecting to a database server.

Connection Info

<script src="https://www.gstatic.com/firebasejs/5.5.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBrETQ3L68SI-ESgiilLfXi3d0Vpd83pUA",
    authDomain: "contactform-1c218.firebaseapp.com",
    databaseURL: "https://contactform-1c218.firebaseio.com",
    projectId: "contactform-1c218",
    storageBucket: "contactform-1c218.appspot.com",
    messagingSenderId: "328725298353"
  };
  firebase.initializeApp(config);
</script>

Changes for using Firebase

The original code was written without thinking about the backend.

There will be a few things that need to be done to get Firebase to work here.

• Catch the Submut with an event handler

• Add id='name' to the field elements of the form

• Connect to Firebase

• Validation

• Push to Firebase collection

Permission denied

The following error is generated because by default Firebase expects to use authentication.

JavaScript Error

firebase.js:1 Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied
    at firebase.js:1
    at exceptionGuard (firebase.js:1)
    at e.callOnCompleteCallback (firebase.js:1)
    at firebase.js:1
    at firebase.js:1
    at t.onDataMessage_ (firebase.js:1)
    at e.onDataMessage_ (firebase.js:1)
    at e.onPrimaryMessageReceived_ (firebase.js:1)
    at e.onMessage (firebase.js:1)
    at e.appendFrame_ (firebase.js:1)

The collection must be set to allow anyone to do the update. In a real application there might be some login required.

Figure 9. Set conectform collection

Then view the collections rules.

Figure 10. Verify collection rules

Then reset the rules to be open to the public

Figure 11. Set rules