/************************************************/
/*
Software Design: Define the Generic Rule ....
*/
html,body { box-sizing: border-box; width: 100% }
body { max-width: 100%; margin: 0 auto }
*:before, *,
*:after { box-sizing: inherit }
/************************************************/
/* easy RESPONSIVE|FONT|NESS */
/************************************************/
/* Responsive font: y = mx + b
FONTSIZE
minimum : 10px on 320px displays and below
sizing : +1px every 160px display width
scale to: 16px on 1280px displays
=> Starting with 8px, add 1px to font-size each
160px of display width.
*/
html { font-size: calc(0.00625 * 100vmin + 8px) }
body { font-size: 1rem; line-height: normal } /* resets font after resize */
/* (That's it... Yes way! You saw it here first) */
/************************************************/
/* BONUS 1: BASIC FLEXBOX APP STRUCTURE */
/************************************************/
/*
Can be any kind of container element (div, ul, table, etc.)
In this case they are: main, header, article and footer
(plus section and item for this demo)
*/
/* flexbox */
main, header, article, section, item, footer { display: flex } /* Flexbox rules! */
main { justify-content: space-between; flex-direction: column } /* quirks below */
article { flex: 1; flex-flow: row wrap } /* fill all available space */
header, footer { justify-content: center; align-items: center } /* hor/vert alignment */
/* flexbox optional rule */
article { align-content: flex-start; align-items: flex-start }
section { flex-flow: row wrap; } /* A row of columns */
item { flex-flow: column wrap; /* A column of row */
flex: 1 1 20em } /* Nice minimal width for smaller displays */
/* generic sizing */
html, body { width: 100%; height: 100% } /* plus below 'min-,max-' quirk */
main, header, footer, article { width: 100%; max-width: 100%;
min-height: 100% } /* 'min-,max-' cross-browser quirks */
section, item { width: 100% } /* fill all given space */
/* generic styling */
html { background-color: #eee; color: hsla(0,0%,0%,.87) }
body { margin: 0; padding: 0; cursor: default } /* We'll take care of that, thank you! */
article { max-width: 85%; margin: 0 auto; } /* center in 'main' */
/*
USAGE:
<main>
<header>some header</header>
<article>
<section>
<item></item>
<item></item>
</section>
<section>
<item></item>
<item></item>
</section>
</article>
<footer>some footer</footer>
</main>
*/
/************************************************/
/*
.... and Anticipate the Exception
*/
/************************************************/
/* Content RULES */
/************************************************/
/* Please, don't use black on green, it is hurtfull (and hidious) */
/* specific styling */
header , footer { min-height: 3em; background-color: hsla(31,31%,15%,.6); color: white }
header > *, footer > * { flex: 1 1 20em; margin: 0 1em; text-align: center }
h2,h3,h4 { color: hsla(0,0%,0%,.54)}
item { margin: 1em; padding: 1em;
background: hsla(0,0%,100%,.7);
border: 1px solid hsla(0,0%,50%,.1); border-radius: .5em }
ul { padding: 0 0 0 2em }
li span { color: hsla(205,96%,26%,.87);
font-family: monospace; font-weight: bold }
a { text-decoration: none; color: white; cursor: pointer }
#header--advert { color: hsla(0,0%, 0%,.87); font-size: 1.5em; text-align: right }
#header--advert span { color: hsla(0,0%,100%,.87) }
#section--courses {}
#courses-item--core { align-items: center }
#section--tracks {}
#tracks-item--business {}
#tracks-item--it {}
#tracks-item--web {}
/************************************************/
/* BONUS 2: LETTERPRESS font weight */
/************************************************/
/* Ever so slight font touch-up */
li { text-shadow: .1px .1px .3px hsla(0,0%,25%,.1),
-.1px -.1px .1px hsla(0,0%,25%,.1) }
li span { text-shadow: none } /* already bold */
/************************************************/
/* easy Debugging */
/************************************************/
/* Just for easy debugging, add/remove slash at start to see effect */
/* { outline: .001em dashed black; transition: all .5s ease-in-out } /**/
<main>
<header>
<div id="header--advert">some header</div>
</header>
<article>
<section id="section--courses">
<item id="courses-item--core">
<h2>
Each track requires the following 30 hours of core courses:
</h2>
<ul>
<li><span>CPSC 130 </span>Introduction to Computer Science</li>
<li><span>CPSC 131 </span>Computer Programming and Computer Science Concepts I</li>
<li><span>CPSC 231 </span>Computer Programming and Computer Science Concepts II</li>
<li><span>CPSC 290 </span>Data Structures</li>
<li><span>CPSC 301 </span>Computer Architecture</li>
<li><span>CPSC 304 </span>Operating Systems</li>
<li><span>CPSC 322 </span>Software Engineering</li>
<li><span>CPSC 341 </span>Networking</li>
<li><span>CPSC 430 </span>Database Design and Implementation</li>
<li><span>CPSC 460 </span>Senior Seminar</li>
</ul>
</item>
</section>
<section id="section--tracks">
<item id="tracks-item--business">
<h3>The Business Information Systems Track consists of the 30-hour
core plus the courses listed below.</h3>
<h4> Required Courses:</h4>
<ul>
<li><span>ACCT 211 </span>Principles of Accounting I</li>
<li><span>BUS 240 </span>Statistics for Business</li>
<li><span>MATH 140 </span>Introduction to Statistics</li>
<li><span>BUS 342 </span>Management Principles</li>
<li><span>MATH 210 </span>Discrete Mathematics</li>
</ul>
<h4>Any two courses from among:</h4>
<ul>
<li><span>BUS 311 </span>Marketing</li>
<li><span>BUS 332 </span>Business Finance</li>
<li><span>BUS 371 </span>Management of Information Systems</li>
<li><span>BUS 423 </span>Operations Management</li>
<li><span>BUS 445 </span>Business Analytics: Management Science</li>
</ul>
</item>
<item id="tracks-item--it">
<h3>The Information Technology Track consists of the 30-hour
core plus the courses listed below.</h3>
<h4> Required Courses:</h4>
<ul>
<li><span>CPSC 313 </span> Analysis and Design of Algorithms</li>
<li><span>MATH 140 </span> Introduction to Statistics</li>
<li><span>MATH 303 </span> Probability and Statistics I</li>
<li><span>MATH 201 </span> Calculus I</li>
<li><span>MATH 202 </span> Calculus II</li>
<li><span>MATH 210 </span> Discrete Mathematics</li>
</ul>
</item>
<item id="tracks-item--web">
<h3>The Web Development Track consists of the 30-hour
core plus the courses listed below.</h3>
<h4> Required Courses:</h4>
<ul>
<li><span>ART 271 </span>Graphics I: Visual Design</li>
<li><span>CPSC 346 </span>Web Programming: Client Side</li>
<li><span>CPSC 347 </span>Web Programming: Server Side</li>
<li><span>CPSC 411 </span>Server Operating Systems: LINUX Systems</li>
<li><span>MATH 140 </span>Introduction to Statistics</li>
<li><span>MATH 210 </span>Discrete Mathematics</li>
<li><span>COMM 230 </span>Mass Media and Society</li>
<li><span>MDCM 351 </span>Web design & Social media</li>
</ul>
</item>
</section>
</article>
<footer>
<div id="footer--copyright">Copyright © - 2016 by <a href="javascript:void(0)">me!</a></div>
</footer>
</main>