Is there a possibility to change and use the FxFlex default breakpoint values without defining a custom breakpoint provider?
I would like to change the breakpoint media query for aliases sm and md. From
sm 'screen and (min-width: 600px) and (max-width: 959px)'
md 'screen and (min-width: 960px) and (max-width: 1279px)'
to something like
sm 'screen and (min-width: 600px) and (max-width: 900px)'
md 'screen and (min-width: 900px) and (max-width: 1279px)
Yes it is possible.
For example to change the XL breakpoint from 1920px to 1600px, add this code in your app.module.ts :
import { DEFAULT_BREAKPOINTS } from "#angular/flex-layout";
DEFAULT_BREAKPOINTS.find(item => item.alias == "lg").mediaQuery = "screen and (min-width: 1280px) and (max-width: 1599.98px)";
DEFAULT_BREAKPOINTS.find(item => item.alias == "xl").mediaQuery = "screen and (min-width: 1600px) and (max-width: 4999.98px)";
DEFAULT_BREAKPOINTS.find(item => item.alias == "lt-xl").mediaQuery = "screen and (max-width: 1599.98px)";
DEFAULT_BREAKPOINTS.find(item => item.alias == "gt-lg").mediaQuery = "screen and (min-width: 1600px)";
In node_modules/#angular/flex-layout/__ivy_ngcc__\esm2015 is a file called 'core.js', in that file are a const called 'DEFAULT_BREAKPOINTS', in this const are defined the default breakpoints, you can change his values, but I don't know if it's safe to do it, and I assume that you will have to change it every time you update the package.
Also there is the same const (or var in some cases) in the files:
node_modules/#angular/flex-layout/esm2015/core.js
node_modules/#angular/flex-layout/esm5/core.es5.js
node_modules/#angular/flex-layout/bundles/flex-layout-core.umd.js
Note that each file has its own map that refers to the breakpoint variables, you may have to change the map of the files you change
I hope this can help you
Related
In vuetify they have helper classes for typography.
for example, .display-4 goods for h1. here the full list.
When I choose display-1 for some element, In all resolutions the class gets the same font size (34px).
I was expecting to:
.display-4 will have font size of 34px in screen wide of 1024px.
.display-4 will have font size of 18px in screen wide of 300px.
According to this I have two questions, why is that? and how to make my font size elements be responsive using vuetify?
Update
Vuetify version 1.5
Take a look at display helpers example to see how to use a class when hitting a breakpoint. That being said, you can use dynamic class binding and breakpoint object in Vuetify.
Example:
:class="{'subheading': $vuetify.breakpoint. smAndDown, 'display-2': $vuetify.breakpoint. mdAndUp}"
Vuetify version 2
breakpoint object
Display
My solution changes font-sizes globally in the variables.scss file:
This is assuming you're using Vuetify 2 and #vue/cli-service 3.11 or later.
Step 1:
In src/scss/ create _emptyfile.sass and _font-size-overrides.scss.
In the _emptyfile.sass you can add this comment:
// empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795
Step 2:
In the _font-size-overrides.scss file:
/**
* define font-sizes with css custom properties.
* you can change the values of these properties in a media query
*/
:root {
--headings-size-h1: 28px;
--headings-size-h2: 22px;
#media #{map-get($display-breakpoints, 'lg-and-up')} {
--headings-size-h1: 32px;
--headings-size-h2: 26px;
}
}
Step 3:
In the variables.scss file (where you override the Vuetify variables):
/**
* Override Vuetify variables as you normally would
* NOTE: remember to provide a fallback for browsers that don't support Custom Properties
* In my case, I've used the mobile font-sizes as a fallback
*/
$headings: (
'h1': (
'size': var(--headings-size-h1, 28px),
),
'h2': (
'size': var(--headings-size-h2, 22px),
)
);
Step 3:
In the vue.config.js file:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "#/scss/_emptyfile.sass"` // empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795
},
scss: {
prependData: `#import "#/scss/variables.scss"; #import "#/scss/_font-size-overrides.scss";`,
}
}
},
};
font-sizes globally in the variables.scss file
html {
font-size: 90%;
#media only screen and (min-width: 600px) {
font-size: 94%;
}
#media only screen and (min-width: 1000px) {
font-size: 98%;
}
#media only screen and (min-width: 1200px) {
font-size: 100%;
}
}
I have written some LESS code that resizes text based on browser width. Multiple different elements and their parameters can be sent to the reusable mixin.
All online LESS compilers output the desired result. But I am getting different output from Squarespace's LESS compiler.
Squarespace's compiler appears to "hang on" to the old variable values when called a second time.
Can you see how Squarespace's LESS compiler is reaching its output and, if so, share changes that can be made to make the output consistent with all other compilers?
Output from online compilers: (desired)
#media screen and (max-width: 1280px) {
.homesCommunitiesLayout #pageHeroWrapper {
font-size: 120px;
}
}
#media screen and (max-width: 640px) {
.homesCommunitiesLayout #pageHeroWrapper {
font-size: 60px;
}
}
#media screen and (max-width: 1280px) {
#divisionTitle {
font-size: 85px;
}
}
#media screen and (max-width: 853.3333333333334px) {
#divisionTitle {
font-size: 56.666666666666664px;
}
}
#media screen and (max-width: 426.6666666666667px) {
#divisionTitle {
font-size: 28.333333333333332px;
}
}
Output from Squarespace compiler: (undesirable)
#media screen and (max-width: 1280px) {
.homesCommunitiesLayout #pageHeroWrapper {
font-size: 120px;
}
}
#media screen and (max-width: 640px) {
.homesCommunitiesLayout #pageHeroWrapper {
font-size: 60px;
}
}
#media screen and (max-width: 1920px) { //<---Gone wrong! Continuing to use element1!
.homesCommunitiesLayout #pageHeroWrapper {
font-size: 180px;
}
}
#media screen and (max-width: 1280px) {
.homesCommunitiesLayout #pageHeroWrapper {
font-size: 120px;
}
}
#media screen and (max-width: 640px) {
.homesCommunitiesLayout #pageHeroWrapper {
font-size: 60px;
}
}
LESS Source Code and Link to code on Less2Css.org:
#maxSiteWidth: 1280px;
#fullWidth: #maxSiteWidth;
//Element 1 Parameters & Function Call
#fitTextElement1: ~".homesCommunitiesLayout #pageHeroWrapper";
#fitTextElement1Max: 120px;
#fitTextElement1Min: 50px;
#fitTextElement1BreakPoints: 2;
.fitText(#fitTextElement1; #fitTextElement1Max; #fitTextElement1Min; #fitTextElement1BreakPoints);
//Element 2 Parameters & Function Call
#fitTextElement2: ~"#divisionTitle";
#fitTextElement2Max: 85px;
#fitTextElement2Min: 26px;
#fitTextElement2BreakPoints: 3;
.fitText(#fitTextElement2; #fitTextElement2Max; #fitTextElement2Min; #fitTextElement2BreakPoints);
//Primary Looping Mixin
.fitText(#targetElement; #targetElementMaxSize; #targetElementMinSize; #targetElementBreakPoints) {
.mixin-loop (#loopIteration) when (#loopIteration > 0) {
#{targetElement} {
.setBreakPointWidth(#loopIteration; #targetElementBreakPoints);
#media screen and (max-width: #breakPointWidth) {
.setFontSize(#loopIteration; #targetElementMaxSize; #targetElementMinSize; #targetElementBreakPoints);
font-size: #targetElementFontSize;
}
}
.mixin-loop(#loopIteration - 1);
}
.mixin-loop(0){}
.mixin-loop(#targetElementBreakPoints);
}
//Function to set font size
.setFontSize(#loopNumber; #maxSize; #minSize; #breakPoints) {
#targetElementFontSize: (#maxSize/#breakPoints)*#loopNumber;
.resetFontSize(#targetElementFontSize; #minSize);
}
//Function to reset font size if below minimum desired
.resetFontSize(#calculatedSize; #minSize) when (#calculatedSize < #minSize) {
#targetElementFontSize: #minSize;
}
//Function to set break point
.setBreakPointWidth(#loopNumber; #breakPoints) {
#breakPointWidth: (#fullWidth/#breakPoints)*#loopNumber;
}
Note that Squarespace uses LESS 1.3.3 so you'll need to manually switch Less2Css to that version (though it doesn't seem to change anything if you don't).
Having put much more time into this, I've discovered there are a lot of issues with the code as I posted it. In older versions of LESS, variables would "leak" up to parent scopes, which is the only reason any of this code was working at all.
In the end, the solution was to abandon the old 1.3.3 version and write for the latest version, rewriting the entire code NOT to depend on such "leaks". Then to precompile using an online compiler until Squarespace updates their compiler someday. For now, I just have to precompile it before saving it to the file that is on the Squarespace Server.
Without getting in the specifics of exactly what went wrong, I'll just mention that the top reason I've had issues with LESS and Squarespace's compiler is because it's not the same as LESS. Squarespace previously used a Node implementation of Less.js, and then rebuilt the compiler in Java to gain performance over Node/Less.js.
So the key takeaway is that Squarespace's LESS compiler is based off of Less.js and not identical to the same LESS compilers a developer would use. You'll definitely find odd scenarios where things won't compile the same.
I would submit any bugs you find to the official repo here: https://github.com/Squarespace/less-compiler. Their engineers are pretty responsive!
Im trying set a media query breakpoint with LESS so I can have something like this:
#media (max-width: 1000px) {
// something
}
#media (min-width: 1001px) {
// something
}
I want a single place to control the breakpoint. The following isnt working. Is this just a syntax issue or am I going about this the wrong way?
#breakpoint: 1000;
#breakpoint-max: #breakpoint;
#breakpoint-min: #breakpoint + 1;
#media (max-width: #breakpoint-max) {
// something
}
#media (min-width: #breakpoint-min) {
// something
}
I not sure why the media query to try to compile should not work, except for the missing unit as mentioned by #SLaks already.
In you example situation you can apply 'mobile first':
#breakpoint: 1000px;
#breakpoint-max: #breakpoint;
#breakpoint-min: (#breakpoint + 1);
//something
p {
color:red;
#media (min-width: #breakpoint-min) {
// something
color:green;
}
}
The above compiles into the code shown below by default:
p {
color: red;
}
#media (min-width: 1001px) {
p {
color: green;
}
}
The color is always red, unless the screen width is wider that 1000 px.
Also notice the brackets in #breakpoint-min: (#breakpoint + 1);. The requirement of brackets in this case depend on the sm option:
-sm=on|off Turns on or off strict math, where in strict mode, math.
--strict-math=on|off Requires brackets. This option may default to on and then
be removed in the future.
You never specified a unit.
You need to set your variable to 1000px.
Variable #screen-xs-max is a Bootstrap 3 variable. In my mixin, I'd like to use #class variable to get the Bootstrap variable, dynamically.
Here is a not working solution:
.make-btn-block (#class) {
#media (max-width: #screen-#{class}-min) {
// Code
}
}
.make-btn-block(xs);
Another not working solution:
~"#{#screen-#{class}-min}"
See referencing variables by name. E.g.:
.make-btn-block(#device) {
#max: "screen-#{device}-max";
#media (max-width: ##max) {
color: red;
}
}
How to use LESS variables in #media queries in Adobe CQ5?
myFile.less:
#myVar = 10px;
span {
width: #myVar;
}
works fine.
But:
myFile.less:
#myVar = 400px;
#media all and (min-width: #myVar) {
span{
color:red;
}
}
Results with:
clientLib.css:
#media all and (min-width: #myVar) {
span{
color:red;
}
}
This code is perfectly valid LESS since version 1.2.0 (released two years ago):
#myVar: 400px;
#media all and (min-width: #myVar) {
span {
color:red;
}
}
So assuming #myVar = 400px; is just your typo here, it looks like you did not update your CQ5 for a while. Consider upgrading it to 5.6.1 which includes LESS v1.3.3 (pretty ancient too but at least it supports variables in media query).
I also suspect that it is possible to manually update LESS script included with the CQ simply by replacing the "less.js" file (found somewhere among other CQ files) by its newer version.
From: http://flippinawesome.org/2013/05/20/less-tips-and-tricks/
/* note '~' in the beginning - media query must be escaped */
#singleQuery: ~"tablet and (min-width: 500px)";
#media screen, #singleQuery {
set {
padding: 3 3 3 3;
}
}
--
#myVar: ~"400px";
#media all and (min-width: #myVar) {
span{
color:red;
}
}
compiles to:
#media all and (min-width: 400px) {
span {
color: red;
}
}