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.
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 keep bumping into this issue where everyone keeps:
a) wanting to wrap HTML5 semantic tags with divs, and
b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.
For example, I am constantly told that this is "incorrect",
<body class="container">
<header class="row">
<div class="col-md-12"> ...
And something like this is more preferable,
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
And here, where the first example I have the column class in the h2 tag
<div class="row">
<h2 class="col-4 feature">Featured Work</h2>
</div>
But "the correct" way is to add yet another div tag to apply the class,
<div class="row">
<div class="col-4 feature">
<h2>Featured Work</h2>
</div>
</div>
I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.
I recommend sticking to the
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
format.
If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.
Since we are talking about markup there is no right answer, but following this convention is strongly recommended.
For consistency
For easy changes to styling & reusability with other projects- this even opens the door to drop-in replacements of css stylesheets from other projects or bootstrap templates. (I have had some surprisingly good results with this).
However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.
I'm trying to adapt bootstrap's standard practices to speed up some of my development but have a quick question related to showing and hiding cols.
I have the following simple layout
<div class="row" id="contactGrid">
<div class="col-sm-2">Sidebar</div>
<div class="col-sm-10">Content</div>
</div>
When I use AngularJS to show/hide the Sidebar col I expect the Content col to stretch the entire width of the container but it doesn't it says at 'col-10'. Do I need to programmically change the class/width to col-sm-12 when I hide the sidebar?
Thanks for your help, I'm sure this is an easy one!
The element with the class col-sm-10 will always have 10/12 of the width of it's parent row. Therefore you need to update it on the fly, when your sidebar changes to hidden. As you already use AngularJS you might have a variable defining if your sidebar should be visible or not. This variable may also define your class conditionally for your content div.
<div class="row" id="contactGrid">
<div class="col-sm-2" ng-show="booleanVariable">Sidebar</div>
<div ng-class="{col-sm-10: booleanVariable, col-sm-12: !booleanVariable}">Content</div>
</div>
Daniel,
Your answer is the reason I'm trying to learn the BS/NG style of UI. It's just knowling where the shortcuts begin and end. To polish it off I used a ternary expression in the ng-class. showFilterSidebar is my hide/show variable. Thanks Again!
<div ng-class="showFilterSidebar ? 'col-sm-10' : 'col-sm-12'">
Yes you need to change class to col-sm-12 and hide for col-sm-2 to avoid problems with floatin .
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.