ResponsiveCss/index.html

NEIU CS300 HTML & CSS Responsive Design

Block One – Always Full Width

The contents of this block whill always be full width, regardless of the screen resolution or the size of your device.

Responsive Design – The Basics

Responsive design tends to use a 12 column grid. This is used by frameworks such as Bootstrap, Foundation, etc. The grid system allows us to easily adjust an elements width depending on browser size / device resolution.

How it works

• Create an element and give it class="row"
• Within each row, add columns until you total 12 (See examples below). Each element should be given a width. Column class names tend to have 3 parts:
  1. col
  2. size (xs, sm, md, lg, xl)
  3. # of columns (1, 2, 3,..11,12)
  4. Example: class="col-sm-1"
• Create @media rules for various screen sizes and resolutions. When your browser or device falls within that range, any styles/rules for a specific element listed within the @media rule will override rules for that element listed outside of the @media rule
• If a rule is outside of an @media rule and is not overridden by a specific rule within an @media rule, it will always apply, regardless of screen size / resolution
• Depending on the width of your browser / screen resolution, the styles will change

Block Two – Grid

12 Col 1 Col 11 Col 2 Col 10 Col 3 Col 9 Col 4 Col 8 Col 5 Col 7 Col 6 Col 6 Col

Block Three – Grid

Box 1 Box 2 Box 3 Box 4 Box 5 Box 6 Box 7 Box 8

Block Four – Grid

Name Email Comments Northeastern Illinois University – CS300 © Copyright 2018

ResponsiveCss/css/styles.css

body{ float: left; width: 100%; padding: 0; margin: 0; font-family: GeometriaMedium, calibri, arial, sans-serif; } header{ float: left; width: 96%; height: 75px; padding: 20px 2%; border-bottom: 2px solid black; background: #f7f7f7; z-index: 5; color: #2c3e50; } header .left{ font-size: 36px; } header .right{ font-size: 18px; } .left{ float: left; width: 35%; } .right{ float: right; width: 60%; text-align: right; } .big{ font-weight: 900; text-transform: uppercase; font-family: GeometriaHeavy; } .small{ font-weight: 400; text-transform: lowercase; color: #f1c40f; font-family: GeometriaBold } #container{ float: left; width: 100%; } article{ float: left; width: 90%; padding: 100px 5% 0 5%; height: auto; margin: 0 auto; } h2{ float: left; clear: both; width: 100%; color: #34495e; font-size: 32px; } footer{ float: left; width: 100%; padding: 20px 0; margin-top: 30px; border-top: 5px double black; } .ftrLeft{ padding-left: 2%; } .ftrRight{ padding-right: 2%; } section p{ font-size: 18px; } /* Form Elements */ label{ width: 25%; padding-right: 3%; float: left; font-size: 24px; color: #2c3e50; } input{ float: left; border: 2px solid #34495e; width: 100%; padding: 5px; font-size: 18px; } textarea{ float: left; border: 2px solid #34495e; width: 100%; height: 100px; padding: 5px; font-size: 18px; } .row{ float: left; width: 100%; margin: 10px auto; } .btnRow{ margin-top: 20px; } .btn{ height: 50px; width: 80%; margin: 0 10%; border: 1px solid #2c3e50; } .btn-primary{ background: #2c3e50; color: #f1c40f; } .btn:hover{ background: #bdc3c7; color: #2c3e50; } .btn-default{ background: #FFFFFF; color: #2c3e50; } /* Boxes */ .box{ width: 100%; color: #f1c40f; background: #2c3e50; font-size: 1.5em; text-align: center; font-family: GeometriaHeavy; } .box:hover{ color: #2c3e50; background: #f1c40f; } .shortBox{ height: 50px; line-height: 50px; } .tallBox{ height: 200px; line-height: 200px; } /* Grid */ .row{ width: 100%; margin: 0; float: left; } .col{ float: left; margin: 10px 1%; } @media (min-width: 1000px){ .col-lg-1{ width: 6.33%; } .col-lg-2{ width: 14.66%; } .col-lg-3{ width: 23%; } .col-lg-4{ width: 31.33%; } .col-lg-5{ width: 39.66%; } .col-lg-6{ width: 48%; } .col-lg-7{ width: 56.33%; } .col-lg-8{ width: 64.66%; } .col-lg-9{ width: 73%; } .col-lg-10{ width: 81.33%; } .col-lg-11{ width: 89.66%; } .col-lg-12{ width: 98%; } } @media (min-width: 600px) and (max-width: 999px){ .col-md-1{ width: 6.33%; } .col-md-2{ width: 14.66%; } .col-md-3{ width: 23%; } .col-md-4{ width: 31.33%; } .col-md-5{ width: 39.66%; } .col-md-6{ width: 48%; } .col-md-7{ width: 56.33%; } .col-md-8{ width: 64.66%; } .col-md-9{ width: 73%; } .col-md-10{ width: 81.33%; } .col-md-11{ width: 89.66%; } .col-md-12{ width: 98%; } } @media (max-width: 599px){ .col-sm-1{ width: 6.33%; } .col-sm-2{ width: 14.66%; } .col-sm-3{ width: 23%; } .col-sm-4{ width: 31.33%; } .col-sm-5{ width: 39.66%; } .col-sm-6{ width: 48%; } .col-sm-7{ width: 56.33%; } .col-sm-8{ width: 64.66%; } .col-sm-9{ width: 73%; } .col-sm-10{ width: 81.33%; } .col-sm-11{ width: 89.66%; } .col-sm-12{ width: 98%; } } @media print{ .row{ border-bottom: 2px dotted black; } } /* Colors */ /* translucent red –> rgba(231,76,60 ,.3) midnight blue –> #2c3e50 silver –> #bdc3c7 sunflower –> #f1c40f emerland –> #2ecc71 wisteria –> #8e44ad wetasphalt –> #34495e */