There is no 24px standard in the Vuetify>Spacings>Playground specifically for Margins.
Sizes comes with: 0,1,2,3,4,5 if converted to pixels it is 0,8,16,32,48
https://vuetifyjs.com/en/framework/spacing#spacing
I expect to have a 24px in the vuetify standards Spacings > Playground.
QUESTION: Is it ideal to predefine/entirely change the value of one the sizes?
This has been updated in Vuetify version 2.0.5. It is ma-6 that gives you 24px
Related
I have a problem rendering the "font-smoothing" CSS property with html2canvas on all browsers I have (FF/Chrome/Safari/0pera)
But trying desperately to solve that, I eventually wondered why I had to smooth the text in the first place and i noticed that only the fonts displayed on a dark background were causing problems.
So, I made a JSFiddle to make some tests (see the link below)
If you are on Mac (I don't know about PC's browsers), you can see with jsFiddle that:
the black font on a white background is totally ok.
the white version of the same font on a black background is now bolder and messier for whatever reason.
And this would be resolved only if I apply a css "font-smoothing" property to it.
Nothing changed in the css and the font is absolutely standard.
All that changed is the constrast: dark background with a bright font or the contrary.
So, clearly, it's not a problem related to the font or to a technically blocking issue. It just depends on the background and the font color.
I originally thought it was because of my fancy font but even the standard webfonts will generate the problem.
So, at the end of the day, it only seems to be a matter of contrast.
Black on white is ok while white on black is not.
Is there any (css) workaround to get the same results, whatever the background luminosity/contrast or font color, whitout using "font-smoothing" as a non standardized fix then?
The contrast thing is probably a known issue and I can't believe it has no standard fix or, at least, a workaround that would work without browser-specific css properties.
Applying a css property according to the background color seems very awkward.
Here is the html:
<div class="white_no_smoothing">Test of text 0123</div>
<div class="black_no_smoothing">Test of text 0123</div>
<div class="black_smoothing" >Test of text 0123</div>
Here is the CSS:
.white_no_smoothing{
background:#fff;
color:#000;
width:250px;
height:50px;
display:block;
font-size:36px;
}
.black_no_smoothing{
background:#000;
color:#fff;
width:250px;
height:50px;
display:block;
font-size:36px;
}
.black_smoothing{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background:#000;
color:#fff;
width:250px;
height:50px;
display:block;
font-size:36px;
}
JSFiddle:
https://jsfiddle.net/Lzy4s4tw/3/
Thanks.
I was really inspired by the layout of this site http://sassandcompass.com/ which is said to be using Susy and I want to make the layout for my new website with the same idea. What I want to have is a layout which spans fully across the browser width but also at the same time stays responsive. I used 'fluid' container style in Susy but I don't know how to maintain the fixed gutter width. Here is my settings:
$total-columns: 4;
$column-width: 4em;
$gutter-width: 1em;
$container-style: fluid;
$tablet: 8;
$desktop: 12;
Could you please tell me what's wrong with my settings and what possible settings that site is using?
Thank you!
The site you linked to does not maintain a fixed gutter width. Susy 1 doesn't have any support for that, but Susy 2 (currently in alpha) does. You might be able to fake it in Susy 1 by setting gutters to 0, applying border-box box-sizing to all your grid elements, and then adding you gutters manually as padding.
There is an 8px margin on my body element that I don't want to have there because it makes the navigation look a bit strange. I can set the margin-top to be 0 pixels, or set a negative 8 px margin on the navigation, which is better and why does Susy have this in the template anyway?
This is not actually related to Susy at all. Susy does not apply any 8px margin to the body, but most browsers do by default. You can use a reset ("#import "compass/reset";" would be one way), or simply override the margin setting on the body by hand. I would not use negative margins to fix it, unless you really want 8px margins everywhere else.
The website I am creating has a fairly large title text for its banner. Using a plain font gives it a very jagged look, but it seems like an anti-aliased image would be a fairly large download. Which way would be the best choice, or is there a better method for large titles?
Here is the banner with pure text. Scaled down it is not as noticeable, but full size it's about 600px across. Open the image separately for the full effect:
Some fonts are better than others where the jaggies are concerned. That being said, a no-displacement text shadow the same color as the text with a blur of one pixel will cure what ails ya most of the time:
h1 {
.
.
.
color: white;
text-shadow: 0 0 1px white;
}
I've found that it's just enough to antialias the font, and if I'm not using the text-shadow for any other effects, it's a good solution for anything even reasonably modern. Older browsers (you know who you are) will get the jaggies, but you can't win 'em all.
Image is the way i would go. There are techniques out there for making the image smaller in size without giving up too much in terms of quality. Plus, once it's downloaded the first time, it can be cached so it won't need downloaded again.
I would always advise against using images for text content. Modern browsers have built-in anti-aliasing capabilities, so large fonts look much better than they did a few years back. (And it's getting better by the day.) Also, using markup such as <h1> allows you to retain the semantic value of your title, which is lost when you use an <img> tag or a CSS background-image.
I have a CSS style which displays a png image in background. It works well in all browser, except in ie6.
In ie6 the bacground image is stretched to fit the block. How do I solve this ? Here's the CSS which I'm using to do this.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
IE7 / FF3.5
IE6
You probably use a png transparency fix script for IE6, I think the problem lies there because it probably applies a scale method.
Read the comments on this page.
The documentation of your png transparency fix will probably cover this.
I personally found using transparent pngs in IE 6.0 to be a major pain in the ass despite all the various fixes out there. I know this is not an original answer, but I would probably just do a conditional check and replace the image with a gif or jpg version if you really need to support IE 6.0 here, instead of relying on hacks to support this. Or just drop IE 6.0 already, this year, I've talked every single client into not supporting IE 6.0 on their new projects. Seriously, it's about damn time that thing stopped making our professional lives so god damn miserable.
If you're using the AlphaImageLoader filter, make sure sizingMethod='scale' is not present. Remove it or set it to image instead of scale.
Belatedpng is the best script I have found for this problem:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
set actual width and height for the background image and background-position.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
background-position:left;
width:251px;
height:72px;
background-repeat:no-repeat;
}
here width and height are actual size of the error.png image. hope it helps.