DrupalCon Portland 2013

Gestionando el diseño responsive con Sass y sus extensiones

Mason Wendell, Sam Richard  · 

Transcripción

Extracto de la transcripción automática del vídeo realizada por YouTube.

good morning and that hopefully will be what was much as it woke me up I'm so excited for sunday so welcome to this talk which is called that which is a mouthful and it was originally shorter than that and then I had Sam start to talk about singularity

it was now it's ridiculous so this was kind of how I'm thinking of right now the mic cool so yeah this is the right way to do are to be there is no other way questions at the end so this was probably two years ago at Google pun so when he was giving

a talk about responsive and posed the question of the audience OHS responsive design part again I'm for the shop into the mic right so its responses are and I thought it was a trick question people were like acid i don't know i don't want to seen

it all so i stood up and said well yeah it's designed um yes and the thing that i want to kind of keep in mind and this is to talk about technique but the reason that I wanted to say this now is that all these techniques they go to serve the both the greater

good experience project so the techniques might be somewhat difficult but you guys are gonna learn something you learned something in this session so no but it's the process of thinking things through and designing that's always so who are I'm

Mason Wendell senior front-end developer at NBC traversal on Twitter and most other places i'm coding designer but because get up as make it easy for you to change your handle basin action soon i will be throughout the coding designer and actually from

you guys want to find like call me i am putting twitter throw me off my game because i'll be checking um I'm co-organizer of teams ass along with my friends and here and wonderful smart people and where I live in Philadelphia I organized the exact

speedo and ha morning pop I'm Sam Richard I am also leaves a new front end developer over at nbcuniversal I am snuggled on twitter and github generally speaking the internets and I'm to organize your team SAS and the upcoming SAS conference so if you're

interested in SAS follow twitter and you will get you will see on announcements next week so before we get started let's get a few things straight everyone hold up your hand if you want a smartphone hold up your actual phone also give it give it raised

give erase this is this is participatory I do it much lower your phone and only if you have the same device make and model with the same operating system as your neighbors that's what I thought so to get started with this we will be working on the premise

that you are building device agnostic because if you designed for specific devices your devices but because responsible it's not about current devices and known unknowns future devices and unknown unknowns so yeah what's the right way to do things

we're not targeting devices specifically we start with content first probably everyone in the room knows to Jeffrey's ailment is and I think he's good to talk about this in which redesigning his blog but it's something that I found in my work

that it's actually kinda hard to design something until you know what it is you're designing and since we're working on the web and everything on the word is content with very rare exception good idea to know what the content is so start writing

it start understanding it get a feel for what flavor the content is if you don't have the actual or its images so we do that and then we design for our most constrained device or system that we can come up with and that's usually my piece of to do

a few months but for now we're talking about low first and I'm not gonna belabor that point beyond that we're going to use web standards these best practices we're going to listen to our industry and we're going to talk to our industry

to make sure that we're all moving in a really good direction and especially we're going to be device agnostic and future friendly I don't know what what phones you guys have I don't know what device I'm going to have soon enough so we're

going to try to to anticipate actually not anticipate we're going to try to justice commit the web as the web I'm going to meet you there like so what else do we do why are we here in this particular well we know SAS and SAS is the key to writing CSS

the right one because this isn't a beginner course of energy session I want to get a couple of ground rules um so if you're working with SAS and you're in here I'm going to see me know about variables and nesting if you don't please don't

go they're not too hard to pick up a new pic of us as we talk about to go over exactly what's put on there you've used some nixon's kind of the same deal to think that we're talking about are some custom mix and packages hopefully you've

tried compass compass is we're going to get into the specific functionality of compass beyond its ability to import extensions but compasses a lot of really great features especially for writing css3 so let's learn some tasks together we'll start

off without any of the special packages some vanilla SAS for writing matey Bruce and I want to talk about break points versus tweak points so everyone's probably worth of return break points and it probably not too crazy what we please my feet but I think

of it in terms of when you've got large chunks and stuff that you react that you're trying to move in Iraq to screen dimensions breaths so you've got a layout going from two columns or three columns six dollars of whatever going to be I would think

