Breakpoints and the 'font-size' parameter - media-queries

Has anyone had any experience of using the 'font-size' parameter with the at-breakpoint mixin?
In the documentation it states the following...
<$font-size>: When using EMs for your grid, the font size is important. Default: $base-font-size
In a design I am working with I am taking the mobile first approach so the $base-font-size = 12px.
I am then adding a breakpoint at 50em's (arbitrary value for this example) as follows...
#include at-breakpoint(50em 12, 16px) {
.container{
#include container;
}
}
I'm not sure if I have got the understanding of this correctly but I was expecting, given that I've specified a value for 'font-size', that my font size would increase to 16px once the screen exceeded 50em.
However, I think I might have got the wrong end of the stick as to the purpose of this 'font-size' parameter as the font size remains at 12px at any size.
Does anyone know what this parameter affects?

It seems that feature is not well documented. It is not there to set a font size, but to fix em-based media-queries. If you are using a base font-size of 12px, this is very important.
Browsers always interperet em-based media-queries relative to the default browser font size (16px). It doesn't make any sense at all, but that's how they do it. So, in order for you to make a breakpoint at 50em (*12px), we have to set the breakpoint at 37.5em (*16px, the browser default). Passing your base font-size allows us to make that adjustment.
This should be better documented, and the argument should be better named. I've created an issue on GitHub.

Related

Trouble Overriding CSS Variables in Sanity.io

I am attempting to change the styling of Sanity Studio as noted here in the docs: https://www.sanity.io/docs/styling#d7f9b5cc2adb
As such, I have created a file with the following css variables:
#import "part:#sanity/base/theme/variables/gray-colors-style";
:root {
--fieldset-border: none;
--fieldset-bg: var(--gray-darker);
}
Now, this works as I want for --fieldset-border, but it does not work for --fieldset-bg. I even tried hard-coding the value of --fieldset-bg as follows: --fieldset-bg: #454545; -- it still did not work.
So, I am wondering, why does --fieldset-border work and --fieldset-bg not work. More importantly, what do I have to do so that I can change the background color of fieldsets in sanity studio?
I have a hunch that the specific --fieldset-bg variable got silently deprecated recently (the move from #sanity/components to #sanity/ui). IF that's the case, opening a bug report issue in sanity-io/sanity repository would be great!
Regardless if that's the case, I'd suggest overwriting the css with a global selector in your variableOverrides.css file:
div[class^="DefaultFieldset_root"] {
background: papayawhip;
}
Hope this helps 🙌

Set windows size of QuickLook Plugin

I'm building a QuickLook plugin. I want to change the width of the windows that pops up when user hits the spacebar.
I've read there are two keys in the info.plist file of the project where height and width are customisable. Even if I change those values I can't get the size of the preview windows to my desired one.
I don't know what else to try. Any idea?
Thanks!
Thought I'd dig a little on this. I have not tried any of the following suggestions, so nobody get their hopes up. I'll assume you're using the generator callback:
OSStatus (*GeneratePreviewForURL)(
void *thisInterface,
QLPreviewRequestRef preview,
CFURLRef url,
CFStringRef contentTypeUTI,
CFDictionaryRef options
);
Before anything else, you might manually check the options dictionary argument and verify that the kQLPreviewPropertyWidthKey and kQLPreviewPropertyHeightKey keys are indeed mapped to the desired CFNumber values.
Referring to each of these properties, the Apple QuickLook programming guide says:
Note that this property is a hint; Quick Look might set the width
automatically for some types of previews. The value must be
encapsulated in a CFNumber object.
(Edit: If your preview representation is flexible, you might try finding a preview type for which QuickLook honors your size hints, as per the statement above. Just a thought.)
Running nm on the QuickLook framework binary revealed some undocumented kQLPreviewProperty-- constants as well as the aforementioned width and height keys. One that caught my attention was kQLPreviewPropertyAutoSizeKey. Recalling Apple's statement about ignoring the hints to set the size automatically, this might be significant? Following the convention in QuickLook.framework/Headers/QLBase.h, you might try declaring
extern const CFStringRef kQLPreviewPropertyAutoSizeKey;
Then you could try associating a CFNumber 0 with that property key in the options dictionary. There are other undocumented keys of note, such as kQLPreviewPropertyAttributesKey.
Back to the Info.plist you mentioned, Apple says about those keys QLPreviewWidth and QLPreviewHeight:
This number gives Quick Look a hint for the width (in points) of
previews. It uses these values if the generator takes too long to
produce the preview. (emphasis added)
This is where someone makes the terrible suggestion of calling sleep() in your generator. But I'm perplexed as to why Apple would make following the size hints dependent on the generator latency. (?)
Edit: Also note the above statement says the Info.plist hints must be expressed in points (not pixels), a unit dependent on the user's screen resolution.
Recently I was developing a Quick Look Plugin myself which uses HTML+CSS and faced the same problem.
The solution for my was to test the plugin not within Xcode and qlmanage as the executable but instead to try the real .qlgenerator from my user library.
When invoking the generator from my user library, the Quick Look window was resized exactly the way I specified in the *-Info.plist.
I've run into the same problem, and may offer some clues: In my case I'm generating an image quick look preview for my custom file format. I initiate the preview context to draw my preview into using
CGContextRef QLPreviewRequestCreateContext(QLPreviewRequestRef preview, CGSize size, Boolean isBitmap, CFDictionaryRef properties);
The curious thing is that if I set isBitmap to true, quick look adjusts the preview panel size to the size specified for the context (up to a certain size at least). But if you set isBitmap to false, it seems to disregard the context size and instead always shows a full size preview panel with the vector graphics image scaled to cover the entire panel.
So, if you use a bitmap graphical preview context, it seems the preview panel will be set to the size of the context you specify. However, I haven't found any way to set the size of the panel when using a vector graphic preview context (which is what I want).

Gridster add_widget is slow

I want use Gridster for my web site, but i need to add lot of widgets with "add_widget" command. I do a test and i think there is a problem with "add_widget" function : grid is more and more slow and there are memory leak.
You can see that in this video : grister problem video
However, as you can see on the video, if i add widget at beginning (not with add_widget function) there is no problem. Can you help me ? Something wrong with my code ?
Thanks in advance !
In my own experience, the main culprit was using the autogenerate_stylesheet setting. The problem is that it regenerates the css on every call to add_widget(), and this just absolutely kills browsers. Additionally, gridster has/had a bug where stylesheets get duplicated, filling the <head> with tons of duplicate style rules, making it tough on the browser(this bug was supposedly fixed, but my experience was that the fix only worked in specific scenarios, definitely not in mine).
When I used gridster, my widgets were always the same size. So, in my case, I was able to generate the stylesheet once, never needing to regenerate it.
I don't think its part of the public api, but you can just call generate_stylesheet() method once manually.
var gridster = $(".gridster ul").gridster({
autogenerate_stylesheet: false,
widget_base_dimensions: [140, 140],
//other options...
}).data('gridster');
gridster.generate_stylesheet({rows: 30; cols: 8});
//freely call gridster.add_widget(...); as many times as you like
Since you're only going to generate the stylesheet once, you need to make sure gridster will generate style rules for enough rows and columns to accommodate all your widgets, otherwise once you exceed the range, you'll experience broken layouts. Just supply an upper bound on rows and cols when calling generate_stylesheet(opts). If you don't, it seems like it defaults to whatever value your gridster instance is using for max_rows and max_cols.
The nice thing is by manually generating the stylesheet, is that you completely avoid the duplicate style bug too.
The exponential slowdown will be gone. Happy gridstering.
I know I'm a bit late on this but I had the same problem and none of the above solutions worked.
However, I found that I was generating the size and coordinates of the widgets as a string rather than an integer on the back-end.
By making sure they were integers I managed to speed things up loads.
The best way to fix it, is not to disable the autogenerated stylesheet, but to edit the fn.generate_stylesheet function in jquery.gridster.js
At the end of the function, just before these lines:
return this.add_style_tag(styles);
};
add this line:
this.remove_style_tags();
The final result would look like this:
this.remove_style_tags();
return this.add_style_tag(styles);
};
With this, each time a stylesheet is generated, the previous one is removed, so there no duplication problem!

