background preloader

Media query

Facebook Twitter

Responsive Menu Concepts. The following is a guest post by Tim Pietrusky.

Responsive Menu Concepts

I know Tim from his prolific work on CodePen and from being a helpful community member there. He wrote to me with this guest post about responsive menus which I'm more than happy to share with you below. Sass vs. LESS. "Which CSS preprocessor language should I choose?

Sass vs. LESS

" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. Sass vs. LESS. Media Queries, Sass 3.2, and CodeKit. Media queries are already awesome.

Media Queries, Sass 3.2, and CodeKit

Media queries in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome. This is how you can get CodeKit to start using it. This isn't a brand new idea. Ben Schwarz did an excellent 7 minute video showing us how it works 7 month ago. The magic is thus You can already do this in the stable version of Sass (3.1.2): Sass will move it out to valid CSS like this: But you might want to do that tons and tons of times in your CSS, because of how awesomely convient and how much sense it makes while authoring (rather than clump them all at the end which breaks cognitive connections). Now you are stuck repeating yourself a bunch, which is exactly what Sass tries to help us not do. Like calling media queries "breakpoints"Don't like the idea of naming them after anything specific, like "iPad"Like fairy tale analogies So, I write my mixin like this: Now I can write code like: And it will work just how I want.

But what if you use CodeKit? Enjoy! CSS Media Queries & Using Available Space. We've covered using CSS media queries to assign different stylesheets depending on browser window size.

CSS Media Queries & Using Available Space

In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". Likewise, you can use more advanced CSS media queries like: You may use as many media queries as you would like in a CSS file. Example Let's say we have a fluid width design where the sidebar is 35% of the width of the page. In our example sidebar, we are going have a list of names of the Super Team which function as email links.

Types.

Shortest--

@media. Summary The @media CSS at-rule associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a media query.

@media

The @media at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule. The @media at-rule can be accessed via the CSS object model interface CSSMediaRule. Syntax How to read CSS syntax. @media <media-query-list> { <group-rule-body> } A <media-query> is composed of a media type and/or a number of media features. Note: Firefox currently only implements the print and screen media types. All Suitable for all devices. print Intended for paged material and for documents viewed on screen in print preview mode.

Screen Intended primarily for color computer screens. speech Intended for speech synthesizers. Note: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, aural), but they were deprecated in Media Queries 4 and shouldn't be used. Write Better Media Queries with Sass. Let's face facts: media queries can be a pain.

Write Better Media Queries with Sass

They're difficult to write and they tend to get duplicated a lot. Sass includes a few helpful features that make media queries easier to work with. This article will show you these tricks and how you can use them to simplify your stylesheets. The Basics Let's take a look at a simple example. Here, we've set the font size of paragraphs to 16 pixels. Media Queries, Sass 3.2, and CodeKit.