Transferring parameters from HTML to CSS using Less and addressing two key design problems

Question

Transferring parameters from HTML to CSS using Less and addressing two key design problems

I am currently in the process of designing a webpage, and I've encountered three distinct issues - two are related to pure .css, while one is related to less.

Firstly, I have set margin: auto and padding: auto on the body tag, but it's not centering as expected (see code snippet below). Secondly, I'm struggling with aligning a h1 tag vertically in the middle using css.

The main issue, however, is handling multiple divs each with a unique background color and shared properties. Is there a way to pass the background color name from the HTML when using handlebars as a templating engine?

Each div has a class of .item, and I would like to specify the color in the HTML code. My current CSS code looks something like this:

CSS:


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

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

h1 {
  background-color: red;
  text-align: center;
  height: 50px;
  vertical-align: /* How can I vertically center it? */
}
.flex {
  display: flex;
}

/* How can I avoid repetitive color styling for .item classes by passing variables from HTML to my mixin? */

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

    h3 {
      color: grey;
    }

    span {
      font-style: italic;
    }
  }
}

This is what my HTML code looks like:


<!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 live example of my code can be found here: https://plnkr.co/edit/ROp2tLBKeSNYJVBCYwUL?p=preview

Thank you for assisting me with these queries.

css less

Answer 1

Answer №1

To improve the efficiency of receiving responses, it is advisable to ask one question at a time rather than multiple questions in a single post.

Below are the answers to your queries along with an updated plunker link at the end:

If you want to center the body content, create a div inside the body tag with a fixed width. You can then use margin: 0 auto to center the div within the body.

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

body{
  #pagewrap{
   width:800px;
   margin:0 auto;
 }
}

For styling the H1 heading:

Add a wrapping element around the H1, set its display to table, specify a height, and apply the following CSS to the H1:

Update your HTML as follows:

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

Update your LESS styles as below:

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

To define colors without using a mixin, leverage Less like this:

The code snippet would be:

.item{
  width: 30%;

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

This will result in generated CSS for different colors based on assigned classes (e.g., .item.red applies red background).

Check out the updated Plunker here: https://plnkr.co/edit/WU2pQfwtq6dkLy124tLD?p=preview

Answer 2

To improve the efficiency of receiving responses, it is advisable to ask one question at a time rather than multiple questions in a single post.

Below are the answers to your queries along with an updated plunker link at the end:

If you want to center the body content, create a div inside the body tag with a fixed width. You can then use margin: 0 auto to center the div within the body.

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

body{
  #pagewrap{
   width:800px;
   margin:0 auto;
 }
}

For styling the H1 heading:

Add a wrapping element around the H1, set its display to table, specify a height, and apply the following CSS to the H1:

Update your HTML as follows:

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

Update your LESS styles as below:

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

To define colors without using a mixin, leverage Less like this:

The code snippet would be:

.item{
  width: 30%;

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

This will result in generated CSS for different colors based on assigned classes (e.g., .item.red applies red background).

Check out the updated Plunker here: https://plnkr.co/edit/WU2pQfwtq6dkLy124tLD?p=preview

Answer 3

Answer №2

To create a perfectly centered content section, you'll need to define a width for your content. Follow JanR's advice by using a wrapper element, specifying a width (or max-width for responsiveness), and applying margin: 0 auto;. Remember that padding: auto has no effect in this context.

Regarding your H1 element, consider your objectives - there are various approaches such as the table trick or setting height and line-height properties. Keep in mind the default margin applied to H1 elements. Flexbox is another option to explore based on your specific layout requirements.

As for your color styling concern, remember that HTML classes cannot be directly passed to CSS. Stick to simple class names without complicating matters with Less or similar tools. Keep it straightforward! :)

Answer 4

To create a perfectly centered content section, you'll need to define a width for your content. Follow JanR's advice by using a wrapper element, specifying a width (or max-width for responsiveness), and applying margin: 0 auto;. Remember that padding: auto has no effect in this context.

Regarding your H1 element, consider your objectives - there are various approaches such as the table trick or setting height and line-height properties. Keep in mind the default margin applied to H1 elements. Flexbox is another option to explore based on your specific layout requirements.

As for your color styling concern, remember that HTML classes cannot be directly passed to CSS. Stick to simple class names without complicating matters with Less or similar tools. Keep it straightforward! :)

Transferring parameters from HTML to CSS using Less and addressing two key design problems

Answer №1

Answer №2

Similar questions

Adjust the styling of the minimized file input to work like a download button when the window is resized

Repairing the formatting of the content inside a dynamically growing div

Interactive CSS animation with a single click

Positioning Elements Absolutely in Relation to List Items

Developing an editor

Placing a static navigation bar at the top of the form

Ways to eliminate the extra space in a dropdown menu

Ways to customize the appearance of a search box

Utilizing FontAwesome icons instead of png images as a visual source

Enhancing elements with fade-in effects upon hovering

The PHP Admin Panel conveniently shows the Edit post form right at the bottom of the page

What is the solution for getting `overflow-x` to function in place of `overflow-y`?

What is the best approach for scaling @material-ui Skeleton in a grid row with variable heights?

Minimize the size of the MUI date selector widget

Creating visually appealing Jquery-ui tab designs

Animating lines with JQuery beneath navigation links

Showing formatted JSON in the view using ASP.NET MVC

What can be done to prevent an image from vanishing along with its containing div?

Tips for creating a unique scroll page arrow button with adjustable thickness?

Google Map in Bootstrap FullScreen Mode Not Mobile-Friendly