Concept Atomic CSS Study 2

HTML

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <section class="project-bg-yellow-color project-800-height "> <div class="project-max-960-width project-padding-10-top project-auto-margin"> <div class="project-font-30-size project-font-center">Title</div> <div class="project-font-30-size project-font-center">xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxx</div> <div class="project-border-style project-30-width project-float-left project-margin-1-right project-bg-red-color"> <div> <img src="http://fakeimg.pl/288x100/"> </div> <div> <p class="project-font-16-size project-font-center">xxxx xxx</p> <ul> <li>xxxx xxx</li> <li>xxxx xxx</li> </ul> </div> </div> <div class="project-border-style project-30-width project-float-left project-margin-1-right project-bg-blue-color"> <div> <img src="http://fakeimg.pl/288x100/"> </div> <div> <p class="project-font-16-size project-font-center">xxxx xxx</p> <ul> <li>xxxx xxx</li> <li>xxxx xxx</li> </ul> </div> </div> <div class="project-border-style project-30-width project-float-left project-margin-1-right project-bg-yellow-color"> <div> <img src="http://fakeimg.pl/288x100/"> </div> <div> <p class="project-font-16-size project-font-center">xxxx xxx</p> <ul> <li>xxxx xxx</li> <li>xxxx xxx</li> </ul> </div> </div> </div> </section> <div class="project-clear-both"></div> </body> </html>

CSS

/*Concept Atomic CSS Study*/ body{ padding:0; margin: 0;} .project-float-left{float: left;} .project-clear-both{clear: both;} .project-max-960-width{max-width: 960px} .project-auto-margin{margin: auto;} .project-padding-10-top{padding-top: 10%} .project-50-width{width: 50%} .project-30-width{width: 30%} .project-33-width{width: 33.333%} .project-10-height{height: 10px} .project-50-height{height: 50%} .project-100-height{height: 100%} .project-800-height{height: 800px} .project-margin-1-right{margin-right: 1%;} .project-border-style{border-style: solid;} .project-font-16-size{font-size: 16px} .project-font-30-size{font-size: 30px} .project-font-center{text-align: center;} .project-bg-red-color{background-color: red;} .project-bg-blue-color{background-color: blue;} .project-bg-yellow-color{background-color: yellow;}

Javascript