RWD Boilerplate

Developer
Oliver Schafeld
Size
3,356 Kb
Views
30,360
  1. RWD Boilerplate Previews
  2. RWD Boilerplate HTML Codes
  3. RWD Boilerplate CSS Codes
  4. RWD Boilerplate JS Codes

How do I make an rwd boilerplate?

Attempt at a simple boilerplate for HTML5 resonsive web design. Some ARIA (role attributes for acessibility) included. . What is a rwd boilerplate? How do you make a rwd boilerplate? This script and codes were developed by Oliver Schafeld on 05 October 2022, Wednesday.

RWD Boilerplate Previews
IQ Test

RWD Boilerplate - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RWD Boilerplate</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- doctype html -->
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> </head> <body> <header> <nav class="navbar" role="navigation"> <ul class="nav navbar-nav"> <li> <a href="#">Getting started</a> </li> <li> <a href="#">Moving on</a> </li> </ul> </nav> </header> <main id="content" role="main"> <h1>RWD boilerplate</h1> <p>Attempt at a boilerplate for an HTML5 responsive web design with some ARIA sprinkled in...</p> <div class="block-wide"> <p>Some content in here just to fill a div...</p> </div> <div class="query-sensor"> Window width is <span class="max-w-400"> &lt; 400px</span> <span class="min-w-768"> &gt; 768px</span> <span class="min-w-992"> &gt; 992px</span> <span class="min-w-1200"> &gt; 1200px</span> </div> <div id="rwd-indicator"> x </div> </main> <footer role="contentinfo"> <small>Who done it?</small> </footer> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

RWD Boilerplate - Script Codes CSS Codes

/* a bit of normalization */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary { display: block;
}
audio,
canvas,
video { display: inline-block;
}
ul, menu, dir {
display: block;
list-style-type: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
/* standard css */
html { font-size: 62.5%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; /* bootstrap uses px, why? */ line-height: 1.428571429; color: #333333; background-color: #ffffff; margin:0; padding:0;
}
h1 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; /*margin-top: 20px;*/ /*margin-bottom: 10px;*/ margin: 0.67em 0; font-size: 2em; display: block; background-color: #efefef;
}
p { display: block;
}
nav, footer, h1, p, div { padding:0.5em;
}
div { border: 1px solid #efefef;
}
#rwd-indicator { font-weight: bold; color:red;
}
header {
background-color: #f1f1f1;
background-image: -moz-linear-gradient(top,#ffffff,#dddddd);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#dddddd));
background-image: -webkit-linear-gradient(top,#ffffff,#dddddd);
background-image: -o-linear-gradient(top,#ffffff,#dddddd);
background-image: linear-gradient(to bottom,#ffffff,#dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0);
color: #6e6e6e;
text-shadow: 0 2px 3px #ffffff;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
border-bottom: 1px solid #ffffff;
}
nav { display:block; width:auto; /* keep h1 out of nav */ height:2em;
}
.navbar-nav > li { float: left; margin-right:2em; /* remove li dots */ display:block;
}
.max-w-400,
.min-w-768,
.min-w-992,
.min-w-1200 { /* dis/appearing trick for any color */ opacity: 0; -moz-transition: opacity .25s linear, visibility .1s linear .5s; -webkit-transition: opacity .25s linear, visibility .1s linear .5s; -o-transition: opacity .25s linear, visibility .1s linear .5s; transition: opacity .25s linear, visibility .1s linear .5s; visibility: hidden; /* dis/appearing trick for black and white */ color:white; -moz-transition: color 2s; -webkit-transition: color 2s; -o-transition: color 2s; transition: color 2s;
}
/* media queries for rwd */
@media screen and (max-width: 400px) { .max-w-400 { color: black; opacity: 1; visibility: visible; }
}
@media (max-width: 767px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) and (max-width: 991px) { .min-w-768 { color: black; opacity: 1; visibility: visible; }
}
@media (min-width: 992px) and (max-width: 1199px) { .min-w-992 { color: black; opacity: 1; visibility: visible; }
}
@media (min-width: 1200px) { .min-w-1200 { color: black; opacity: 1; visibility: visible; }
} /* target / context = percentage */ /* 500 / 1200 = 0,41666... */ /* thus a block with 500px width in this context: */ .block-wide { width: 41.66666666666667%; }
}
@media print {}

RWD Boilerplate - Script Codes JS Codes

var rwdIndicator = document.getElementById("rwd-indicator");
/* rwdIndicator.innerHTML = "A"; */
if (window.matchMedia("(min-width: 786px)").matches) { rwdIndicator.innerHTML = "wider than 786 px";
} else { rwdIndicator.innerHTML = " narrower than 786 px";
}
RWD Boilerplate - Script Codes
RWD Boilerplate - Script Codes
Home Page Home
Developer Oliver Schafeld
Username schafeld
Uploaded October 05, 2022
Rating 3
Size 3,356 Kb
Views 30,360
Do you need developer help for RWD Boilerplate?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oliver Schafeld (schafeld) Script Codes
Name
Input Button Plus Minus
Qooxdoo ToDo
Button Download Flyer rtk-russia.de
A Pen by Oliver Schafeld
SVG Rotation, fixed Firefox transform-origin-bug
Walking Bot - Udacity CS255
Test cs255-unit 0-quiz 5
JS Raytracer
Qooxdoo Notification
AngularJS ToDo Demo
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!