In my application I have two Vaadin Grids. I want to apply default CSS to one grid and user defined CSS to the other. When I apply the user defined CSS to the other grid, the default CSS is dominating over the user defined CSS. Here are my code.
In styles.scss,
.my-grid-style{
line-height: 64px !important;
font-size: 12px !important;
text-align: center !important;
}
In my application .java file I am using setStyleName as follows
grid.setStyleName("my-grid-style");
but this CSS is dominated by the default .v-grid-cell style. Can anyone suggest how to achieve the same?
Try
.my-grid-style {
.v-grid-cell {
//your styles
}
}
I think your style is not adding to styles.Because of the default CSS can't dominate to "!important"Try to add with programmatically:
UI.getCurrent().getPage().getStyles().add(".my-grid-style{\n" +
" line-height: 64px !important;\n" +
" font-size: 12px !important;\n" +
" text-align: center !important;\n" +
"}");
then
grid.setStyleName("my-grid-style");
This worked for me (not sure if you need .v-grid-body ollitietavainen didn't use it, but it may be important for other functions like editors )
UI.getCurrent().getPage().getStyles().add(
".my-grid-style .v-grid-body .v-grid-cell {\n" +"" +
" line-height: 18px;\n" +
" font-size: 12px;\n" +
"}");
then use the style as discussed by utrucceh
grid.setStyleName("my-grid-style");
It sure would be nice if one of the following 'built-ins' worked like they did for the Table component:
grid.addStyleName(ValoTheme.TABLE_COMPACT); // "compact"
grid.addStyleName(ValoTheme.TABLE_SMALL); // "small"
Related
I am trying to achieve something like the following output using styled components (shared selectors).
.styleOne, .styleTwo {
color: blue; /* shared */
}
.styleOne {
font-size: 10px;
}
.styleTwo {
font-size: 20px;
}
I've tried:
1 - (this one makes sense why it doesn't render my desired output)
const shared = `color: blue;`
const StyleOne = styled.div`
font-size: 10px;
${shared}
`
const StyleTwo = styled.div`
font-size: 20px;
${shared}
`
2 -
const Shared = styled.div`
color: blue;
`
const StyleOne = styled(Shared)`
font-size: 10px;
`
const StyleTwo = styled(Shared)`
font-size: 20px;
`
3 -
const shared = css`
color: blue;
`
const StyleOne = styled.div`
font-size: 10px;
${shared}
`
const StyleTwo = styled.div`
font-size: 20px;
${shared}
`
All the above result in something like the following:
.styleOne {
color: blue; /* duplicated */
font-size: 10px;
}
.styleTwo {
color: blue; /* duplicated */
font-size: 20px;
}
Technically the styles are shared in each approach from a code perspective. However, the rules are still duplicated. I was hoping to be able to share the CSS rules themselves.
An analogy in SASS would be - I want to use a placeholder instead of a mixin.
To add some context on why I want to achieve this, I want to have a smaller HTML document for performance reasons. I'm imagining in a large app where I'm sharing a lot of styles, the style block may get huge.
The term large apps is too ambiguous to state whether or not you'll have performance issues -- whether it's from downloading/executing JS or downloading parsing CSS and/or fetching other media (fonts, images, etc). That said, styled-components applies styles in the head during run-time and does an excellent job of deferring them until they're required in the DOM.
Take a look at this example and follow these steps:
Inspect the DOM and within the Elements tab expand the head
Look for this style tag and expand it: <style data-styled="active" data-styled-version="5.2.0"></style>
With the inspector still open, navigate to other pages and notice how class names are generated on-the-fly
Once the classes have been assigned, they're then reused
This has the similar effect of using css-modules (scoped classes) without the extra request to download the required CSS, and it automatically prefixes CSS properties without any additional plugins.
So the question becomes: Is it better to have more Javascript (packaging and running styled-components in run-time) and less CSS (less requests to download CSS per page) or more CSS and potentially less Javascript? You'll need to run metrics -- like a lighthouse test -- in production to determine which is more performant; otherwise, it's just going to be a guess/personal opinion.
Either way, you're going to be running into some sort of render blocking, whether it's downloading/parsing CSS or downloading/executing JS.
I want to create custom css unit, that I'll be able to use in sass with node.js. Is there any guide about creating sass plugin for this? Just for example, I want to create unit "dpx", that will work as double pixel, so "width: 20dpx" will be processed to "width: 40px".
Other solution (not sass plugin), that can work with node is also acceptable.
Use a SASS function that accepts a font-size and returns the value doubled.
#function dpx($size) {
#return $size * 2;
}
div {
font-size: dpx(20px); // output: font-size: 40px;
}
As a simplified version of the current answer, you could also write the following:
$d: 2px;
div { font-size: 20*$d; }
I know this is an old question, but since I found it, other people will find it too.
In such case as yours a good solution would be to make a 1rem equal to 2px.
You can do it this way:
html {
font-size: 2px;
}
now each 1rem will be equal to 2px. If you want to make sure this doesn't break your current page, you can always add
body {
font-size: 8rem;
}
to set the global font-size to 16px (just a guess since this is a default value).
Asian characters (Chinese/Japanese/Korean) make for more compact elements butI would need the font-size to be slightly increased when my site is switched to Chinese. How do I increase font-size globally?
I guess I could attached a class to the body tag, like so:
<body class="cjk">
and suppose
.cjk {
base-font-size: 36px
}
might do that job?
Just changing the root size probably won't give you what you want as the rest of the tags use the variable for pixel margins etc.
I recommend customizing the build and there are two options for fine tuning the elements:
1) using a body/wrapper class:
LESS
.cjk{
& h1,
& h2,
& h3{
font-family:#font-family-zh
}
...
}
2) use guarded mixins to change specific elements such as:
in variables.less to change everything together
.SetFontSize() when (#cjk) {
#font-size-base: 17px;
}
.SetFontSize() when (#cjk = false) {
#font-size-base: 15px;
}
.SetFontSize();
or in specific files like scaffolding.less for finer control
body {
font-family: #font-family-base;
& when (#cjk) {
font-size: #font-size-base-adjusted;
}
& when (#cjk = false) {
font-size: #font-size-base;
}
font-weight: #font-weight-base;
line-height: #line-height-computed;
color: #text-color;
background-color: #body-bg;
position: relative;
}
Bootstrap.less
#cjk = false;
...
rest of the imports
Bootstrap-zh.less
#cjk = true;
...
rest of the imports
option 1 is more verbose but you only have one file.
option 2 is streamlined but you have to switch out the files bootstrap.css <> bootstrap-cjk.css
I am trying to have two different Font Sizes in the same Table th cell
My code is as below but does not appear to work i.e. the (Frm) stays at font 14
Please help
echo "<th width='70%' style='background-color:#FFD8D8;font-size:14px' colspan=\"14\"><left>".$startlocation."<style='font-size:8px'>"."(Frm)"."</left></th>";
There is no such element called <left>. What I would recommend you do, is add classes to your elements instead of using inline styling through style=.
th {
width: 70%;
background-color: #FFD8D8;
}
.left {
font-size: 8px;
}
.right {
font-size: 14px;
}
Then you can add a <span> tag around your text, which can look something like this as your final code:
echo "<th colspan=\"14\"><span class=\"left\">".$startlocation."</span><span class=\"right\">(Frm)"."</span></th>";
I'm not sure what your other text is inside the <th> element, but doing what I did will solve it. It's also best practise to use classes and IDs instead of inline styling, as it's easier to change in the future.
EDIT: If you absolutely need to to inline styling, this will work:
echo "<th colspan=\"14\"><span style=\"font-size:14px\">".$startlocation."</span><span style=\"font-size:8px\">(Frm)"."</span></th>";
Insert <span> like this:
...$startlocation."<span style='font-size:8px'>"."(Frm)"."</span></left></th>"
so that you can specify style of some element the way you tried.
I've got a SCSS-based layout in which I want to use the spacing module from OOCSS.
The OOCSS module is pure CSS - ptl, for example, stands for padding-top: large, where large is a defined value (by default 20px).
I'd like to enhance it with SCSS. So far I've been able to replace the fixed values with SCSS variables, so I can change the values in one place if I want to (I don't want to):
$spacing-small: 5px;
$spacing-medium: 10px;
$spacing-large: 20px;
...
.pts,.pvs,.pas{padding-top:$spacing-small !important}
Now I'd like to be able to use ptn,pvs, etc. as mixins, so I can do this:
.client-name {
#include spacing-pvs; // this has the same padding properties as pvs
}
I'm flexible in the syntax, but that's the functionality I'd be interested in having.
The only way I can think of for doing this is manually defining every single mixin:
#mixin spacing-pvs {
padding-top: $spacing-small !important;
padding-bottom: $spacing-small !important;
}
.pvs { #include spacing-pvs; }
But there are around 56 styles/mixins. Doing each one individually like this would be pain to write and to maintain.
Is there a better way to do this in SASS/SCSS?
The most efficient mixin would be like this (you'll need a similar mixin for padding, or add an extra argument to switch between margin/padding):
#mixin marginify($t: null, $r: null, $b: null, $l: null) {
margin-top: $t;
margin-right: $r;
margin-bottom: $b;
margin-left: $l;
}
.test {
#include marginify($t: 10px, $b: 10px);
color: green;
}
Which generates this:
.test {
margin-top: 10px;
margin-bottom: 10px;
color: green;
}
The null (available in Sass 3.2+) is doing its magic here: if a variable is null, then it doesn't generate a property for it. However, you have to give up the use of !important (most people would argue that you should only use it as a last resort anyway). Reliance on this mixin is going to introduce a fair bit of bloat because the longhand form is always used over the shorthand (margin: 10px 0), so you'll need to use it responsibly or write a more powerful mixin that will generate the shorthand if appropriate.
That said, using a mixin for this purpose (adding margins) does reduce readability in your code. Before I looked at the entire source, the names made no sense. There's a lot to be said about the readability of vanilla CSS. The marginify mixin isn't really a reusable pattern like a clearfix or inline-menu mixin might be: writing a mixin isn't just about saving keystrokes.
I ended up not using mixins at all. Instead, I left the CSS rules as they were, and I used this less documented feature called #extend. Behold!:
.client-name {
#extend .pvs; // this has the same padding properties as .pvs
}