[Resolved] HTML Sample

[Alan]

Hi.

Im fairly new to the type of html code that is used by GeneratePress. Could I please get some feedback about the following html. Is it written okay or could it be written in a better way?

Thanks

<div class="grid-container">
<div class="grid-65 mobile-grid-100 tablet-grid-100">
<p>This column fills 65% of the page width on a desktop computer and 100% width on a tablet or mobile. Percentages must be in multiples of 5% as well as 33% and 66% </p>
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
This column fills 35% of the page width on a desktop computer and 100% width on a tablet or mobile.
</div>
</div>

<hr>

<div class="grid-container">
<div class="grid-50 mobile-grid-50 tablet-grid-100" style="margin-top:200px; margin-bottom:200px;">
This div has 200 px margin at the top and at the bottom
</div>
</div>

<hr>

<div class="grid-container">
<div class="grid-50 mobile-grid-50 tablet-grid-100">
This column fills 50% of the page width on a desktop, 50% of the width on a tablet and 100% width on a mobile. 
</div>
<div class="grid-50 mobile-grid-50 tablet-grid-100">
This column fills 50% of the page width on a desktop, 50% of the width on a tablet and 100% width on a mobile.
</div>
</div>

<hr>

<h3 style="text-align: center; margin-bottom: 40px;">This heading has 40px margin below it</h3>
<div class="grid-container">
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<ul>
	<li>text here</li>
 	<li>text here</li>
 	<li>text here</li>
 	<li>text here</li>
</ul>
</div>
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<ul>
	<li>text here</li>
 	<li>text here</li>
 	<li>text here</li>
 	<li>text here</li>
</ul>
</div>
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<ul>
	<li>text here</li>
 	<li>text here</li>
 	<li>text here</li>
 	<li>text here</li>
</ul>
</div>
</div>

<hr>

<div class="grid-container">
<div class="grid-20 mobile-grid-100 tablet-grid-100">

This column fills 20% of the page width on a desktop computer and 100% width on a tablet or mobile
</div>
<div class="grid-20 suffix-20 mobile-grid-100 tablet-grid-100">
This column fills 20% of the page width on a desktop computer and 100% width on a tablet or mobile. The next column fills 20% of the page width with blank space on all devices.
</div>
<div class="grid-40 mobile-grid-100 tablet-grid-100">
This column fills 40% of the page width on a desktop computer and 100% width on a tablet or mobile
</div>
</div>

<hr>

<div class="grid-container">
<div class="grid-60 mobile-grid-100 tablet-grid-100">
<h4 style="text-align: center; margin-bottom: 15px; font-weight: 400;">This is a  <strong><span style="color:  #ff0000;">Contact form</span></strong> layout</h4>
<h2 style="text-align: center; margin-bottom: 50px;">Contact Us Today </h2>
A contact form could be placed here
</div>
<div class="grid-40 mobile-grid-100 tablet-grid-100" style="margin-top: 140px; padding-left:50px;">
<h2><i class="fa fa-phone fa-2x"></i>   Call Us Now</h2>
<h2 style="color: #ff0000;">123 456 789</h2>
<h4 style="margin-top: 70px;"><i class="fa fa-clock-o fa-2x"></i>   Our Business Hours:</h4>
Monday - Saturday
7.00am - 5.00pm
</div>
</div>

[David]

Hi there,

looks good to me – GP uses the Unsemantic grid for the columns so if you want more detail on that you can read about it here:

https://unsemantic.com

My only suggestion would be to look at replacing the inline styles with your own custom css classes if possible.

[Alan]

Thanks David

Is is necessary to stipulate the widths for each platform? What happens if you dont put anything for mobile or tablet. Does it still view ok and is it responsive? What happens when you write something like this?

<div class="grid-container">
<div class="grid-33">
This column fills 33% of the page width on a desktop.
</div>
<div class="grid-66">
This column fills 66% of the page width on a desktop.
</div>
</div>

I wasn’t sure if I could add inline styles to the grid class like

<div class="grid-50 mobile-grid-50 tablet-grid-100" style="padding-top:50px;">

Do inline styles slow the page down?

Thanks!

Alan

[David]

If you don’t specify tablet and mobile grid sizes then they will just default to 100%, so in your example you can leave them out.

