Version 3.0.6

Basic Layout

Be sure to have your pages set up with the latest design and development standards. That means:

  • Using an HTML5 doctype
  • Forcing Internet Explorer to use its latest rendering mode (read more)
  • And, utilizing the viewport meta tag to take advantage of mobile responsiveness.

Put it all together and your pages should look like this:

                      
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link type="text/css" rel="stylesheet" href="/path/to/your/stylesheets/progress.min.css">
<title>Page Title</title>
</head>
<body>
<div class="app-wrapper">
<div class="app-header"></div>
<div class="app-content">
<h1>Page Title</h1>
</div>
</div>
</body>
</html>

ProgressUI requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

                      
<!DOCTYPE html>
<html>
···
</html>

ProgressUI is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

                      
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">

For improved cross-browser rendering, we use Normalize.css to correct small inconsistencies across browsers and devices.

Search Results

Powered by