Is it possible to maintain/update bootstrap with LESS like so:
Imagine earlier version, for this example 2.3.2, it includes classes like span4, span12, etc. I would have custom-bootstrap.less like so:
.myown4columnclass {
.span4;
}
Then, the new version comes along, 3.0.0 I'd like to change custom-bootstrap.less to:
.myown4columnclass {
.col-md-4;
}
Sure! As long as you make a habit of using your own custom class wrapper. If .col-md-4 differs heavily from .span4 you could also make tweaks in your class "wrapper" like
.myown4columnclass {
.col-md-4; (might have a margin you don't like)
margin: 10px; (fixes it)
}
Related
I wrote a reusable app in Vue and I compiled it as a library. I set the global variable $brand-color in SCSS file which is a main color of the app (buttons, borders, font colors). I use this variable in other SCSS component files.
I've put my app to my client's website and everything is working fine. Right now I have another client who is willing to use my app. BUT... new client wants to have my app in different $brand-color than my old one. What would be the best way to approach this problem?
One thing which comes to my mind is to set store variable with value of $brand-color which depends on location.host and bind styles of all "branded" elements.
switch (location.host) {
case 'client1.com':
context.commit('setMainColor', '#ff0000');
...
case 'client2.com':
context.commit('setMainColor', '#16c100');
...
}
But this will be very painful. I would need to apply a lot of changes in all my components. Is there any better solution that style-binding all components?
By the way, I can't use CSS variables because code needs to be IE friendly.
You can have 2 files, each file definne scss variable for different customer:
customer1_variables.scss
$brand-color: green
customer2_variables.scss
$brand-color: red
And you can import it in javascript file
main.js
switch (location.host) {
case 'client1.com':
import './customer1_variables.scss'
...
case 'client2.com':
import './customer2_variables.scss'
...
}
Another solution is using vue-style-component. You can check this article for more detail
So finally I set store value depending on my client and prepared set of SCSS classess specified for each client, i.e.:
.btn-client1 {
background: red;
}
.btn-client2 {
background: blue;
}
...
and I binded classes for specific elements:
:class="`btn-${client}`"`
When writing a control, prior to it's rendering you can add css classes to it's html representation's root dom node:
FooLayout.prototype.init = function() {
this.addStyleClass('fooCssClass');
};
This will work assuming writeClasses is executed during rendering:
oRenderManager.writeClasses();
--
There is another RenderManager function writeStyles which can add in-line styles to the html string buffer:
oRenderManager.addStyle("color", "green");
oRenderManager.writeStyles();
But there doesn't seem to be an analogous function to addStyleClass for adding these at the control level to be picked up during rendering.
Is there a way I can hook into writeStyles outside of the renderer?
I have to ask: What styling cannot be applied on control level with a class that can be done with a specific style attribute?
Anyway, the "solution" (which I do not like) would be to add a delegate to the class and do something on onAfterRendering:
oControl.addDelegate({
onAfterRendering: function() {
this.$().css("opacity", "0.5");
}.bind(oControl)
});
Here is an example: http://jsbin.com/seqemaqedo/1/edit?js,output
But as I said, I would advice against it because using a good name for a class uses less code and is much easier to read:
oControl.addStyleClass("semiTransparent");
Update:
After our discussion in the comments, here is an example of how to wrap a control that does not support setting width and height.
You still have to write CSS that references the inner control structure, but in this case it is very unlikely that it will change:
http://jsbin.com/lohocaqixi/3/edit?html,js,output
I'm building a site in Joomla 3 on T3 framework.
I'm having to use LESS for the first time, but am experienced with CSS.
The site will have differently themed landing pages. These will all be identical except for the colour scheme.
I am attempting to set up a colour scheme in the T3 'variables' less file and then implement the colours - the colour will be different for many core components - such as H1, P, DIV Background Color, etc.
So if I set up, say, a master colour for Thailand's page, I create this rule in the variables.less file:
#thai: #e55092;
and then my knowledge of exactly how LESS compiles to CSS falls flat and I lose my entire train of thought.
Because I now want to be able to set up a landing page for Thailand in the T3 template. I need to be able to use the class 'thai' in various places in this page - for instance, the H1 text should be coloured #e55092, an aside background should be #e55092, an HR should be #e55092 ... for THIS page only.
I hope this isn't a too open question but what would be best practice for achieving this, keeping my code clean and fast? My current line of thought is that I create a whole bunch of rules in LESS along the lines of:
thai.h1 { color: #thai }
thai.button [ background-color: #thai }
(excuse syntax - very new to LESS and not sure what's possible or correct)
But isn't that defeating the whole purpose of using LESS in the first place?
I think your question is very broad indeed. Depending on your situation:
One CSS file for all pages. You can consider changing selector order The code for a button can then look like that shown beneath:
.button {
border: 1px solid white;
.thai & { background-color: red;}
.japanese & { background-color: yellow;}
}
In your HTML pages: <body class="thai"> and so on..
Compile different CSS files for each landing page
In Less you can override a variable by putting the definition afterwards
You should first define a main file, for the button example this button.less file should contain something like that shown below:
#button-background-color: orange;
button { background-color: #button-background-color; }
Now you can define you thai theme file (thai.less) as follows:
#import "button.less";
#button-background-color: red;
Or alternatively compile different CSS files using the modify-var option:
lessc button.less --modify-var="button-background-color=red" thai.css
I am currently updating the bootstrap source less files for a project and I have to modify the hover state for the buttons. The end goal is something along these lines:
.btn-primary {
.buttonBackground(#btnPrimaryBackgroundHighlight, #btnPrimaryBackground);
&.hover {
.buttonBackground( lighten(#btnPrimaryBackgroundHighlight, %20), lighten(#btnPrimaryBackground, %20));
}
}
However, that returns a compile error. Any thoughts on this issue? I'm sure it's something simple, but I'm at a loss. Thanks in advance.
P.S. - I will also be using the :hover pseudo-class, but for sake of example I'm using a simple class.
Put the percent sign after the number (20% instead of %20)
I'm using the new MVC3 WebGrid. So far so good, just having issues styling/formatting the column headers. The best I've got is a workaround that applies the same css class from the first row of the WebGrid to the table header.
var headerCells = $("#grid tr:eq(0) th");
var firstRowCells = $("#grid tr:eq(1) td");
$.each(firstRowCells, function (index, value) {
$(headerCells[index]).addClass($(firstRowCells[index]).attr("class"));
});
This example obviously lacks a check to make sure there are rows or indeed the specifed element id, but it applies the css class from the first row to the header row meaning you can style independently of each other.
td.my-column-style { width:100px }
th.my-column-style { text-align:right;}
Is there a built in way of styling the column header elements (not just using the headerStyle property)?
No, as of now there is no built-in way to style the header cells independently, only the header row via the headerStyle property.
I think your workaround is good enough.
I know this is an old question, but this may be useful to viewers who stumble across it.
The :nth-child css pseudo selector is your friend, if you don't want to rely on javascript to copy the classes. It is easy to add a class to your webgrid using the tableStyle property, and then you can style the individual headers with the following bit of css:
.webgridclass tr th:nth-child(1){
background:#ff0;
}
.webgridclass tr th:nth-child(2){
background:#f60;
}
Unfortunately, this is not supported in IE8 and earlier IE, but it does have full support in all proper browsers (newer than FF3).
We can do this using of Javascript code as below.
JsFiddle Example
$("table tr th:nth-child(n)").addClass("col-md-1");