Yeah you can add the inline styles to the grid div and they work as expected.
Speedwise it won’t make a difference. But for maintaining your CSS they can become a nightmare. Consider many pages of inline styled HTML and you want to change the padding for those rows each one has to be edited separately.

Creating a simple framework of your needs would be best for example:

.db-align-center {
    text-align: center;
}

.db-pad-t {
    padding-top: 40px;
}

.db-pad-b {
    padding-bottom: 40px;
}

.db-pad-tb {
    padding-top: 40px;
    padding-bottom: 40px;
}

You can name them what you like as long as they’re unique, so in the example above i prefix them with my initials to make them so.

[Alan]

Consider many pages of inline styled HTML and you want to change the padding for those rows each one has to be edited separately.

Yes thats been a regular problem for me. I have to go and edit lots of pages.

So how do you use several things at a time? Assuming I want some text or maybe an image to be aligned to the center and have 40px of top padding to this div.

<div class="grid-container">
<div class="grid-33">
Place some text here or an image
</div>
</div>

[Alan]

Im not sure if I have this right. This will make put 50px margin top and bottom

.tb-margin50 {
  margin-top: 50px;
  margin-bottom: 50px;   
}

<div class="grid-container">
<div class="grid-33 tb-margin50">
This column fills 33% of the page width on a desktop.
</div>
<div class="grid-66 tb-margin50">
This column fills 66% of the page width on a desktop.
</div>
</div>

This will really good because I can adjust all of my pages in one go. The only thing that I can see being tricky is I will need to make something for each scenario and try and make the names understandable!

[David]

That last reply is the correct way of doing it.

But as you said they can get quickly out of hand and its not the cleanest way of doing it. Better off that you define a section and style that particular section. For example your original contact form HTML looked like this:

<div class="grid-container">
    <div class="grid-60 form-block">
        <h4 style="text-align: center; margin-bottom: 15px; font-weight: 400;">This is a <strong><span
                    style="color:  #ff0000;">Contact form</span></strong> layout</h4>
        <h2 style="text-align: center; margin-bottom: 50px;">Contact Us Today </h2>
        A contact form could be placed here
    </div>
    <div class="grid-40 contact-block" style="margin-top: 140px; padding-left:50px;">
        <h2><i class="fa fa-phone fa-2x"></i> Call Us Now</h2>
        <h2 style="color: #ff0000;">123 456 789</h2>
        <h4 style="margin-top: 70px;"><i class="fa fa-clock-o fa-2x"></i> Our Business Hours:</h4>
        Monday - Saturday
        7.00am - 5.00pm
    </div>
</div>

When it could look like this:

<div class="grid-containe contact-section">
    <div class="grid-60">
        <h4>This is a <span>Contact Form </span>Layout</h4>
        <h2>Contact Us Today</h2>
        A contact form could be placed here
    </div>
    <div class="grid-40">
        <h2>
            <i class="fa fa-phone fa-2x"></i> 
            Call Us Now
            <span>123 456 789</span>
        </h2>
        <h4><i class="fa fa-clock-o fa-2x"></i> Our Business Hours:</h4>
        Monday - Saturday
        7.00am - 5.00pm
    </div>
</div>

And use this CSS to cover most requirements:

/* Center align all content in the section */
.contact-section {
    text-align: center;
}

/* Change any Spans to red */
.contact-section span {
    color: #ff0000;
}

/* Increase the weight of a span inside a H4 */
.contact-section h4 span {
    font-weight: 500;
}

The HTML is much cleaner and CSS is doing what it should do ie. cascade. Follow that logic for each of your sections and define similarities between sections where you can. So lets say theres another section that you want the spans to be red, then this would apply:

.contact-section span, .other-section span {
    color: #ff0000;
}

You can string as many selectors separated by a , as you wish when applying duplicate rules.

For margins between elements try to simplify this also if you can maintain consistency then less rules need to be written

[Alan]

Outstanding support David. Gosh I’ve learnt heaps out of that. What you’ve said makes a lot more sense to me that my current way of doing things. Choosing a section and defining all of the key elements for that section will be a good way of keeping it all organised.

Thanks very much!

[David]

Glad to be of help! Thanks for the feedback.

[Alan]

I just want to check that I am using the grid container correctly. Do you have to use it at the start of every row like this.

<div class="grid-container">
<div class="grid-65 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
</div>

<div class="grid-container">
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
</div>

