49743

Zurb Foundation _global.scss meta styles for js?

I was working on a Foundation 5 project that turned out to have an outdated _global.scss component. I was trying to get range sliders working, but they were mysteriously not. Turns out, I was missing the following 2 lines of CSS:

meta.foundation-data-attribute-namespace { font-family: false; }

Can someone explain these lines to me? The Docs say this:

// Used to provide media query values for javascript components. // Forward slash placed around everything to convince PhantomJS to read the value. meta.foundation-mq-small { font-family: "/" + unquote($small-up) + "/"; width: lower-bound($small-range); } meta.foundation-mq-medium { font-family: "/" + unquote($medium-up) + "/"; width: lower-bound($medium-range); } meta.foundation-mq-large { font-family: "/" + unquote($large-up) + "/"; width: lower-bound($large-range); } meta.foundation-mq-xlarge { font-family: "/" + unquote($xlarge-up) + "/"; width: lower-bound($xlarge-range); } meta.foundation-mq-xxlarge { font-family: "/" + unquote($xxlarge-up) + "/"; width: lower-bound($xxlarge-range); } meta.foundation-data-attribute-namespace { font-family: #{$namespace}; }

Thanks.

Answer1:

Some of Foundation's JavaScript needs to know about the different media query ranges definitions.

It is particularly true for some components such as interchange that is literally about things behaving differently depending on the viewport.

But foundation also lets you customize what the different breakpoints are.

In order to make have the value set in one single place, foundation uses this little trick of adding the media query breakpoint definition of a meta with a matching class name.

Here's how it works, for the breakpoint $small-up (it's the same for the others):

Let's say you keep the default value: $small-up: only screen.

The JS in foundation will do the following:

<ol> <li>create a <meta> tag with the class .foundation-mq-small</li> <li>read the value of the CSS property font-family</li> <li>now it knows what is the definition of the $small-up media query</li> <li>it's now accessible to the different foundation js components that may need it</li> </ol>

You can see how it's done in foundation.js

The reason why it's using font-family is that it's one of the rare CSS properties that doesn't have a defined set of values. If they had used the property text-align, the browser would have ignored the invalid value and the JS would have gotten something like left in return.

Recommend

  • Anyone successfully used jonnyw's “php phantomjs” with laravel, in a ubuntu envirement?
  • PhantomJS set browser timezone setting
  • Window object in PhantomJS
  • How can I play a GSM file in the browser using Quicktime on OSX?
  • C# regex for assembly style hex numbers
  • Mail arrives in spam
  • how to screenshot a div using phantomJS
  • Why does my regular expression fail with certain substitutions?
  • Why does _GET in PHP wrongly decodes slash?
  • Chrome firing onClick when space typed in contenteditable button
  • when does setTimeout start executing in a inline
  • Haskell: function composition with anonymous/lambda function
  • calculating number of bytes of each row in an image
  • @tailrec why does this method not compile with 'contains a recursive call not in tail position&
  • Spring integration inbound-gateway Fire an event when queue is empty
  • SQL Query - Table Joining Problems
  • Salesforce Different WSDL files and when to use
  • How do I include a SWC in an AS2 Flash project?
  • Silverlight DependencyProperty.SetCurrentValue Equivalent
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • jQuery ready not fired after rails link_to is clicked
  • How to run “Deployd” on port 80 instead of port 5000 in webserver.
  • Can you perform a UNION without a subquery in SQLAlchemy?
  • PostgreSQL Query without WHERE only ORDER BY and LIMIT doesn't use index
  • Change JButton Shape while respecting Look And Feel
  • HTML download movie download link
  • TFS: Get latest causes slow project reloading
  • Updating server-side rendering client-side
  • Join two tables and save into third-sql
  • Convert array of 8 bytes to signed long in C++
  • Display Images one by one with next and previous functionality
  • How to make Safari send if-modified-since header?
  • QuartzCore.framework for Mono Develop
  • RestKit - RKRequestDelegate does not exist
  • SQL merge duplicate rows and join values that are different
  • How to set the response of a form post action to a iframe source?
  • Understanding cpu registers
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Recursive/Hierarchical Query Using Postgres
  • Running Map reduces the dimensions of the matrices