Loading custom font in Windows 8 Metro App

I found this link on how to embed custom fonts in XAML apps. Is there some way I can achieve the same while building using JS? The following method did not work.
#font-face {
font-family: "MimicRoman";
src: url("/fonts/MimicRoman.otf") format('opentype');
}
Looks ok to me, that's how it should work. You are sure the path to the font file is correct and you did also actually use the font-face somewhere? For instance,
body {
font-family: MimicRoman;
}
Also, you are sure there are no other font-family declarations taking precedence over the declaration you've made? (this can be seen quite easily with the DOM Explorer).
If nothing else works, you might want to test some other font file, just in case that file is corrupt or something (some working examples from here, for instance).

How to assign value to LESS variable using selector

Since LESS is a pre-compile stylesheet language, this may not achieve what I'm after, but the idea is:
#sidebar {
width: 40%;
}
#sidebar_width : #('#sidebar:width');
.some_other_elements {
width: #sidebar_width;
}
So there are three questions I have:
Is something like the above possible? I just discovered LESS and the documentation is making me carsick.
If the above is possible, will it produce CSS with the .some_other_elements set to 40% or the actual width of the sidebar? Is it possible to get the actual width using LESS?
If you can give me your opinion of the library in general along with the answer or comment, I'd like to hear it. It seems a bit much but maybe it's the next jquery and I need to adopt it sooner than later (or conversely, maybe it's the next YUI and I should forget I ever saw it).
That won't work. You can't cherry pick out values from a selector and turn it into a variable: You would have to do something like:
#sidebar_width: 40%;
.some_other_elements {
width: #sidebar_width;
}
the width of the sidebar will be set to 40% of the width of the parent container.
While this is true if you precompile, keep in mind LESS does actually let you access the JS environment. So if you compile server side using Node you could do something similar to what you are trying since you can access parts of the document. It may even work if you compile it on load using the .js (though I would not recommend this for a variety of reasons) The example from the documentation:
#height = `document.body.clientHeight`;
Might be something worth looking into for what you are trying to accomplish.