I've created a typical layout using CSS Grid with this structure:
<div class="dashboard">
<header></header>
<nav></nav>
<div class="main-header"></div>
<div class="main-content"></div>
<div class="main-footer"></div>
</div>
Now, due to our environment (PHP, Smarty Templates, AngularJS), I would like to split these up into separate components. But here is the issue… I can't wrap an element around grid elements without breaking the layout:
<div class="dashboard">
<header></header> <!-- component -->
<nav></nav> <!-- component -->
<div class="wrapper"> <!-- component -->
<div class="main-header"></div>
<div class="main-content"></div>
<div class="main-footer"></div>
</div>
</div>
I've experimented with nesting another grid inside of 'wrapper', but that introduces more layout issues, such as improper scrolling. (…and nesting grids doesn't sound like a good idea).
I am wondering if there is some CSS to "pass through" the 'wrapper' div to maintain the css grid properties?
Or is there another way to handle this situation?
Thanks!
Related
I'm trying to learn how the Blazor WebAssembly (blazorwasm) template works.
I can't see what lays out the MainLayout.razor
<div class="sidebar">
<NavMenu />
</div>
and
<div class="main">
<div class="top-row px-4">
About
</div>
as inline elements.
I'm even more puzzled when I insert
<div>
<p>Why is this inline?</p>
</div>
between <div class="sidebar"> and <div class="main"> because that's also laid out as an inline element.
I understand <div> to be a block-level element that always starts on a new line.
I've searched the solution generated from the Blazor WebAssembly (blazorwasm) template and looked in the MSDN Blazor Layouts doco but can't find anything that lays out the block level <div>s as inline elements.
Can anyone tell me what I'm missing?
They are not laid out 'inline'.
The Blazor templates use css. In net5 the MainLayout.razor.css sets up the surrounding <div class="page"> to use FlexBox and flex-direction: column; to achieve the overall layout.
Your <div> ... </div> is positioned as a flex column because of its parent element.
There is a lot of tutorial about bootstrap elements.
But I want to know where I must use nav/header/container/row/well/panel/section
for example..Do it needs use row for column 12?
1- currently I do it this way:
<body>
<div class="container-fluid"> /*only for top navbar*/
<nav>
</div>
<div class="container"> /* for body */
<header></header>
<main class="row">
<div class="col-md-2"></div>
<div class="col-md-5"></div>
<div class="col-md-5"></div>
</main>
<footer class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</footer>
</div>
</body>
Is it true?
2- Is this format true or necessary?
<div class="row">
<div class="col-md-12"></div>
</div>
3- which one is standard?
<div class ="well">
<div class="row"> <div class="col-md-*"></div> </div>
</div>
or
<div class ="row">
<div class="well"> <div class="col-md-*"></div> </div>
</div>
4- dose it need use "container" class for all section or only for parent section?
for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".
for 2:- this is true. method also accessory.
for 3:- first option is correct.
for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.
All options you mentioned are correct.
However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/
But I want to know where I must use nav/header/section/footer
Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.
There are many informations to this in the web, here is a reference
All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.
Here you want to use multiple containers and not one for everything (Fiddle)
Hope this helps you a bit.
What is the best practice for implementing the bootstrap 3 grid? There are two options, via classes in html and via less mixins.
Using bootstrap classes in html and bootstrap.css (which seems to be the standard):
<div class="container">
<div class="row">
<div class="column-md-6 column-xs-8">
<p>test</p>
</div>
<div class="column-md-6 column-xs-4">
<div class="row">
<div class="column-md-8 column-xs-6">
<p>Another test</p>
</div>
<div class="column-md-4 column-xs-6">
<p>Yet another test</p>
</div>
</div>
</div>
</div>
</div>
Using LESS and bootstrap mixins and appropriate html structure:
<div id="maincontent">
<div id="maincontentarea">
<div id="blogarticles">
<p>test</p>
</div>
<div id="whatsnew">
<div id="whatsnewarea">
<div id="whatsnewheading">
<p>Another test</p>
<div>
<div id="whatsnewlist">
<p>Yet another test</p></div>
<div>
</div>
</div>
</div>
<div>
and the corresponding LESS:
#maincontent{
.container();
#maincontentarea{
.make-row();
#blogarticles{
.make-md-column(6);
.make-xs-column(8);
}
#whatsnew{
.make-md-column(6);
.make-xs-column(4);
#whatsnewarea{
.make-row();
#whatsnewheading{
.make-md-column(8);
}
#whatsnewlist{
.make-xs-column(6);
}
}
}
}
}
It sounds like a nice idea to have a .LESS file simply using the bootstrap mixins to define the structure, but is that not essentially duplicating the element structure in the less file which is already defined in LESS. Which one is more maintainable?
Personally i think using Bootstrap's class will give you a maintainable structure. Otherwise you could prefer a more semantic solution. Note your appropriate html structure don't have added value in my opinion and is not semantic.
Using and implementing Bootstrap in a more semantic way won't be always easy:
Example of problem with the grid to have to solve: How can I create multiple rows using semantic markup in Bootstrap 3?. Also Twitter's Bootstrap 3.x semantic mobile grid and especially pay attention to the answer of #Gravy (https://stackoverflow.com/a/18667955/1596547).
Also interesting : How to use sass to properly avoid embedding twitter bootstrap class names on HTML
When using Twitter bootstrap's grid system, should every grid column div (with the class span*) have span* class as its only class, like:
<div class="row">
<div class="span4">
<div class="sidebar">...</div>
</div>
<div class="span8">
<div class="content">...</div>
</div>
</div>
Or can we mix span* class with other classes, like:
<div class="row">
<div class="span4 sidebar">
...
</div>
<div class="span8 content">
...
</div>
</div>
.sidebar and .content are CSS rules and not simply for Javascript/CSS rule traversal or used as IDs.
It depends on what those other classes do.
If .sidebar and .content are used exclusively to scope CSS inside those divs, or if they are labels for javascript traversal, then you are probably fine using them.
However, if you have rules attached to these classes that impact layout such as width, height, margin, and so on, you may experience problems.
I know the very basics of CSS and recently went on with using CSS frameworks because it made my life much easier. I have a question in terms of grid systems, am currently using zurb foundation 3 (http://foundation.zurb.com/)
The problem am facing is mostly when creating a row i cannot give it a specific height. It seems to me like grid systems are designed to use as it is, I read in different places that it is not recommended to try and change the height of a row and to just place items inside it as it is.
In my project, I have a content area whereby I want to display a fixed height and width div but its not working for me. so, can any one advise me what should i do? below is my html code
update: edited the html
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
</div>
Your 'style' declarations are wrong
style="height=6em; width:5em;
should be
style="height:6em; width:5em;"
NOTE: you used = instead of : AND you missed the closing quotation "
And you should not use inline styles - separate to a .css file and target them by class
<html>
<head>
<link rel="stylesheet" type="text/css" href="/foundation3/stylesheets/foundation.css"/>
</head>
<body>
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
</div>
</body>
</html>
NOTE: I have not declared a DOCTYPE here - this is barebones. It does work I have tested it in Firefox and Chrome. Just stating it does not work is not helpful OP