Pass parameters from HTML to CSS with Less + 2 design issues

Question

I am designing a page and I am having 3 issues, 2 related to pure .css and one related to less.

My first problem is that I am setting margin: auto and padding: auto on the body tag, and it's not aligning it to the middle (code is shared at the end), second problem, I am having a h1 tag, and in css I am trying to set vertical alignment to middle, but it's not working.

My third and main issue, is that I have multiple divs, and each one will have specific background color and shared properties between the divs, only color will be different. Is there a way to pass the background color name from HTML as I am using handlebars as a templating engine?

I have each div with class .item, and i would like to pass this class the color from html. My code looks like below:

CSS:

html{
  font-size: 12px;
  font-family: Arial, sans-serif;
}

body{
  margin: auto;
  padding: auto;
  /* Why the page isn't centered in the middle */
}

h1{
  background-color: red;
  text-align: center;
  height: 50px;
  vertical-align: /*What to put here to make it centered? */  ;
}
.flex{
      display: flex;
    }
/* How do I pass variables from Html to my mixin so I don't repeat for each color the following code 

.red{
  background-color: red;
}
.green{
  background-color: green;
}
etc.. 

How do I do this below?
*/

.item(@fontColor){
.item{
  width: 30%;

  h3{
    color: grey;
  }
  span{
    font-style: italic;
  }

 }
}

My HTML looks like this:

    <!DOCTYPE html>
<html>

  <head>

    <link rel="stylesheet/less" href="style.less" />
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>

    <div class="flex">
      <div class="item red">
        <h3>
        Project 1
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item green">
        <h3>
        Project 2
        </h3>
        <span>Time: 10:30AM</span>
        </div>

      <div class="item blue">
        <h3>
        Project 3
        </h3>
        <span>Time: 10:30AM</span>
        </div>

      <div class="item yellow">
        <h3>
        Project 4
        </h3>
        <span>Time: 10:30AM</span>
        </div>

      <div class="item navy">
        <h3>
        Project 5
        </h3>
        <span>Time: 10:30AM</span>
        </div>

    </div>
  </body>

</html>

A working example of my code can be found here: https://plnkr.co/edit/ROp2tLBKeSNYJVBCYwUL?p=preview

Thank you for helping me with these three questions.

JanR JanR · Accepted Answer · 2016-12-02T01:49:39

In the future I would suggest not asking so many questions in one post, as it's better and easier to get a response if you do one question per issue.

For now I have answered your questions below, updated plunker at the bottom:

In regards to centering the body you will need to use a div inside your body tag, and give it a fixed width. This allows you to center the div in relation to the body using margin:0 auto.

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>

body{
  /*Your element requires a fixed width to center it in relation to the body*/
  #pagewrap{
   width:800px;
   margin:0 auto;
 }
}

In regards to the H1:

Create an element to sit around the H1 set it's display to table and give it a height. Then use the following css on the H1:

your html becomes:

 <div class="header-container">
     <h1>Hello Plunker!</h1>  
 </div>

your less:

 .header-container{
      background-color: red;
      height: 50px;
      display:table;
      width:100%;
      h1{
        vertical-align: middle;
        text-align: center;
        display:table-cell;
      }
    }

In regards to the colors you don't need a mixin for this:

The less way of doing it would be:

.item{
  width: 30%;

  h3{
    color: grey;
  }
  span{
    font-style: italic;
  }
  &.red{
     background-color: red;
  }
  &.green{
     background-color: green;
   }
 }
}

This will generate the following css:

.item.red {
 background-color: red;
}

etc.

Which means any element with classes item red will render with a red background color, etc for the other colours.

Plunker: https://plnkr.co/edit/WU2pQfwtq6dkLy124tLD?p=preview

Pass parameters from HTML to CSS with Less + 2 design issues

2 Answers