Given the following example:
<div class="resource-url-cont clearfix">
<div class="url-icon-action float-left">
<v-btn #click="toggleUrlConsumed(link)" icon x-small color="success">
<v-icon v-html="link.is_consumed ? 'mdi-checkbox-marked-outline' : 'mdi-checkbox-blank-outline'"></v-icon>
</v-btn>
</div>
<div class="url-link float-left"><a :href="link.url" target="_blank">{{ link.name }}</a></div>
<div class="url-icon-action float-left">
<v-btn #click="removeResearchUrlConfirm(link)" icon x-small color="error" class="float-right">
<v-icon>mdi-trash-can-outline</v-icon>
</v-btn>
</div>
</div>
...and the SASS snippet:
.resource-url-cont {
.url-icon-action {
width: 30px;
}
.url-link {
width: 255px;
white-space: break-spaces;
overflow: hidden;
}
}
What would implement best practices for managing the css classes? Given that the class float-left is applied to all 3 divs which contains only a single style: float: left; ...
Would it be better to completely omit the addition of the 2nd class within the html float-left, and apply the style to the existing classes like so...
.resource-url-cont {
.url-icon-action {
float: left;
width: 30px;
}
.url-link {
float: left;
width: 255px;
white-space: break-spaces;
overflow: hidden;
}
}
If I keep the float:left style encapsulated within the existing float-left class, it ultimately reduces the size of the overall compiled styles.
However there is a cost at developer readability while managing the source code, because to me it seems easier to read through the source when the styles for an element are constrained to a single use class.
This is obviously a simple example where it would not make much difference regardless of which technique you used however the differences become more evident when applied consistently throughout a large scale application.
What would be the best standard of practice to implement and why?
Oh man, this is a tricky one as there have been endless amount of articles written about this. Ex. https://css-tricks.com/tailwind-versus-bem/
I think the key thing is: there's no right answer, but just be consistent.
If you decide on keeping most of the styles in your CSS file, and you are worried about the file size, I suggest looking at https://purgecss.com. Ironically, it's created (sponsored?) by Tailwind, who promotes utility based styling. Using this tool, you can reduce your file size. Maybe not as small as using mostly utility classes, but it'll help.
I prefer BEM with some utility classes (per your float example). The hybrid approach has helped me a lot.
Related
I'm using Bootstrap and I'm having trouble placing two divs next to each other. I've tried display: inline and that makes it look even worse. I created a div to hold them both called steven-and-leah and got the same result, however if use a specific type of inline such as inline-flex I get a result which near what I want, but they are too close together and cannot be separated when using that.
I'm sorry if this isn't specific enough, but I don't notice anything that even effects the code.
.steven-and-leah{
display: inline;
}
.team-bx{
width: 500px;
height: 570px;
margin-top: 80px;
border: 5px solid #FFF;
border-radius: 120px;
padding: 20px 0px 20px 0px;
overflow: hidden;
background-color: #111924;
}
You're using bootstrap wrong here. Remember that the strength of Bootstrap is on its grid.
If you want to place two divs next to each other, you simply have to apply a col-£-6 to them (£ being the device you want to target). For example:
<div class="row">
<div class="col-md-6">div number one!</div>
<div class="col-md-6">div number two!</div>
</div>
This will automatically place both divs next to each other as if they were "inline", with the huge plus of them being automatically responsive.
If this is not your question, please reframe it.
You can find great examples in their getting started site
Did you try with this. check the demo
.steven-and-leah > * {
display: inline-block;
}
Demo
You better use grid system if you have specific pattern in mind (as Obed mentioned). But if you want to have a bit of freedom use d-inline
<div class="d-inline p-2 bg-primary">box1</div>
<div class="d-inline p-2 bg-dark">box2</div>
You should manage the spacing and alignment by your own and you should not wrap the divs with class="row" div to allow d-inline to take effect.
I have this css from bootstrap.min:
.rew {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: 1050px;
}
.rew2 {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: auto;
}
And my div like this (I've red examples from question and answer in stackoverflow):
<div class="rew rew2">
content.....
</div>
The (rew2) it's for responsived css, but before that I was wrote the css on my responsive css file, but it's not working the "div tag" always calls css from bootstrap.min css file. So I wrote two classes in the bootstrap.min css file, but not working also. The "div" tag only called the "rew" class and the "rew2" was ignored.
******** The class on responsive css file was deleted and I wrote the class on bootstrapmin css file
The differences it's only on width, if the site opened from desktop it would have 1050px width, and for the responsive (opened from smartphone) it will automatically adjust the template with the smartphone screen as "auto".
*Huft...I'm so confused why it's not working. I need help from you guys.
Thank you,
Best regards,
Kris
Why would you customize bootstraps .css file on your own? Just create your own rules and attach them to your div.
CSS stylings are always used one by one. So if you, for example, include your bootstrap.min.css file before your own styling rules, your own ones would overwrite all bootstrap stylings.
In other words:
First of all include bootstrap.min.css, then your own .css file.
Let's assume you've got this markup
<div class="foo bar"> </div>
You could style it through the 2 classes foo and bar.
.foo {
color: red;
}
.bar {
color: blue;
}
Using this would end up in the blue color, according to the declared order.
Let's even try to be a bit more specific.
You can also overwrite rules by using some more complex selectors.
.foo.bar {
color: black;
}
The above code would overwrite both of the previously defined rules, because they are 'stronger' selectors than a simple single-class selector.
Conclusion
If you want to overwrite bootstraps styling, try to stick to the order. If bootstrap uses some complex selectors and your custom ones won't trigger, try to use a bit more complex ones. Look here to learn more about complex selectors.
A little hint at the end:
Try to avoid !important! A rule, declared as !important, will overwrite all other rules, regardless of whatever you have declared up before.
Don't customize bootstrap.min.css create your own css file, In that you can write your own css as you need.As per you requirement include media query for smartphone in that give width: 100%; for that element.
I'm using Bootstrap 3 to design a website, and I would like to ask how could I apply a custom class to an existing col-md-12 for example, so I won't use ids (#cusom-name) ?
should I write my css like
.col-md-12 test {
background: blue;
padding-left: 10px;
}
and my html like:
<div class="col-md-12 test">div content</div>
or should I just stick to something like using a standard col-md-12 and inside it use my custom class with a new div? like
<div class="col-md-12">
<div class="test">
test content
</div>
</div>
I hope it's clear enough... thanks!
In your HTML, load your custom stylesheet file AFTER you load the Bootstrap 3 stylesheet file. Don't ever edit Bootstrap's files, as updating will become difficult.
Then, in your stylesheet just define the class as normal, on its own.
.blue-bg {
background: blue;
padding-left: 10px;
}
Then, as you already have in your HTML, us it like this;
<div class="col-md-12 blue-bg">
div content
</div>
What this will do is apply all the styles from both .col-md-12 (defined by Bootstrap) and .blue-bg (defined by you).
The reason we load your stylesheet last, is for conflicts. If both you and Bootstrap are defining a property. For example, Bootstrap sets the background to red, and then you set it to Blue. Whatever the last stylesheet says, will be obeyed.
In this way, you can define yet another class;
.red-bg {
background: red;
padding-left: 10px;
}
Then use them both as often as you like, however you want. Consider this.
<div class="row">
<div class="col-md-6 blue-bg">
Div with a blue background.
</div>
<div class="col-md-3 red-bg">
Div with a red background.
</div>
<div class="col-md-3 blue-bg">
Another div with a blue background.
</div>
</div>
Just write it like this in your own CSS:
.test {
background: blue;
padding-left: 10px;
}
And like this in the html:
<div class="col-md-12 test">
<p>test content</p>
</div>
Don't change bootstraps css because then it will be harder to update it later on, insteed work with a css you create which overwrites bootstraps rules.
It really depends on what you are styling really. As well as your code style. You could add another modify class to the .col-md-12 class, or nest another class inside that container. There isn't an always or never answer for modifiers. And by modifiers, I mean overrides on BS3's default/core classes.
Also, in your example code, you forgot the period before test. It should be like this if you're going to nest that class inside:
.col-md-12 .text {}
Because .col-md-12 is a grid component, I think it makes sense to nest a div.test inside that component to not muddy up the context of what that element does, or how it behaves. An example that could have unwanted effects would be if you added padding to all .col-md-12 in your app, instead of the one off use of padding. To add the padding in this case, you could nest .test inside of .col-md-12, and add padding to .test (instead of the grid element). In my opinion, you'd have a nice separation of code and it's use. Also, you might be able to use that newly created .test class in other places of your app.
There are a lot of ways to organize your CSS, and keep elements together based on purpose. If you're interested in some reading, you might check out this resource: http://smacss.com/ (among others).
In CSS, you can have properties that will be set for both classes only, but there shouldn't be a space between the class names, as you have. It should be:
.col-md-12.test {
background: lightblue;
padding-left: 10px;
}
you don't need to add additional div, u can have
<div class="col-md-12 test">div content</div>
and define new as well as u can also override bootstrap css for col-md-12 but if u apply directly on it , it will applicable to everwhere where u have used this bootstrap class. so its better to add your custom css on .test e.g
.test {
width: 80%;
padding: 2%;
}
and if your custom css is not overriding bootstraps css u can use !important e.g.
.test {
width: 80% !important;
padding: 2% !important;
}
Defining a rule with the !important 'attribute' discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.
I have written a class for a textfield with a certain style. The field appears at 2 very different place within the website, with different parent elements. The second need another margin-top. What is an efficient way to change the original margin-top, since I cannot use pseudo-classes?
js fiddle
HTML
<div class="some_parent">
<div class="my_styled_field"></div>
</div>
.....
<div class="some_other_parent">
<div class="my_styled_field"></div>
</div>
CSS
.my_styled_field{
margin-top: 2rem;
}
.some_other_parent .my_styled_field{
margin-top:3em; //what ever you want
}
this is the way to apply some other styles to the same class, having different parents .
Pretty sure the most efficient way - most of the time - as in best performance, would be to add another class to your second styled_field.
If you add another class to your second styled_field, you would need only 1 reflow to reach it:
.newclass{margin-top:5px;}
Whereas using the descendant selector which others are selecting is surely worse performance, this means the browsers has to check a lot of elements recursively:
.parent .styled_field
If you don't want to add a class for some reason, better performance than the descendant selector would be the child selector:
.parent > .styled_field
When thinking about css performance, remember that even though we read left-to-right, browsers read right-to-left.
Where we would check all .container elements for an image-tag, browsers find all image-tags - then checks if they are in a .container
Using CSS class hierarchy:
.some_other_parent .my_styled_field {
margin-top: 2em;
}
Youc can do this:
FIDDLE EXAMPLE
.some_parent .my_styled_field{
width: 3rem;
height: 3rem;
margin-top: 2rem;
background-color: red;
}
.some_other_parent .my_styled_field{
width: 4rem;
height: 4rem;
margin-top: 4rem;
background-color: green;
}
This way, you aply style to .my_styled_field depending on his parent element.
I am trying to make my divs appear horizontally across the page but there is an automatic line break in between them. I was wondering how I could fix this.
<div id="box1">
<header id="whyshouldi">
What is iOS Development
</header>
<p id="whatis">
iOS Development is the process used to create native applications for iPhone, iPod, and iPad. Applications are made using the SDK(software development kit), Xcode. Aside from the software, it is necessary that iOS Developers know Objective-C.
</p>
</div>
<div id="box2">
<header id="whyshouldi">
Why Should I learn it?
</header>
<p id="whatis">
Learning native app development can allow you to better expand the horizon of knowledge in iPhone, and can make you a better programmer overall. It is a great skill to know no matter who you are.
</p>
</div>
This is the default behaviour of block-level elements .. there are many options to have the two divs appear side by side but one simple way is by using the float property and giving each div a width of 50%
Example
you can position them absolutely:
#box1,#box2 {
position: absolute;
width: 50%;
}
#box1 {
left: 0;
}
#box2 {
right: 0;
}
This can be quite easily achieved introducing either a class or using some specificity trickery. If you use display: inline-block you can achieve what you're after. So let's say you introduced a class to your #box1 and #box2 ID's you could in theory...
.col { display: inline-block; max-width: 170px; width: 100%; vertical-align: top; }
Always remember when using inline-block to close any gaps in mark up between #box1 closing </div> and #box2 opening <div>. Otherwise you'll be left with 3 or 4 unwanted pixels.
Check this fiddle. I think this is what you're after. http://jsfiddle.net/UsNBj/