Table of Contents for
Web Design Blueprints

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Web Design Blueprints by Benjamin LaGrone Published by Packt Publishing, 2016
  1. Cover
  2. Table of Contents
  3. Web Design Blueprints
  4. Web Design Blueprints
  5. Credits
  6. About the Author
  7. About the Reviewer
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Conventions
  13. Reader feedback
  14. Customer support
  15. 1. Responsive Web Design
  16. Getting familiar with the basics
  17. Using media queries for responsive design
  18. Working with responsive media
  19. Building responsive layouts
  20. Summary
  21. 2. Flat UI
  22. Flat UI color
  23. Creating a flat UI layout
  24. Summary
  25. 3. Parallax Scrolling
  26. Color classes
  27. Using SVG font icons
  28. Getting the fonts
  29. That's no moon!
  30. OMG, it's full of stars!
  31. Clouds, birds, and airplanes
  32. The rocket
  33. Terra firma
  34. Next up, the CSS
  35. Styling the objects with CSS
  36. Styling the ground objects
  37. Writing the JavaScript effects
  38. Setting the row height
  39. Spreading the objects
  40. Spreading the clouds
  41. Loading the page functions
  42. Smoothening the scroll
  43. Updating elements on the scroller
  44. Collecting the moving elements
  45. Creating functions for the element types
  46. Setting the left positions
  47. Creating the rocket's movement function
  48. Finally, moving the earth
  49. Summary
  50. 4. Single Page Applications
  51. Getting to work
  52. Getting the old files
  53. Object and function conventions
  54. Creating utility functions
  55. Working with the home structure
  56. Setting up other sections
  57. Performing housekeeping
  58. Creating a callBack function for the API
  59. Summary
  60. 5. The Death Star Chapter
  61. Dropping in the parallax game
  62. Loading elements from JSON
  63. What can be done in the shared levels service
  64. Editing the home JavaScript
  65. Creating the other pages – credits and leaderboard
  66. Creating the second level
  67. Summary
  68. Index

Color classes

Let's add some color so that you can see this project start to take shape. Therefore, add a style element inside the header block, and inside it, add the color classes to assign as attributes to elements inside the HTML body. These classes come from the Flat UI color section of the previous chapter. The blue shades will work nicely for this project:

<head>
<style>
.black {
background-color: black;
}
.color-0 { 
background-color: #85C4ED;
}	
.color-1 { 
background-color: #58ADE3;
}
.color-2 { 
background-color: #3499DB;
}
.color-3 { 
background-color: #0F85D1;
}
.color-4 { 
background-color: #0665A2;
}
.wet-asphalt {
background-color:#34495e;
}
</style>	
</head>

Next, we need to assign these general color class attributes to some of our elements. Add the black class to the main HTML5 element. To the next section block, stratosphere, add the wet-asphalt class to its first child DIV element. In the following four DIV elements, add the classes color-4, color-3, color-2, and color-1, that order. And in the sky section, add the color-1 class and give all of its direct child DIV elements the color-0 class. In addition, give all of the DIV elements in the space, stratosphere, and sky elements the row class. This should give you the following:

<main class="black">
<section id="space">
    <div id="p0" class="row"></div>
    <div id="p1" class="row"></div>
</section>
<section id="stratosphere" class="wet-asphalt">	
<div id="p2" class="row wet-asphalt"></div>
    <div id="p3" class="row color-4"></div>
    <div id="p4" class='row color-3"></div>
    <div id="p5" class='row color-2"></div>
    <div id="p6" class="row color-1"></div>
</section>
<section id="sky" class="color-1">	
<div id="p7" class="row color-0"></div>
    <div id="p8" class="row color-0"></div>
    <div id="p9" class="row color-0"></div>
    <div id='p10" class="row color-0"></div>
    <div id="p11" class="row color-0"></div>
    <div id="p12" class="row color-0"></div>
    <div id="p13" class="row color-0"></div>
</section>
<section id="objects"></section>
<section id="terra">
    <div id="ground">
        <div></div>
        <div></div>
</div>
</section>
</main>

Next, let's perform some cleanup and add a section selector to the STYLE element. Add a -1EM margin attribute to it.

section { 
margin:-1EM; 
}