0

I am building a small blog based on metalsmith and the PureCSS framework, which has a simple three-row-layout like so:

<div class="pure-g">
    <div class="pure-u-1"> Navbar </div>
    <div class="pure-u-1"> Content </div>
    <div class="pure-u-1"> Footer </div>
</div>

As I am still learning a lot new stuff about CSS and responsive design I am wondering if a navbar should be put into a grids row as well or if it should reside outside of it. The PureCSS documentation states the following:

All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.

This would make it a yes, as a navigation menu is of course visible to the user. However doesn't that make handling of media queries more complicated for the navbar? So where should I put my navbar to, when using responsive grids?

Matthias Güntert
  • 4,013
  • 6
  • 41
  • 89
  • Could you close-voters please add some comments on what is wrong with my question, so I can improve it. Thanks! – Matthias Güntert Oct 28 '19 at 13:56
  • 2
    The question is accruing close votes because this question is primarily opinion-based ("where should I place X"). Opinion-based questions (even ones about best practices) are off-topic on Stack Overflow. – TylerH Oct 28 '19 at 14:06
  • Thanks for clarifying. As someone who is in uncharted waters it's difficult to find out when a question is opinion-based. As a starter in that area I would have expected an answer like the ones provided: 'never put visible content outside a grid, because...' or 'always put ..., because...'. – Matthias Güntert Oct 28 '19 at 14:17
  • 2
    Typically if something "works" in a language, ie it compiles or the browser doesn't yell and say it's invalid, for example, then it's an objective option. Beyond that, e.g. "where should I put X", or "which of these two implementations should I follow for building an API" are going to be opinion-based. Even if most people agree that one option is better than the other, there could be some folks who reasonable think the other option is better. As you can see from this question, you have two answers giving opposite suggestions. Is one "wrong"? No; they're both defensible *opinions*. – TylerH Oct 28 '19 at 14:33
  • Okay, got it. Will keep that in mind – Matthias Güntert Oct 28 '19 at 14:35
  • In short, if your question can be answered with any of two or more possible responses ("yes/no" or "option 1, 2, 3, 4, etc.") and *any* of them could be considered "right" by someone, it's probably going to be opinion-based. There are *some* exceptions where the question is specific enough (e.g. a very well-defined/constrained scenario) and an answer can be backed up by objective test performance for that scenario rather than by opinions or anecdotes, but it is hard to find those. – TylerH Oct 28 '19 at 14:35

2 Answers2

1

No. Navbar should not necessarily be within the grid. The main purpose of using grids is to make the content look better and proper. It also aids the programmer in deciding how many blocks of the grid to allot to a certain element.

However, since a Navbar goes all the way across the page, there is no reason to assign it a grid size. It should always be 100%.

If you are building a blog app, then only your content should be within your grid system so as to properly render the elements. From what I've seen, a footer also generally stretches all the way across the window.

Aditya Prakash
  • 1,549
  • 2
  • 15
  • 31
1

You can use grid. Managing and handling contents and components would be easier and rendering in different browsers would be more stable.

cengiz sevimli
  • 1,461
  • 8
  • 19