I have started work on a new project and decided to give Foundation 5 a bash to see what it's like. The first thing I noticed in the documentation when creating forms with horizontal fields is they use a large number of divs for styling. So I tried an example below (second example I tried it without divs):
<!-- Example with extra divs -->
<div class="row">
<div class="large-2 columns">
<label>Contact</label>
</div>
<div class="large-6 columns left">
<select></select>
</div>
</div>
<!-- Example without extra divs -->
<div class="row">
<label class="large-2 columns">Contact</label>
<select class="large-6 columns left"></select>
</div>
These both achieve the same thing with slightly different styling. I was wondering if anyone could explain why I would use the first one (follows foundation documentation) and not the other ... with less html! I am guessing it has something to do with how foundation is used and I am just not up to speed with it enough yet.
Thanks
Having <label> in <div> will give you lot of flexibility in styling. Defining a class for <label> will restrict your styling options. For a <div> you can define height, background color, border, width, background image, gradient fill, margins, padding, and lot more. Whereas giving <label> a class name would not let you do those styling. You could try it.
Basically, a <div> works as a box or container holding some content element in it, and that gives you lot of power and flexibility in styling. Whereas defining classes for content element doesn't give you that flexibility and power.
Related
I'm working in a codebase that is using Bootstrap 3. According to their documentation this is how you create a basic grid structure:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
The code base I'm currently working in applies the grid structure in the following way.
<div class="form-group">
<label class="control-label col-sm-4"> Name<span class="text-danger">*</span> </label>
<div class="col-sm-8">
<input type="text" class="col-xs-10" value="Default" name="panel:expandedContentContainer" id="id9428">
</div>
</div>
I've never seen the grid applied in this way and I just want to make sure this won't cause problems down the road. I have two questions. Is it okay to use '.col-- without a row? And is it okay to put '.col--' directly on elements?
In Bootstrap 3, the .row class will apply a negative margin of ($grid-gutter-width / 2) to both the left and right.
The .col-* classes will apply a padding of ($grid-gutter-width / 2) to both the left and right.
Adding the .col-* class to the sub elements will not necessarily cause you problems, but unless you override the padding on .col-* through your own CSS you will find elements will be indented more that you were perhaps hoping for.
Yes, you can use '.col--' without a row. Then it just isn't vertical align. more information about that: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
And yes it is okay to put 'col--' directly on element. I don't have any bad experience with that.
Recently I have started using BEM in my project to organize CSS but now I am up to the point where i have html like this:
<div class="container">
<div class="container__header">
<div>TITLE</div>
<div>SUBTITLE</div>
</div>
<div class="container__body">
</div>
</div>
As I am more familiar with SMACSS I treat container with header and body as layout related styles. But then content of header on each subpage will differ, sometimes it will have title/subtitle that need different styling sometimes it will be some completly different structure. In terms of SMACSS I would put it in module folder and manage there but now with BEM would be it good practice to now create element such as note-header that will have elements __title and __subtitle?
<div class="container">
<div class="container__header note-header">
<div class="note-header__title">TITLE</div>
<div class="note-header__subtitle">SUBTITLE</div>
</div>
<div class="container__body note-body">
...
</div>
</div>
The problem I have with this approach is that note-header will most of the time probably be empty class just for the sake of naming convention. What is best practice to handle such case
I personally use three types of elements, namely:
l- prefixed layout elements, such as containers, headers, footers.
b- prefixed block elements, such as a menu, a small header inside a layout, etc.
c- prefixed component elements, such as buttons, links etc.
This in conjunction with modifiers say: c-button--white and c-button--black works fine.
Consider the following structure for your example:
<div class="l-container">
<div class="b-note">
<div class="b-note__title">TITLE</div>
<div class="b-note__subtitle">SUBTITLE</div>
<div class="b-note__content">
<div class="c-button">
<button class="c-button__button">Submit</button>
</div>
</div>
<div class="b-slideshow">
<div class="b-slideshow__title"></div>
</div>
</div>
</div>
In my projects, it's vital to make sure general styling is separate. Therefore I try to minimise any blocks / classes being used throughout other elements. This avoids styling drama later on because you're using b-note-header__title somewhere else as well, that requires just a small adjustment, but changing the main rule messes up your other titles.
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
I know that there are many questions about this issue, but nothing worked for me properly.
I need to align my PanelGrid to center(horizontal).
this is my panelgrid
<p:panelGrid styleClass="panelGridCenter">
and my CSS:
.panelGridCenter td,.panelGridCenter tr {
text-align: center;
}
It just aligns the content to center, but not the panelGrid
The JSF <p:panelGrid> component renders a HTML <table> element which is by default a block level element. To center the block level element itself, you should set its horizontal margin to auto instead of attempting to center its inline contents.
.panelGridCenter {
margin: 0 auto;
}
See also:
Center a div in CSS
The above answer is technically correct but also incomplete.
If you want to center something like a div, the above technique of playing with the left and right margin as auto will work, provided that your DIV has limited width.
E.g. For you to start being any effect you would have to put something like a width=60%.
And then, once you realize you need to play with fixed widths... you immediately are prompted to the next question:
So what exactly should I type in as my fixed width?
That is why I believe the better answer for this question is:
CSS techniques like the one above, are OK for the small details on a web page.
But your coarse grained approach for centering anything on a web page should be to make use of a grid system.
Most grid systems use 12 cells.
If for example your grid system would be by default make 12 cells = 100% width.
You could center something by, for example placing your content to be centered in cells [5-8] leaving out as centurion space cells [1-4] and cells [9-12].
Here is an example based in prime faces grid system:
<h3 id="signInTitle" class="first">Sign in - FIXME - i18n</h3>
<form id="loginFormOld" (ngSubmit)="onLoginFormSubmit()">
<!-- (a) Start a grid system-->
<div class="ui-g ui-fluid">
<!-- (b) Eat the first four cells of the grid -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (c) In the center location of the grid put in the Login form -->
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
<input id="emailInput" pInputText type="email" placeholder="Email" [(ngModel)]="eMail" name="eMail">
</div>
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-key" aria-hidden="true"></i></span>
<input id="passwordInput" pInputText type="password" class="form-control" placeholder="Password" [(ngModel)]="password" name="password">
</div>
</div>
<!-- (d) Eat the rest of the first row of the grid without setting any contents -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (e) Start the second row and eat the first four cells -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (f) Position a form submit button on the fifth cell -->
<div class="ui-g-12 ui-md-1">
<button id="loginSubmit" pButton type="submit" label="Submit"></button>
</div>
</div>
</form>
The comments on the above form should make it pretty clear what I meant above.
The grid system will normally offer CSS classes to allow your UI to be working across multiple form factors of devices, although ... on this regard I am of the opinion that you can not make a good mobile UI using a desktop UI nor a good desktop UI using a mobile UI.
On my opinion you can get a good Tablet/Desktop UI cooked up, but you should write pages from scratch with the minimal an necessary contents for mobile. But that is a different discussion ... just to say, that the flex grid css classes will only take you so far.
A lot of potential in theory, much better than hard coding some arbitrary fixed length on your div elements ... but not a silver bullet for all of your problems either.
In case if you want right align
.rightAlign{
margin-left: auto;
}
I'm using Twitter Bootstrap, but I'm having slight difficulties on a particular element.
Here is a 'Scaffolding' markup already provided by the interface, which I will use as an example.
<div class="row">
<div class="span6">
Level 1 column
<div class="row">
<div class="span3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Also, to help this case... There are 'Responsive utility classes', which you can check out here - http://twitter.github.com/bootstrap/scaffolding.html#responsive
So, what I am looking to do is simply change the class="span3" to, for example, class="span6" when I am using the 'responsive utility class' .visible-tablet.
Initially, I thought that it would miraclely automatically change to the 'max-width', but it didn't, unfortunately.
As #scumah pointed out, you're not going to change the class using CSS. For that you would use JS.
However, if you want to change the characteristics of a class (in this case span3) when it is contained in an element with a given class (here visible-tablet) that's just a matter of getting your CSS selectors working:
.visible-tablet .span3 {
width: 352px;
}
This would change the span3 to be identical to what is, by default, the width of a span6.
JSFiddle
However, all this seems a bit hackish, so you might want to reconsider what essentially you're trying to accomplish.