Menu icon Foundation

Designer | Nottingham, UK

My Posts


My Comments

Alan Durkan commented on Alan Durkan's post almost 3 years

 In the end I wrote the following function to suit my purpose:
function getBreakpointPx(e) {
var o = parseFloat($('body').css('font-size')), t = parseFloat(e.match(/[\d.]+/));
return o * t
}
var p = getBreakpointPx(Foundation.MediaQuery.get('medium'))); // <-- returns 640
Only an intermediate solution until something more reliable can be found.
Hope it helps somebody

Alan Durkan commented on Alan Durkan's post almost 3 years

<!-- [if gte mso 9]>


/o:OfficeDocumentSettings
<![endif]--><!-- [if gte mso 9]>

Normal/w:View
0/w:Zoom




false/w:SaveIfXMLInvalid
false/w:IgnoreMixedContent
false/w:AlwaysShowPlaceholderText

EN-GB/w:LidThemeOther
X-NONE/w:LidThemeAsian
X-NONE/w:LidThemeComplexScript










/w:Compatibility












/m:mathPr/w:WordDocument
<![endif]--><!-- [if gte mso 9]>




















































































































































































































































































































































































/w:LatentStyles
<![endif]--><!-- [if gte mso 10]>

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}

<![endif]-->Ok - I've figured that the docs are little contradictory.
On the Media Queries page the behaviour i'm seeing is accurately described. However on the utilities page the description of the returned value for this function is different - and is actually the functionality that I need.
If anyone does have an idea of how to retrieve the minimum pixel value of a named breakpoint that would be great.
Thanks
 

Alan Durkan commented on Peter Crymble's post almost 3 years

Peter, essentially...
@include breakpoint(medium) {
// All CSS here...
}
...is 'medium up'. See the docs on media queries.

Alan Durkan commented on Peter Crymble's post almost 3 years

Peter - if you're using Foundation 6 try:
@include breakpoint(small only) {
// your code here...
}

Posts Followed

  • 3
    Replies
  • Basic SCSS question

    By Peter Crymble

    scss

    Hi there &nbsp; I've always use the plain CSS version of foundation - just got the SCSS version working and I'll never go back!! &nbsp; However, I'm now converting my old CSS file to SCSS and want to use the small / medium variables e.g. @media #{$sm... (continued)

    Last Reply by Alan Durkan almost 3 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Alan Durkan's post almost 3 years

 In the end I wrote the following function to suit my purpose:
function getBreakpointPx(e) {
var o = parseFloat($('body').css('font-size')), t = parseFloat(e.match(/[\d.]+/));
return o * t
}
var p = getBreakpointPx(Foundation.MediaQuery.get('medium'))); // <-- returns 640
Only an intermediate solution until something more reliable can be found.
Hope it helps somebody

You commented on Alan Durkan's post almost 3 years

<!-- [if gte mso 9]>


/o:OfficeDocumentSettings
<![endif]--><!-- [if gte mso 9]>

Normal/w:View
0/w:Zoom




false/w:SaveIfXMLInvalid
false/w:IgnoreMixedContent
false/w:AlwaysShowPlaceholderText

EN-GB/w:LidThemeOther
X-NONE/w:LidThemeAsian
X-NONE/w:LidThemeComplexScript










/w:Compatibility












/m:mathPr/w:WordDocument
<![endif]--><!-- [if gte mso 9]>




















































































































































































































































































































































































/w:LatentStyles
<![endif]--><!-- [if gte mso 10]>

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}

<![endif]-->Ok - I've figured that the docs are little contradictory.
On the Media Queries page the behaviour i'm seeing is accurately described. However on the utilities page the description of the returned value for this function is different - and is actually the functionality that I need.
If anyone does have an idea of how to retrieve the minimum pixel value of a named breakpoint that would be great.
Thanks
 

You commented on Peter Crymble's post almost 3 years

Peter, essentially...
@include breakpoint(medium) {
// All CSS here...
}
...is 'medium up'. See the docs on media queries.

You commented on Peter Crymble's post almost 3 years

Peter - if you're using Foundation 6 try:
@include breakpoint(small only) {
// your code here...
}

Posts Followed


Following

  • No Content

Followers

  • No Content