or only at the start of the page like this?

<div class="grid-container">
<div class="grid-65 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>

<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
</div>

Also is it ok to add a heading after the grid container but before the div class?

<div class="grid-container">
<h2>This is my heading</h2>
<div class="grid-65 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
</div>

Thanks 🙂

[Leo]

If you are adding it inside the content then you shouldn’t need to add grid-container div at all.

It is added by default for the content container.

You can test both cases and see if you notice any differences at all.

[Alan]

Hi Leo 🙂

Sorry Im finding this a bit confusing hence my question. When you say “content container” are you referring to anywhere with the text area when I start writing page content for a new pagein wordpress?

https://www.dropbox.com/s/bwj257kgyac8f9d/Content%20Container.PNG?dl=0

I have written all of my pages in this format.

<div class="grid-container">
<div class="grid-65 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
</div>

<div class="grid-container">
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
</div>

So are you saying that I should edit each page so that its like this?

<div class="grid-65 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-35 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>

<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Some Text Here 
</div>

I originally started adding the grid container to each row because I read here that

All grid units are contained within a top level element, with the class name grid-container. This has a built in “clearfix” so it does not require a clearing element at the end. It also handles centering the grid layout within the page. By default, it has a max width of 1200px

https://unsemantic.com/css-documentation#2-grid-classes

Apparently the grid container also has a clearing element. Is this refering to something else?

Thanks Leo!

[Leo]

Grid-container exists throughout the theme by default:
https://www.screencast.com/t/GMbOBJ1j
https://www.screencast.com/t/pIgZGtXGTR4

I really wouldn’t worry about that article. That’s more for if you want to create a theme.

[Alan]

Ok I think I understand.

So I will edit all of my pages and remove the grid container from every row. Does this also apply to every “section” that I make? Is there anywhere that I have to use a Grid Container?

Thanks

[Alan]

I have tried removing the grid container but when I did it seems to have created a new problem. If I have a row and the content in the left column of that row is deeper than the content in the right column it throws the rest of the page out. How can I fix this?

Also is there a way using html or css to add space between one row and the next. (Approx 80px) I tried adding a <hr> by using this css but it doesnt work. I basically want a thin horizontal line with 40px top and bottom.

hr {
    border:none!important;
	  background: #ccc;
    clear: both;
    height: 1px;
	  padding:0px;
    margin: 80px;
}

This is a sample of the content. The left column in the top row throws out all other rows

<h2>This is a H2 Heading</h2>
<div class="grid-50 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, tempor et ex. Pellentesque faucibus a tortor a vulputate. Nam tincidunt ultricies enim, quis pretium orci. Etiam imperdiet convallis felis, eget blandit turpis finibus nec. Interdum et
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, tempor et ex. Pellentesque faucibus a tortor a vulputate. Nam tincidunt ultricies enim, quis pretium orci. Etiam imperdiet convallis felis, eget blandit turpis finibus nec. Interdum et 
</div>

<div class="grid-50 mobile-grid-100 tablet-grid-100 center">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, tempor et ex. Pellentesque faucibus a tortor a vulputate. Nam tincidunt ultricies enim, quis pretium orci. Etiam imperdiet convallis felis, eget blandit turpis finibus nec. Interdum et  
</div>

<h3>This is a H3 Heading</h3>
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<ul>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
  	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
</ul>
</div>
<div class="grid-33 mobile-grid-100 tablet-grid-100">
<ul>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
  	<li>This is a list</li>
 	<li>This is a list</li>
 	<li>This is a list</li>
</ul>
</div>

<div class="grid-33 mobile-grid-100 tablet-grid-100">

Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, tempor et ex. Pellentesque faucibus a tortor a vulputate. Nam tincidunt ultricies enim, quis pretium orci. Etiam imperdiet convallis felis, eget blandit turpis finibus nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque nunc eros, pharetra in 
</div>

<h2>This is a H2 Heading</h2>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at,  
</div>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, 
</div>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, 
</div>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, 
</div>
<div class="grid-20 mobile-grid-100 tablet-grid-100">
Sed posuere placerat fringilla. Pellentesque feugiat, ipsum sed aliquam iaculis, tortor nunc tincidunt ipsum, non condimentum orci velit eget ligula. Sed urna nisl, pharetra a interdum at, 
</div>

[Author]

Posts