Bootstrap docs says about scaffolding and mixins, I couldn't understand those correctly - what they meant by scaffolding. I googled about scaffolding in css but I didn't get a good idea from any links. Also I could find some pages about mixins the are saying all differently such as mixins is class with combinations of methods from other classes, mixins are frame work and etc. But didn't get a complete idea about what is mixin, is it a concept or framework. Can any one help me?
Mixins basically acts as vaiables in CSS Preprocessors, like LESS. if you write mixin you can use it n number of time anywhere in you dynamic stylesheet.
Consider this example:
.RoundBorders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu {
color: gray;
.RoundBorders;
}
If we write this in our Dynamic stylesheet it will result in:
#menu {
color: gray;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
you can use .RoundBorders mixin in you Class or id anywhere. It makes you task simple, you need not to write those property again if you mention this mixin.
Related
In my react project, I styled the buttons like this in an external stylesheet file called project.css:
button {
max-width: 150px;
margin: 20px 0;
padding: 12px 20px;
border-style: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
outline: none;
-webkit-appearance: none;
}
This has been working fine, however I recently installed some libraries that also use buttons. My button style that you see above, is interfering with the style the libraries use.
I was wondering how I could keep my button styles, but have the libraries I use ignore my custom button styles.
Is this doable?
Thanks!
Depending on the structure of your code and the libraries code there are a few options.
Load the library styles after your own. When two selectors have the same specificity the last one loaded applies.
Scope your selector under a parent selector unique to your application
.mycode button {
...
}
Migrate your selector to a class instead of targetting the button tag.
.mybutton {
...
}
In general its more flexible to target a custom css class than the tags themselves.
Premise: I'm doing an Internship right now, so I am not a pro.
Hey Developers, I need your help.
I inherited a work from another guy in which I have to re-style 3 contact forms.
Problem is: two forms are generated in Wordpress with Contact form 7, and the last one is done using Woocommerce.
What's the best way to proceed to make all three forms consistent?
Do I override the styles of the theme with my own styles?
Any better solution?
Thanks in advance.
The answer to this is to identify the common fields.
In most cases you can add styling to the input and input[type="X"] fields.
This will mean not only will these forms be consistent but everything else that a form will be consistent.
E.g.
input {
background: #f1f1f1;
padding: 5px;
}
input[type="submit"] {
border-radius: 20px;
background: #333;
color: white;
}
This will style all the inputs and then also target the input with the type submit.
In most cases these stylings will be ignored due to weight of the styling so it may be necessary to nest these inside classes and divs. Or just use !important to overide them.
E.g
//Overiding with !important
input {
background: #f1f1f1 !important;
padding: 5px !important;
}
//Nesting to give extra value
html body .container form input[type="submit"] {
border-radius: 20px;
background: #333;
color: white;
}
More information on weights given to classes/id's/elements here.
More information on input types here.
I'm re-evaluating the effectiveness of my CSS design choices after reading about SMACSS.
One of the conflicts I've examined is:
<button class="cool-text button"></button>
Semantics aside, the object in question has two classes which do not extend each other in anyway. Now, if the CSS were:
.cool-text {
background-color: black; // want this
color: green; // don't want this
font-size: 16px;
text-shadow: 0 1px 0 yellow;
}
.button {
background-color: white; // don't want this
border: 1px solid;
border-radius: 4px;
color: #eee; // want this
}
Once again, this is not an ideal example. I was wondering, what if I wanted the background-color from .cool-text and the color from .button. In a programming language, an object can have two classes, and you can specify how to resolve conflicts in method names. I guess similarly, I could specify .cool-text.button, but I would have to re-write the properties, which seems very bad.
.cool-text.button {
background-color: black;
color: #eee;
}
Are there any workarounds using SCSS?
Also, is it a bad idea to rely on the positions of the classes within the class attribute (in vanilla CSS). Classes that are specified first have higher priority, for instance:
<button class="green-button button"></button>
In this example, .green-button has higher precedence.
This seems to add CSS specificity to HTML. What if there were lots of classes, you would have to spend time figuring out which ones should go first and that seems very counter-intuitive.
Per Quentin, it's determined by the order within CSS.
It all depends on the rule specificity and order.
Your solution makes perfect sense to me, because your original idea is not ideal (taking x from class1 and y from class2, yet the classes are parallel). However, if you end up writing too many of those exception rules, like:
.cool-text.button {
background-color: black;
color: #eee;
}
it means something's not quite right with your design. Why simply not design a cool-button class then? If your .button is meant to be one of the base classes, put it on the top of the CSS file, let the other (more specific) classes override it easily.
Also, please refrain from using !important unless absolutely necessary.
See this nice specificity calculator: http://specificity.keegan.st/
i am kinda new to LESS, but already can see it's huge power of building huge design frameworks / systems.
I'll try to reduce my question as simple as i can, and hopefully i will got lucky with some help!
So, let's say i have build Framework (something like Bootstrap 3), that have a lot of own components, which have their own rules, variables to base etc. And than i have theme which of course can overwrite those variables to change style.
But what if i need to add some specific rules, which haven't been presented before?
// FRAMEWORK
#btn-font-size: 12px;
#btn-line-height: 1;
#btn-border: 3px;
.some-component .menu > .btn {
font-size: #btn-font-size;
line-height: #btn-line-height;
border: #btn-border solid transparent;
}
// HERE STARTS MY THEME
#btn-font-size: 16px;
#btn-border: 6px;
.some-component .menu > .btn {
margin-bottom: 12px;
letter-spacing: 0.3px;
background: #FFFFFF;
}
And you would ask, so what's the problem here? You should just get what you want with this approach.
But problem lays in my intention to build optimized code, which would be lot less in size, more readable, logical and won't ruin some of dependencies (so for some complex components i won't have to do some additional edits, just to add few things).
In plain simple words, i want it to compile like that:
// FRAMEWORK
.some-component .menu > .btn {
font-size: 16px;
line-height: 1;
border: 6px solid transparent;
margin-bottom: 12px;
letter-spacing: 0.3px;
background: #FFFFFF;
}
So the idea is to extend framework, not to overwrite classes.
To do so i was trying all kinds of mixins, extends, variables with rulsets etc, which ain't seem to help or to be enough specific.
Any ideas would be greatly appreciated, because there seem to be no native LESS solution, but maybe some tricks?)
Also see: How to keep duplicate properties in compiled CSS file when use LESS?
Since Less v2 you should use the Less Clean CSS plugin to compress the css output from Less using clean-css.
Clean-css will merge your properties automatically.
Compiling your code with lessc --clean-css code.less outputs:
.some-component .menu>.btn{font-size:16px;line-height:1;border:6px solid transparent;margin-bottom:12px;letter-spacing:.3px;background:FFFFFF}
It gets really annoying, especially when using these techniques as much as I am, to not only add these, but then to change them even the slightest, because I have to do it three times, rather than just once.
Example:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius:5px;
There must be some way to only have to do this once, a plugin or something.
Use a CSS preprocesser like SASS. The mixin capability allows something like this:
#mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
Then you can just reference the mixin like this:
#include border-radius(5px);
Yes there is a plugin called prefix-free
Check this http://leaverou.github.com/prefixfree/
you can use less
or use sass
and I prefer Less because it more simple and easiest