I am learning to write responsive pages using Foundation and I wonder if it is better to use Foundation as a template (for some top divs) or to use foundation row/column size-number classes all the way?
What I mean is should I write my HTML like this:
<body>
<div class="row">
<div class="small-8 column">
<div style="display: inline; width: 33%;"></div>
<div style="display: inline; width: 33%;"></div>
<div style="display: inline; width: 33%;"></div>
</div>
<div class="small-4 column">
<div style="display: inline; width: 33%;"></div>
<div style="display: inline; width: 33%;"></div>
<div style="display: inline; width: 33%;"></div>
</div>
</div>
</body>
Or like this:
<body>
<div class="row">
<div class="small-8 column">
<div class="row">
<div class="small-4 column></div>
<div class="small-4 column></div>
<div class="small-4 column></div>
</div>
</div>
<div class="small-4 column">
<div class="row">
<div class="small-4 column></div>
<div class="small-4 column></div>
<div class="small-4 column></div>
</div>
</div>
</div>
</body>
This example is trivial just to show what I am asking for. My question is related to deeper nestings (like 5+ levels of row>column).
The second approach is definitely better because:
Flexibility: size-number classes aren't only about floating layout, it's primary about responsivity. You are able to add some medium or large classes later and make different layout for different screens (this is not only about columns width but also about ability to change the position when a window is resized). Even if you don't suppose you need it now, who knows about future
Uniformity: size-number classes (and the column one) aren't only about sizing and positioning. They are also used for the uniform look and feel because they are defined by a complex style sheet. If you need to redefine the style you redefine the style for the whole applicatin in the same time so you don't overlook any. This is about spaces, margin, padding and much more.
Clarity: it is much more better to write CSS separatly in its files than styling in the code directly. Classes can be reused and CSS file is the first place where you looking for the style definitions (no matter if you are the new developer in the team or if you read your own code after a long time).
Compatibility: Foundation developers know their code and it there is much more chance that new version of the Foundation will be compatible with the old Foundation version better than with your own code.
Related
I'm currently building my first website in bootstrap 4, and I have some general questions to either which I can't find a good response to or want to know how to handle something... Here it goes:
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="min-height: 0.5rem; background-color: #FBB040"></div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #939598"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #D1D3D4"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #28AB9E"> </div>
</div>
<div id="outter-div" class="row">
<div id="inner-div-1-logo" class="col-md-3 test"><img src="images/logo.png" class="mx-auto d-block" alt="helloworld" style="width:200px"></div>
<div id="inner-div-1" class="col-md-8">
<div class="row contact-bar text-md-right bg-success"> hello world -- needs to be right-aligned</div>
<!--<div id="contact-bar" class="row bg-success contact-bar"> Call Us # (888) 888-8888 | info#email.com | Customer Portal </div> -->
<div id="nav-bar" class="row nav-bar bg-primary"> nav-bar </div>
</div>
</div>
</div>
I'd love hear some feedback on the approach I am taking to building this based on the code above. Am I headed in the correct direction here? Anything you would do different?
Thank you.
Please use below link to read about Grid System Rules.
Visit https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
After reading the rules you can get started with building your own Html pages using examples given in below link
https://getbootstrap.com/docs/4.0/examples/
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
It depends on you. You can use .container and .container-fluid according to your needs. But you can not use in the order shown .container > .row > .column > .container-fluid.
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right-align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
Yes it'll be aligning right on medium devices only. If you want it for other devices just use .text-right
For reference go through this link https://getbootstrap.com/docs/4.0/layout/grid/
This question already has answers here:
Responsive web design is working on desktop but not on mobile device
(4 answers)
Closed 5 years ago.
Good day,
I have a little gallery section on a web page where I make use of a css grid. it works perfectly fine on a normal web browser and when i scale it down i have managed to have it adjust as i wish using Media Queries (one image after the other), To my disappointment this didn't work when viewing on a mobile devise.
This is my first web site i have created so i expected issues. but I am now stuck on this one.
I need the images to arrange themselves below each other on a mobile browser. How would I go about this? see below html & css, the webpage is redneckrebellion.co.za if you want to see what I'm talking about or see https://codepen.io/underlight/pen/eyYLBa.
<content class="main-body">
<div class="main-content">
<div class="portfolio">
<div class="portfolio-item medium-one">
<div class="description">
<h1 class="text">Coffee Table</h1>
<p class="text">Custom Union Jack Coffee Table</p>
</div>
</div>
<div class="portfolio-item medium-two">
<div class="description">
<h1 class="text">Laser Cut Logo</h1>
<p class="text">Redneck Rebellion Laser Cut Logo</p>
</div>
</div>
<div class="portfolio-item wide-one">
<div class="description">
<h1 class="text">Custom Desk</h1>
<p class="text">Custom Desk Built To Clients Design</p>
</div>
</div>
<div class="portfolio-item tall">
<div class="description">
<h1 class="text">Container Cupboard</h1>
<p class="text">Custom Cupboard Built For Lillimex</p>
</div>
</div>
<div class="portfolio-item wide-two">
<div class="description">
<h1 class="text">Custom Shelf</h1>
<p class="text">Custom Shelf Built For Kids Car Themed Bedroom</p>
</div>
</div>
</div>
</div>
thanks!
There are many ways of doing this, and, based on your question, I'm assuming that these divs are being displayed horizontally already? Which means that they are using the display property of inline or inline-block, or, using float already. If you want to have something that will be re-usable (like Bootstrap framework), you can do something like this:
#media screen and (max-width: 480px) {
.medium-one, .medium-two .wide-one .tall .wide-two {
display:block;
}
}
Also, I would highly recommend using a library that is already made for something like this, such as Bootstrap
The simplest way is to surround your .portfolio-item with a media query like this:
#media(min-width: 500px) {
.portfolio-item {
margin: 10px;
box-shadow: 1;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid white;
border-radius: 3%;
}
}
The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
enter code here
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
I'm trying to create a floating panel. It needs be detached from the grid and fill the entire height of the document, on the left side like SO:
My experiment so far:
<div class="row left">
<div class="small-3">
<div class="panel">
Panel HTML
</div>
</div>
</div>
<div class="row">
<div class="small-6 columns"><div class="panel">Main - Content</div></div>
<div class="small-6 columns"><div class="panel">Main - Content</div></div>
</div>
Produce the following:
I'm not sure what is the best practice when using Foundation, and could not find a reference in their docs. Appreciate the help :)
here if found the issue https://github.com/zurb/foundation/issues/226
try this jquery plugin to sync height https://github.com/ginader/syncHeight ( i didnt tried it yet)
this guy found something of a solution for the full height problem :
https://gist.github.com/joanhard/6375966
It is also javascript based, but it's only a line of javascript compare to the use of an extra plugin...
You can set position: fixed; on the div you want to have max-height, then set its height to a 100%. I have created a quick fiddle where you can see it in action.
The HTML:
<div class="row">
<div class="small-4 columns" id="sidebar">
Fixed full height
</div>
<div class="small-8 columns">
Other Content
</div>
</div>
The CSS:
#sidebar{
position: fixed;
height: 100%;
background: #222;
color: #FFF;
padding: 5px;
}
If you're using jQuery in your project, I wrote a quick wrapper for jQuery.syncHeight, which makes it easier to use, with multiple instantiation:
https://gist.github.com/replete/5728123
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 have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.