Understanding the grid

1. Correct!

2. Pretty much, yep. They’re mainly used for identifying different sections of the site (eg. Banner, footer etc.)

3. There’s no negative margins used on rows.

As mentioned in #1. classes like site-content & site-footer control the width of the main content area by specifying the width, max-wdith and auto margins.

Classes like col grid_8_of_12 or col grid_4_of_12 control how many columns are used in each row. There’s a max of 12 columns per row.

4. If you want to replace the grid, as well as including a different stylesheet, you’ll need to change all the classes that specify row and columns, in almost every php file. You’ll need to look at the grid that you want to use to work out which classes you need to change, add or remove.

5. There’s no ‘best choice’. It’s really just up to whatever you prefer.

6. No particular reason. They obviously don’t specifically need it.

7. banner doesn’t have clear: both because that div is also using the row class, which does have it. Same goes for home-sidebar.

If you specifically want to use a theme that that has a grid with equal padding on either side of the columns, have a look at the new theme I recently released, Ephemeris. – https://www.ads-software.com/themes/ephemeris/

You can view a demo of it here – https://demo.skyrocketthemes.com/ephemeris/

And if you want more details on the grid that it’s using, you can find that here – https://unsemantic.com/

Hi Anthony,

Thank you for your answers! I appreciate it a lot!

You can read my comments below and I have a few follow up questions (I really hope it’s still doable to read, not to cluttering, with the original questions in the top.)

1. Ok, nice.
2. Ah, ok. I understand. Also, now I see that the terminology I used (“general layout”) makes a (little) difference. Good to know!

3. (NOTICE THE 2 FOLLOW UP QUESTIONS)
Now I see my question is not so clear; It’s a 3-in-1-questions about the 3 ‘parts’ of the grid: indeed, the ‘main area’ as wel as rows as columns.
Yes, I understand there’s no negative margins used. I mentioned the negative margins as an example to compare your implementation and to get confirmed your implementation is ‘just another way’ of implementing the grid. And I think this is indeed what you say in your answer; Do I understand this correct?
And now I understand your implementation is less complicated júst because of not using margins or paddings on rows and columns; Do I understand this correct?

4. (NOTICE THE FOLLOW UP QUESTION)
I understand the consequence of having to change all the classes that specify row and columns. But may I ask again about the “container classes” (site-content, site-footer, site-header, home-sidebar and banner):
Is it ok to keep them and eventually also add another container if another grid uses one?
(NB: Just for the sake of clarity for the reader: the term “container classes” is just one I came up with just for use in my question, it’s nót from the code.)

5. Ok!

6. (NOTICE THE FOLLOW UP QUESTION)
Ok. Do you have an example, for one of them, when ‘position: relative;’ is needed?

7. Clear!

Oh my…! Thank you so much for mentioning your new theme, Ephemeris. I did not know of it’s existence because after a lóng, thoroughly search for a theme I wanted to stick to Quark en “nèver” look at that big WordPress theme database again… And now… you give me a hard time!… ??
This is really, again, a great starter theme you made! Above all, because of the consistently in coding you used.
I had a quick look on the grid. I’m only familiar with the unsemantic grid from reading about it before; Gonna re-read…
Also, I compared the themes some more and I see the differences – like for example the use of microdata and the changes in the folder/file structuring
(N.b. there is no front-page template anymore but I quess this is not a problem, one can always be added ).

Thanks again!
Sandra

3. There’s lots of different ways to implement a grid layout. I like the grid in Quark purely because it’s very lightweight, and easy to use and understand.

Some grids (e.g. Bootstrap) use negative margins, which I really don’t like. There’s lots of other grids though, that don’t, such as the Unsemantic grid I’m using for my new theme. The reason I chose this grid for my new theme is because it’s a little more flexible and allows for some better layout options.

As to which one is best? It’s entirely up to you. It’s like asking someone, which car is best. Everyone has their own opinion.

4. If you remove classes like site-content or site-footer you’re going to pretty much break everything. For example, both of those classes specify the width and max-width of the main content area, along with centering the main content area by setting the margins.

If you want to know if you can remove a class or not, you really need to use some of the browser developer tools or look through the stylesheet to see what styles they’re setting.

6. Here’s an explanation of position:relative and related styles
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

I hope all this helps.

Hi Anthony,

Again, late, so sorry! Although I used your information immediately. Then got in a flow… Still working on my website, also with this information ??
And, yes, it all helpes/helped!

I new questions come up related to youre answers here , I’ll let it know.

Thank you!