of those as large changes big break points but to try to illustrate the difference between that kind of responsive web design and massaging little details I think the term click once makes sense so there's a reason I don't like writing things this

way and that's the context of what I'm trying to change when I'm ready so I've got your two selectors want for menu 11 / sub nav and we're changing some padding when we get to a 500 fixit's wide browser and what I'm actually trying

to do in this example here is monitor is changed something within the context of either of those selectors so in under the selector menu when we get to a thing I want to do something else same thing what's up now so when I'm writing this when I'm

watching this I'm watching that paddock and that you know eight other characteristics on the CSS that I'm changing in the real world and that's all in the context of making if fabric split up so the menu was you know 200 lines above the media queries

remain you I would have a hard time visualizing that as I'm writing so what's asked gives you the ability to do is to nest your media queries the insider selector to put it in the context of that selector so one level nested for menu is our media query

and that's going to compile out to CSS that looks just like this and this is a lot easier to write individualize and then this especially when you get into complex selectors and complexes ecorse so is it a problem that we're breaking up our media queries

into these fine brain things from farms perspectives didn't mean to do that no it is not the there been tests done it's not going to affect the speed at which a browser can interpret the CSS it's not going to affect your download / been a significant

amount especially if you can compress your CSS which we were all are or should be doing Google to the side of the box so don't be scared to write your media queries another way it'll make you like a lot easier so there what a great point Bree point

is the outcome of a little bit of frustration i was having writing media queries and that i was writing a lot that looked the same and i recently actually be written an article on SAS and how you can use SAS make sense to make me queries right a little bit

more efficiently but I thought the logic that I had worked into that was a little bit lacking so I started to play around with assigning breakpoint variables break once frankly values to variables and it saved my bacon on that project and actually open up

a lot of cool six yeah a little bit o barely barely community patch so why would I want this why do i do this i started off like i said just kind of put a value to a variable and be able to pass that around i'm writing a lot of men with value lot of men

with many media queries and so I said okay well how about I just set this one value the number of them in with media query to a variable and that's pretty cool it's simplified my little ones and then I abstract that a little further in the in the extension

so that I could have that same kind of simplified syntax for complex media queries just right mid worthless just mostly um and then I found that I was a sunny was meaningful names because I can't just pull up in a great point 1 2 3 4 s kind of boring enough

work so i decided a name based on why I needed a media query and then this was the unattended consequences i'm now managing my media queries by their purpose in other contexts so actually i'll come back to that second so if from I've got a media

query that I'm writing because my menu at one state is so long and others dated so long our do something else then I can have that the inside to a name as a variable I can other things triple that effect so if we're going to start using break point

this is where we go so I'm github and these slides are online up with the lincoln electric slide so you can go and check all that out and these links work so on your command line it's like how you would excuse any compass extension by otherwise you

this so Jenna saw break point and your command line require great point and your compass that are be filed as if I where you configure your compass project there are a lot of other configurations to go there and then in your working SAS while you're an

import break point that's going to allow any sassy right to use the break limit so let's get on to getting started with right point just hands up who knows point breaks movie good okay cool no that was like seventy eight percent of people point break

movie 1991 class at Patrick Swayze Keanu Reeves look it up hi cool so this is the basic use of great point on that variable at the top basic 500 pixels I don't know if you can read there I don't if you can read the great comments for you on the screen

but that is the great book very oldest that's a simple etiquette that's where you can post off so Johnny Utah is a character and his default color is Buffy he looks like coffee before anything cool happens and then once we get to 500 pixels he's

the color of badass so that's how you use break point and it just compiled like hopefully you would expect it to just make them in with media query it's pretty simple but the real benefit there is that we've given it an a pretty gets more complex

but one of the other cool things that we can do is we can start to be a little bit more accessible without any extra effort it's if somebody is for whatever reason change to the default font size on their phone or on their device whatever your pixel based

[ ... ]

Nota: se han omitido las otras 5.580 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.