Responsive Menu Concepts. The following is a guest post by Tim Pietrusky. 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. Not only is it a timely concept, but one of the concepts improves upon a clever CSS trick we've covered here in the past. When it comes to responsive design we are faced with various techniques on how to best handle altering our navigation menus for small screens. Three of them are made with pure CSS and one uses a single line of JavaScript.
Before We Start In the code presented in this article, I don’t use any vendor-prefixes to keep the CSS easier to see and understand. All menu concepts in this article are based on this simple HTML structure which I call basic menu. To address small screens I use the same media query on all concepts. @media screen and (max-width: 44em) { } 1. This is what it looks like on a small screen with a custom style. Sass vs. LESS. “Which CSS preprocessor language should I choose?” 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. It’s nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let’s do this thing. Really short answer: Sass Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in Less, that’s cool, at least you are doing yourself a favor by preprocessing.
Much longer answer: Read on. The Much Longer Answer The Learning Curve with Ruby and Command Line and Whatever The only learning curve is the syntax. Winner: Nobody Helping with CSS3 With either language, you can write your own mixins to help with vendor prefixes. In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. In Less, there are also some mixin libraries battling to be the best. See that? Sass vs. LESS. Media Queries, Sass 3.2, and CodeKit. Media queries are already awesome. 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. 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? As of CodeKit Version 1.2 (6449), you can now tell CodeKit to use an external compiler:
CSS Media Queries & Using Available Space. We've covered using CSS media queries to assign different stylesheets depending on browser window size. 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.
@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. 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. 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. When the viewport width is greater than or equal to 768 pixels, and less than or equal to 1023 pixels, the font size is 18 pixels. Right away, you should be struck by how much code is required to do something as simple as responsive typography. Media queries are hardcoded in the code and copied where they're needed. Shortening Things Up Sass allows variables to be interpolated. Now, we can use the $tablet and $desktop media queries anywhere in our project without duplicating code. Mixins to the Rescue The code above works, but it's a bit difficult to read. We're not just limited to device sizes. Media Queries, Sass 3.2, and CodeKit.