Quick HTML Front End Prototyping

Introduction

My focus is on web application back end development. In some projects, I also need to put on a web front ender’s hat doing HTML prototype and front end coding. I quite enjoy the variety of web development works.

Given the fact, I am still not a full dedicated front ender. Sometime, I spend some extra time setting up a HTML template.

This the reason of this article. I need to document some useful websites, tools and pitfalls for myself and hopefully for you.

Common libraries

  • Boostrap and Zurb foundation. Notice: I found Zurb doesn’t support IE 8.
  • Font awesome. IE 8 campatible
  • Modernizr
  • Custom font if required.

Useful links

Password protect (C# specific)

I use C# for prototypes, the cshtml or aspx will be easily migrated in my build solution during implementation period.

I use HttpAuthModule to password protect a internet published prototype.

IE 8 with boostrap

IE 8 don’t support css media query. In this case, we need a respond.js to do the magic for Boostrap, following this webpage.

However, I have struggled to make this work on IE 8, until I fully understand the following quotes on the webpage.

Internet Explorer 8 and Respond.js
Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS
Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

What I need are :
1. downloading the Boostrap and host my own, rather than referencing using CDNs.
2. put the Boostrap css reference in front of the respond.js reference.

like this.

<link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap-theme.css" >
<link rel="stylesheet" href="/Assets/App.css" media='all'>

    <!--[if lt IE 9]>
      <a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js</a>
      <a href="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js</a>
    <![endif]-->

Finally, it looks like.

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>
        <asp:ContentPlaceHolder ID="title" runat="server" />
    </title>
    <meta name="description" content="Automation Tools" />
    <asp:ContentPlaceHolder ID="head" runat="server" />

    <link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap-theme.css" >

    <link rel="stylesheet" href="/Assets/Vendors/font-awesome/css/font-awesome.min.css" media='all'>
    <link rel="stylesheet" href="/Assets/App.css" media='all'>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css' media='all'>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" />
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" />
    <![endif]-->
</head>
<body>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" />
    <script src="/Assets/Vendors/bootstrap/js/bootstrap.min.js" />

    <script src="/Assets/App.js" />
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s