WEB DEVELOP
__MACOSX/._ResponsiveCss
ResponsiveCss/index.html
NEIU CS300 HTML & CSS Responsive DesignBlock 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:
- col
- size (xs, sm, md, lg, xl)
- # of columns (1, 2, 3,..11,12)
- 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 ColBlock Three - Grid
Box 1 Box 2 Box 3 Box 4 Box 5 Box 6 Box 7 Box 8Block Four - Grid
Name Email Comments Northeastern Illinois University - CS300 © Copyright 2018__MACOSX/ResponsiveCss/._index.html
ResponsiveCss/.DS_Store
__MACOSX/ResponsiveCss/._.DS_Store
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: 500px) 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: 499px){ .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%; } } */ /* Colors */ /* translucent red --> rgba(231,76,60 ,.3) midnight blue --> #2c3e50 silver --> #bdc3c7 sunflower --> #f1c40f emerland --> #2ecc71 wisteria --> #8e44ad wetasphalt --> #34495e */
ResponsiveCss/css/fonts.css
@font-face{ font-family: GeometriaBold; src: url(../fonts/Geometria-Bold.ttf); } @font-face{ font-family: GeometriaLight; src: url(../fonts/Geometria-Light.ttf); } @font-face{ font-family: GeometriaHeavy; src: url(../fonts/Geometria-Heavy.ttf); } @font-face{ font-family: GeometriaThin; src: url(../fonts/Geometria-Thin.ttf); } @font-face{ font-family: GeometriaMedium; src: url(../fonts/Geometria-Medium.ttf); }