I am using the boostrap CSS framework for one of my personal projects.
By default all the col- classes have a padding on both sides.
Which is good for some components.
But there are places where I don't want this extra padding.
So I usually just take a unique class (say containerName) being used to style that element and then-
.containerName {
padding-right: 0;
padding-left: 0;
//and whatever other css is required
}
I don't want to keep writing this again and again. So I decided to write a simple mixin just for that.
%removePadding {
padding-right: 0;
padding-left: 0;
}
and then use extend on .containerName
.containerName {
#extend %removePadding;
//and whatever other css is required
}
Is this an overkill?
Should I just add another class to those elements which has these two rules?
What is the best way to handle this?
I think you should use ".removePadding" as a class, once. Because in any case, you need to check which divs you want the padding, and which divs you don't. So if you just add ".removePadding" class to your div, right after your col-... class, you will have the same control, and more important than that, you won't be expanding your CSS file. And on the other hand, you can unterstand what is going on just by looking at your HTML file. Like common ".clearfix" classes.
Add this CSS rule (.removePadding class) after the bootstrap styles, to override them.
Related
I have a WordPress website with a custom post type that I need to display in a Bootstrap grid.
Here's what I mean :
I need to create a gutter in the center, but obviously if I add a padding-left, it moves every element. I only need to add padding to the item on the right. Since the content is dynamic, I can't just add a class and type
.right-elements { padding-left: 10px; }
Is there a CSS property for even elements or something ?
( since the issue is not really unique I don't feel like I should add the code, but tell me if you need it )
Thanks !
If you're only interested in modifying even elements, you can use the :nth-child() rule:
.my-class:nth-child(even) { padding-left: 10px; }
I'm looking at making some custom GWT widgets styled in a uniform fashion without requiring the designer to go into each widget's UI file every time they want something to appear differently. I would provide a bunch of base styles for elements in the widget and the designer comes along later and sets, in UIBinder, HTML, CSS, anything really, the style using the same selector.
For example:
I have a composite widget which I have setup to use a CSSResource. This CSS resource has a style named .myHeaderStyle which is applied to an element on the composite.
This composite is used in another GWT Widget and needs to appear slightly differently when used in the enclosing widget.
My hope here is that I can specify another style in the UIBinder definition of that UI also named .myHeaderStyle and have this style override the style specified in the composite widget's CSSResource.
However, in my attempts to make this happen even with !important included on the style properties that are to override the initial style, I'm only getting the original .myHeaderStyle set on the composite widget.
I'm trying to specifically avoid adding/changing the style in the composite every time we compile, I want it to inherit from the enclosing page effectively overriding the composite widget's original styling.
Is what I'm trying to do possible in some form with GWT+CSS?
After building complex GWT apps for 6 years, I am a big proponent of using a single CSS file for the entire app, and never using CSS resources or UIBinder definitions. Then you can set ".myWidget" style in your widget, and your designer can do:
.myHeaderStyle {
font-size: 1.4rem;
}
.myWidget .myHeaderStyle {
font-size: 1.6rem;
}
In my opinion, this is the easiest way to maintain consistency throughout the app - all styles are in one place, using inheritance, rem, and other best practices. It's much easier for designers that CSS resources scattered throughout the app.
By the way, this is also the easiest approach to implement themes (or skins), or change CSS based on the screen size without touching the code.
EDIT:
This is an example from one of my apps:
<g:HTMLPanel>
<g:Label ui:field="logo" styleName="logo">My App</g:Label>
<div class="menu" >
<div class="tab" >
<g:Label ui:field="tab1" ><ui:text from="{constants.tab1}" /></g:Label>
<g:Label ui:field="tab2" ><ui:text from="{constants.tab2}" /></g:Label>
<g:Label ui:field="tab3" ><ui:text from="{constants.tab3}" /></g:Label>
</div>
</div>
</g:HTMLPanel>
Note that I use 'class' for div element, but styleName for a widget. I don't set style on my tab labels, because I use CSS to style all of them at once:
.tab>div {
float: right;
margin: 0 0 0 6px;
padding: 2px 6px;
width: 120px;
}
I am using Bootstrap 3 to build my personal website and have been searching for a way to do the following:
I would like to assign unique gutter widths to specific rows in my layout.
The rest of the website will make use of the underlying gutter width.
Is it possible? Any help would be much appreciated. Thanks in Advance / Trev
The simplest way to change the spacing between columns (gutter) is to use CSS to override the default padding (15px)..
.row .col:not(:first-child),.row .col:not(:last-child) {
padding-right:5px;
padding-left:5px;
}
Demo: http://bootply.com/94849
Yes. Add a unique CSS class, say my-personalized-row to the row you want to edit. Then in your CSS, add a section for this as following:
.my-personalized-row {
margin-bottom: 5px !important; //If you want 5px of gutter width.
}
Now, whatever you put between the two braces will apply only to this row and the rest of the site will use the underlying gutter width.
UPDATE:
I have added the style rule you would want to use to reduce the gutter width for a specific row to 5px. The !important is to ensure that specificity rules will not interfere with your declaration. Note that it is not mandatory to use !important since Bootstrap declares styles with a single class as well.
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css
I have a problem here that i can't seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i've decided to learn it properly and i'm trying to categorize things as much as i can.
So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.
Now i have a class for each of these containers, they can be called container_1 container_2 and so on.
Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.
So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:
.container_1 .rounded_corners .float_left
{
}
.container_2 .rounded_corners .float_right
{
}
But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn't work.
So where am i going wrong with this?
This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.
http://jsfiddle.net/ragebunnykickass/g3Zaz/
The naming is a little different but you'll know what is meant.
Thanks.
CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:
.rounded-corners
{
/* Your CSS to define rounded corners */
}
Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):
.container
{
/* Your CSS to define a nice container */
}
How to combine them together? This won't be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:
<div class="container rounded-corners">
</div>
Now suppose you need rounded corners for a non container object:
<div class="rounded-corners">
</div>
This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.
NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.
It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixins are what you need:
.rounded-corners
{
/* Your CSS here */
}
.float-left
{
/* Your CSS here */
}
.container
{
.rounder-corners
.float-left
}
You could have a CSS code like:
.container_1 {
}
.rounded_corners {
}
.float_left {
}
and then set a class to HTML element in this way:
<div class="container_1 rounded_corners float_left">...</div>
So the DIV element will inherit every style of every class!
Obviously, DIV it's just an example, you could use every tag!
If i get it well, you want a set of classes to apply to each div?
I'd break it up like that :
css
.rounded_corners {}
.float_left {}
.float_right {}
.container {}
and in the html
<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>
etc...