Bestand wählen
Merken

Don't Use My Grid System (or any others)

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
that that all the
and the and the
end of the game are so migrants system any questions so the the good what that's the end of the talk had read their the yeah we went too
far but certain beginning beginning is
roughly there don't do GenGO knowing your your talking about this is a lot of the area right that is some fun talks even if I don't know what you're saying but and then a few that you know accessibility ID that might yet I will appear not so well established in credit so you know why I'm here but I've found it operate with my brothers and this is I think our 1st planning meeting I ignore the medically gathering cards I you may recognize the middle and by he's usually here I thought it would be fun the conduit talk with my brother and then he ditched out so sorry so so that's Carl Meyer if you don't know and so this is our team now we've grown up a little bit but since whatever that was 94 or something and we've got a team of 7 uh over a small agency doing consulting work and I do a lot of the user experience design and project management and front end design implementation and writing all sorts of tools for developers fast and open source community including hybrids Guterman which helps you manage abstract patterns in code like colors fonts and they're not physical patterns like your buttons and that sort of the more abstract patterns that exist in the design systems on so look something like this you don't care I don't carry the Herman helps to automate pattern libraries great fun and and then SUSY which ended up being the big 1 and uh the it's I don't know why it's just another grid system and a stop using it right around the time became really popular but still maintain and that's a lot of fun we also know that to go back a ways and you of the history of web layout and why we hybrid systems and why you don't need that anymore but so that starts with other
tables remember these I use a pixelated image because it felt right and like so ugly and the mock ups
all out of 0 yeah why do we do this to ourselves so let me talk this morning I silly again tables are for
data we know that and you know but at the time it was the only way we had allowed a page but that was before we even have the basics of CSS so tables or we had and we may do but you got really limited styling there's a lot you can do with the table and so you're really constricted there on the market is really strict and not its order right for data it's not a right for content and so you're always going left right left right left right and doesn't always make sense uncertain accessibility nightmare and we know that that's bad but because we want to be accessibility talk but
coding is communication and furthest lots of places I think it's really true and we're trying to do is write something that is readable to both other people and to a machine and if we succeed of both we've written the code so table layouts break all of that they destroy meaning for everybody they're not meaningful to the computer they're not meaningful to me when I read the market and they're just not meaningful great chapter 2 CSS is also so that's the end of the talk any questions that it you've all seen this I'm sure the and I just wanna remind you that this is not about this is a feature and I mean that but this is what happens when you are to explicit about too many things on the web but this is also what happens when you don't specify your overflow so CSS secure is allowing you to make lots of decisions even bad decisions and this is you making some bad decisions and you're welcome to do that and it can be fun but but that's OK that's not a problem with the language up I seem to remember with CSS is that it's easy to be fooled by the declarative syntax into thinking that it's a static language that you put something in and you get a result and that's it and that's not how the web works I with CSS you really putting in rules for how something is going to change across different browsers across different platforms across different the device sizes window sizes and all sorts of different changes that can come at you and CSS is a set of rules and suggestions for how you might way that out and so you're really wanting to define dynamic relationships between objects in a way that doesn't couple them too tightly but this is you know like programming and now your design for what happens if the content changes gets gets really long it's really sure I what happens if the viewport changes what happens if the context changes we take this we put it somewhere else and it has more or less space the and the client has control over what the final look this and I don't mean of the quantifier do you mean the client browser i has finer control and sometimes the user that browser changing the settings using if a browser that they can control and it's a complete paradigm shift from 1 we're doing print designed or many of us probably wondering for design and I was
have been our dealing with this so I write 1 piece of code and then all these devices see it and this is like some fraction of who might be looking at my layout so it's not just the 1
orange guy with yellow hair and you're dealing with you're dealing with all these guys and then all of these people to and then these people and you don't even know which ones have autism or some other color blindness etc. so you gotta deal with a wide range of users and we're not talking just about w CAD accessibility of that thing and also from being aware of people so entities important and I think we all know that that's the job branches
we heard and you know this morning great so chapter 3 layout options the different ways we could do work no weight concepts concepts OK a few things that'll help get you started with CSS layout so 1 the box model this is the 1st step in any CSS layout the box models broken and you better fix it and it takes a line of code this is the default box model on when you've got a box in CSS and it has a content box the padding box the water box and then the margin and and by default when you set width and height on an element your setting the width and height of the content and then adding and borders and margin are all added on top of that and that doesn't make much sense when you're laying out a page generally you want it to be this way I you wanna set with an height but the defined that outside of the box where the border where the padding and so it takes 1 line of
code to do that and that's it but it's a universal selector that changes the box model and everything to the border box and there's a reason we do it this way and not the other way that's going around but there's a reason in CSS inheritances pork important you might have heard of the cascading style sheets and that's inheritance is what that's about and that means things trick can triple trickle down the chain the non on and this is taking and putting it to use that by setting the box size once in the HTML elements and inheriting it everywhere else but a similar to inheriting your waters similar to inheriting backgrounds doesn't make any sense you don't want to inherit the box properties so don't do it we want to avoid this tightly coupled elements are so that means we want build everything so that it can flex on its own but in relation to other things around it and then that means were really focused on building relationships between things but in a way and so I say this will fill all the remaining space but this article take up this space in this object will take the remaining space and and being to explicit about those sizes is a problem because then suddenly are coupled so if we have if I have to explicitly state how each object takes up space and we'll get to exactly how it works so part of doing that is going with the flow and the flow in CSS is something like this and it goes left to right and top to bottom and when I resize this 1 element of the other objects flow around it and that's good that's useful we want that so 1 of my rules for CSS layout is whenever you can stay in the flow this is what happens if you don't see in the flow now we resize this 1 and and nothing else changes and suddenly are layout broken and and that's worse so we wanna the in the floating in all right I think I have a real use case let's call it that is like goes on so that's now In the
ego so I made it so that I can resize this 1 the then you can see by staying in the flow its resizing both great so we have a like go to the orange we take a away away from the purple right a real use-case gets all right from a click in there critical factor so if you layout
techniques different ways that we could approach laying out a website so my 1st came to CSS I thought relative positioning would probably the way to go that sounds the most reasonable right layout is positioning astride s it doesn't work
and it just pushes the box around and doesn't affect anything else so that's broken Ragonese at absolute positioning effects positioning of positioning just doesn't
work as it sounds reasonable but it's not reasonable for layouts absolute positioning goes off of the parent element or the the most recently position element in the ancestor 1 of their own which is the only way to relative positioning is useful for use relative positioning to create an ancestor class of position off of this is crazy I don't know why we why we have it that way but that's all they do absolute positioning and fixed
positioning are great for 1 thing only overlays if you need to create something that is not part of the layout something that's not part of the flow that separate from everything else the tooltip the drop down menu or something is just gonna come and go that's when you can use those so then we finally get CSS floats and they're like the least bad fact we had for a long time not terrible they're built to do this I wish they do perfectly like home in you wanna have some text around an image you float that ship and it's it kind of stays in the flow look at that look at that flow and we can we can know the resize this can I get and things almost kind of flow around it but not quite and again that makes sense for floating text around images you can see that that's basically what it's doing and it's making text flow but not the actual objects themselves unless they're also floated so that's weird uh but it makes sense for text wrap and why you need to
fix that is a clear facts and we've gone through like a million of these in the front and world before landing on this 1 now people use fairly regularly uh micro clear facts and they're all it does is create this will hidden element that I've just shown at the bottom of the screen but that clears everything but on it's a fact that it's not beautiful but you can you know you can create a mix center you can create a utility class however you like to do it and you can clear your floats and this is how we did layouts for quite a while now there's this new thing with terrible support that does that this is a clear effects I'm actually in the spec and you can use it so this decide like now I have the other way you can the effects this is a much simpler have but with some side effects that you can just put overflow hidden on an element and it will clear that it's children it's for the children so that's very clever but then it's dangerous if you ever want to break outside of the container because you just hidden everything that goes outside and so this is what you
get and if you use the overflow had also on something next to it your create a a box that can respond and fill the remaining space so the overflow hackers is also useful there and so we can have this be a fixed it's fixed with and this will flow to fill the remaining space we also use the overflow act on the container in our wraps so that's clearing
flows flows are great for flexible market you can do as much nesting is you want you can have this ugly is that job was to stop giving me this in Java Script I want them where you can like you can nest all this yet and you can still ladies things out it doesn't matter those this because of the way the uh boxes collapse around floats those boxes will just disappear and you can lay out all elements that are not siblings and that's rare in CSS often things have to be siblings so this is kind of nice when we get free that but with floats you always want to define the which they sort of automatically go to the widest that the content wants to go and it's not reliable so you all anytime you set of flow you basically always want set away part which is not great you end up sort of as I said earlier with tightly coupled elements because every size affects what space is available for every other elements that there used to be this pixels of this sub-pixel rounding issue there we got forgot about nursing grid systems because it's built specifically to handle it but it's not really an issue anymore this is what I did and every browser solved by this mass equation differently so if you get 25 per cent of 50 pixels what is that and in every rather browser had a different algorithm for figuring that out and that several of them would wrap to the next line I 1 obviously 25 per cent times for should really get you there and so that's how I
was by now you can see so float isolation is that the trick that people came up with the net on the bottom here now I can see those red lines appearing are when we get an error in the sub surrounding on and right now the top part is just floated and you can see the brothers to fix this problem so if you hear somebody telling you you can't do something because sub-pixel rounding something something floats doesn't matter anymore it works but if you really need isolation it's kind of a weird hack and you can use some interesting things with that but only on rare occasions and it's not for this anymore background images for some reason
still have some bit rounding issues and there's no way to fix that I don't know why aren't so you can see the white lines are actually elements showing the correct weights and then the red lines are they lining up to right now so you can see that there the red lines of the background and the white lines of the elements John every once in a while and because the background image still has suffered surrounding issues and that's why a lot a grid systems that give you a gradient background the gradient backgrounds a little steady we do that
by his Magritte systems and the that some people for a while then started doing in my black layouts mainly because you can do some vertical centering on but it's really invasive in the hacks a really complex to make it work you gotta basically your font size is 0 and then bring your font size back up for every element it's weird I don't I don't recommend it there's lots better ways to vertical centering now but leave that 1 out on display table this was interesting this is you can now use CSS to mimic a table but you know you have a table in your mark up so that means you can do it you can do a table layout and semantically friendly and that's great is weird but it's great so table layouts can do a few things from like this is the same mark up top and bottom and then uh I decided display table and suddenly it was the next to each other and they all resized to fill the space but so that's interesting again this has some of the same problems by the tables did in terms of limited styling and it can be difficult to work with but it doesn't it doesn't clever use of space solve some issues there so worth knowing worth keeping in your toolbox he said display table or display table sell orders display table row and you can mimic those elements then we have flex box
and flex boxes manage it is the 1st thing we have is not a hat but like we this is actually built for the browser to lay things out that's what it's for and it's got really good support if you're scared of using Flex box don't be scared but all I was looking last nite I wanna begin may I use . com which would be like can I use but like give you permission but few absolutely you're welcome to use this and so if I could I think somebody spotting on it may be overlooked for me I used I or something however so you can do all sorts of things the flux blocks a mechanic it and all the right now but you can do equal hide columns you can do the Newton step you can align things of the polymer the top the laughter there you can all sorts of you can rearrange a layout so it's right to left in a single a declaration and there's all sorts of things you can do here at and you are finally setting up relationships so this is some stuff on the container you set displayed flax line items and justify contents will define how spaces are distributed around elements vertically or horizontally and then with the order property actually doesn't make sense that a corner container that would go on the item itself you can rearrange the order of your elements so you can have in a reasonable ordering in the down and then move them around the visually as you need to and it's it's really it's great i you get this reflects growing flex shrink and facts basis and now you can really see where were developing systems of relationships rather than a static output were saying here's an ideal weight that's a basis and then here's how much were allowing it to shrink relative to other elements when less space here's how much for allowing it to grow so there's a simple ratios you say that flex grow 1 and if everything in the Rose FoxPro 1 no grow equally to take the remaining space and if you set 1 the affects 1 and 1 deflects to and the ones that flex 2 will take up twice as much of the remaining space so as not only twice as big it's going to flex twice as much but be aware flexed basis the falls to 0 with setting if you set with your flex basis will use the which setting and and your with setting the false to auto so if you don't set that either 1 of your flexed basis is auto which is again similar floats it's sort of the whatever size it thinks this content would most like to take up on which if you're using images that trying to shrink down uh it can start pushing everything inside so it's useful but to a set that explicitly and say what would your aiming for and so you can very quickly with FlexFax but create like of full way out with people columns and remember when this used to be a holy grail of some kind that
it's fairly simple words a a little bit of facts box just telling things that they're allowed to use the remaining space and which uh which parts should be static in which parts should flexed so I
said that 2 sidebars static and the inside is flexible maybe a little too
flexible and the failure of a lot of
control the but it's still
one-dimensional it's still like floats but it goes left to right and then wraps around so you're still not dealing with anything vertically on the page well you can turn it sideways kind of you can set it to work in a column and wrapped in columns and but either way your setting it to go in 1 dimension and then wrap up there's no way to manipulate 2 dimensions simultaneously so that the limiting factor i'm nesting also matters here so we need display contents is coming and display contents what that will do is basically remove an element from being painted and so if you've got it give this just sort of an extra bit you can just say display contents and it's children will come up a level 5 in the novel that that element will disappear that's coming it's not supported get that will help a lot because right now everything that your flexing has to be siblings on it's really great for
this kind of thing when where where we used to use floats in some places but when we're just dealing with little internal layouts and it the widgets they were building flex box works great but it has some performance issues
when you're dealing with the whole page get loads slowly trying to figure out all of the different sizes and it's not great and being one-dimensional most page-layout or not so it's mediocre for the big layout but it's a great replacement for the the tables or floats and a small level right and here is where we get into grid systems although going back a little bit because we didn't have flexed box mostly criticisms systems came out and this is sort of a historic detour into why we have good systems and how they work this is URI
average grid system so 12 columns they're all the same size and there's some inventors between them and and that's roughly the idea and the idea is this provides some
consistency for our design right we limit ourselves to but 12 different positions and then uh from each position in the 11 or so spans that we can do from there on the downside it enforces consistency and so when you got a great system that's being used by all of the projects across the Internet strapped on all the all the all certain look the same and that's boring on the other hand that the real reason I think they started to spread back in 2007 2008 they were sort of the 1st big thing besides Eric Meyer said they were the 1st big thing that was open source in the CSS world don't remember open source and CSS world before grid systems I was like blueprint came out and suddenly everybody was using it and part of the reason is because in order to do a a simple floating that point you had to use about 6 different hats on and so these grid systems were mainly built to solve all of the hacks around floating on most of those taxes disappears so that reason is gone so this is blueprint is the first one that I remember and when I look at the others it seems to be the 1st 1 that can help on made by all lost and this is how it works CSS at that point the only API you can build in the CSS is classes so uses a class API and then it allows you to add a class that will give you columns and gutters and now in this case using the wit and right margins to create the gutter and then you can spend sex and you still get the gutter on the end which I didn't show there has I guess I don't wanna show you not but then what happens is we get to the end of the row you have to take that better off so if you put gutters on all of your grade items subtly removing the last 1 and that's where you get that i . last that became sort of standard every every other grid system came out of this method so users can see we get several classes from this 1 we have a class of column than of what size of column and then the last last to remove that last model and that's pretty much how grid systems have worked on classes are the API and it's nice that we finally have a clear API for layouts I mean and it's it's sometimes nice that developers can ignore CSS but also really sucks the developers are starting to ignore CSS which is why I'm here and and it really works best for a massive codebase uh where you really have a lot of separation between the and the people building new widgets and the people designing the patterns that you can sort of have this simple system of classes that you don't have people stepping on each other's toes as much it works there it doesn't work as well when you're a small agency trying to design an interesting new websites but for new clients consistently control your client project start to look the same that's not greater so it depends and I'm going to
keep moving hi you're not male forces face unless you are so you may be done it so this is object-oriented CSS this came from Nicole Sullivan it's a little bit simplified but it's not actually technically a grid system it doesn't give you the tall columns it just gives you fractions that simplifies a lot this is actually the full
code of 0 CSS grades in her 1st command and so it's much more compact and it just gives you fractions and that simpler there's no gutters on will come back to
that so offers a similar though unit size 1 of 2 years you have but the 960 grids and you can see it looks pretty similar except that what they did was they put margins on both sides of everything and that means we don't have to worry about it at the end we just have a little bit of space of the edges so we got cutters in between and a little bit extra
on and that's a little simpler you don't have last you don't have anything removing the margins so OK that's clever meanwhile in 2008 Natalie down is
sitting right here I gave this great talk I have Barkan planned and that of launch my career so I have to mention a every time and it's a good talk that if you get a chance that it's still relevant uh almost everything in here is still true but the idea
was to create consistent ways of building websites instead of creating the tools that would make us do it exactly the same every time so that's sort of the overall idea is let's have systems instead of strict frameworks and then we can make changes frameworks like you and other fine until you want to do something unique and so then her method starts with an answering lots of questions figure out exactly what kind of say you want and in in in this method by your always building the inside with percentages and the outside usually with OEMs and max with 100 % and that means you're responding to the browser window and also the font size of and also any little changes you want to make to the container body insightful flow so it was sort of a responsive design before we had a responsive web design trademark a very clever container response viewport into font size is very few restrictions you can build anything you want there's no ugly classes you're doing yourself figuring out for each project but that math is ugly act as easy you start nesting you have to figure out new contexts and what can line up in the percentages change and it is a should show and you end up that if you don't have something like sass which we didn't that you end up with just those percentages in your code and nobody knows that they mean a where they came from or added at a given again
how I saw on the slide and so
that's when I build SUSY SUSY just to help me uh do Natalie's idea without doing his math over and over again in my calculator I was so tired it has so I think that's that's and right it's a simple on simple algorithm by that will look at than web design a responsive web design came out and this idea of mobile 1st and the idea behind the users that will build 1st for small screens in a single column and then I will use media queries to increasingly ad layout uh as we get bigger and that's a great idea so look something like this you're always using men with media queries to add the next size up 1 and only overriding when you need override to add the next layout but so Suzie gave you sort of any grid system on demand because you could just change a few settings and say I want the gutters on the right on them on the left I want them sweat I'd like you make it up he set some configurations but but the downside is a great systems are still over killing don't even I yeah use bootstrap I know I'm sorry I OK so DIY grids this is how you avoid using Grid systems now fluid grids requirements on that if you make that that simple and you can do this without a system and building your own the way you want it for your project but this is the mass target divided by context equals multiplier this is how you get a percentage so this is what it looks like in something like SUSY where it's Scott gutters and it becomes really ugly mass but this is what it looks like if you take the gutters out on so just take the gutters out you can put them back in somewhere else use having for daughters use by Hughes internal elements for gutters doesn't matter if you can get gutters out of your grid system and suddenly you just need to get a percentage and incest you can do that with the percentage function and then 3 of 12 is still meaningful it still reads but it's still 3 columns of 12 columns you still have a 12 hundred and you use 1 sass function instead of many grid system and that's it there's a grid system but if you don't even wanna use SES you can use count the support on encompass pretty good want to get to it but it's sort of like CSS systems mixed with 0 CSS you're using fractions and you're doing it on the fly and you can kind of do what you want and it doesn't require any of the classes it works with any technique you can use of floating use it with tables you can use it reflects last there the and you're still dealing with explicit grids rather than implicit relationships which I think is the downside and I think Britain that great but there is no magic in grades they're not a designed savior and you can probably just you know saving your sidebars over here and then your main content up the rest of the space who cares you need tall columns for that so anyway we get a paradigm shift now in CSS I worry that custom properties and things like this there suddenly CSS is becoming extensible we can build our own things in CSS so I can create my own property name I can give it any value on and this is what it looks like it's an empty of an empty prefix kind from water this is I use it at in CSS value you call your variable and function and you can get the property namely you wanna use and then the fallback value if that property doesn't exist so that's handy and that's fairly well supported not everywhere but but coming and it is there's a lot you can do it but you can also mix
that with calc and here's a grid system is the same mass by your span divided by a record your columns times 100 per cent by CalCars we'll way larger support in system some look something like this
I think that's the whole thing that works on its own so right there you got a great system and it can react to the down because these variables on unlike sass variables these variables inherit and so you can have a system where your gutters change size and I'll just automatically change size you can actually see that here well if resized that so there you got them I 1 of
3 and then they suddenly become 1 of 6 hazardous
closes so then there only taking up a 3rd of space and that was just we just changed how many columns were available at that media query and all shifts and nothing else that a change in the CSS viewport units also give
us a more control very well supported and briefly 1 it's
full-height layout we can say we want to hide under the age of if you do that make sure that you said overflow well because that's denied knocked off at 100 % of the height and you pour units are basically percentages of the full viewport so that if you're setting the height make sure you know how taxes can overflow that
looks like this and you can see I set an overflow there and if you wanna sticky for you can do men height and that's like this is
problem and I don't have anything overflowing but that footer would get pushed down so these men hide sticky and if you cite it's always the same you can break the container something
like this the by using a simple calculation where you take 50 % of the space and subtract 50 % of the viewport and you can break out 1 side or the other of your content always lining up with the edge of the you for more you can use you pour units you can check that link out later but and we CSS grid and this is where gets really exciting because CSS great is actually built for actual layouts in two-dimensions and it does what any grid system does but much faster in the browser and when with more power yeah its actual real way out
in the browser were no longer talking about faking the hacking anything on and it's suddenly had supported in March at 3 or 4 browsers all ended at the same time men were using it in production and I
there is nothing like it at all not any grid system the claims the poly filled there is nothing that does this out so if you can start using great start using grid people have been trying to read this back or give talks on that are the spec and it's huge and confusing don't bother you can be fairly simple he said display credit you can define the sizes of your columns in euros excuse me you can define a great gas but if you need a reference percentages are relative to the other parents size the W is relative to the window size and fraction is relative to the remaining space so the new fraction unit and red is used to divvy up what space remains the it works very much the same way as flex box to something that is 2 fractions will just flex twice as much as something that's 1 fraction but when you use 1 fraction it actually implies a min max of a minimum of auto and a maximum of 1 fraction and of auto is big and this can end up taking up a lot of space and breaking your layout so it can be useful to set of smaller minimum where you're using fractions I like min max 0 1 fraction if you want to allow it to be totally flat you get something like this grid lines 1 indexed there also negative 1 indexed you can access them that way i you get great gaps between and you can place things like
this very similar to using a grid system you just say I what line you want to start at what line you wanted and that you can also use this band syntax for the negative indexing in your just placing a elements where you want them but they can overlap
but they can go out of order and they can go anywhere this is new this is not something we could do before but really you probably just want something like this maybe but if you're boring which I am am and you can actually create with this ASCII art and they go ahead a header now mean for the for the I drew a little past the drawing of my website and then I can just by defining the sizes of each of those columns and rows and I can assign my pattern ofmine and further to the right regions and they fall into place it doesn't matter how ordered in the mark they're just going to go there it's not and that's the entire layout use grids mean like just use this you just click it together they can do all kinds of cool shit there's a website grew by example that even gives you like fallback code but for basic patterns and it'll show you all the things we can do and then simple fallbacks it goes in 2 dimensions its flexible markup order t nesting so matters that's OK will get there you can do these data-driven layouts we have this in production were passing in variables that tell something how to lay out on I wrote an article about this so this graph is completely generated just using CSS and CSS variables to pass in my data and all the colors and sizes are styled and CSS are from the data so I just make sure you were
a common because it's dragons but that's what back without supporters for you can put fallback code inside of that are there like media queries the 4 features feature queries and and SUSY 3 become the fall back when you don't need a grid system as the main plant if you really have difficult mass your fallback great pole in something small found that you don't need just it sir the greatest fix the box model stay in the flow think dynamically relationships between things Harding afloat remove the external debt mass and 90 creative because word of homes thank you and
this fewer and Js in are
Geschlossenes System
Geschlossenes System
Spieltheorie
Computeranimation
Familie <Mathematik>
Automatische Handlungsplanung
Implementierung
EDV-Beratung
Abstraktionsebene
Code
Computeranimation
Open Source
Benutzerbeteiligung
Geschlossenes System
Font
Code
Mustersprache
Programmbibliothek
Hybridrechner
Softwareentwickler
Bildgebendes Verfahren
Implementierung
Cross-site scripting
Tabelle <Informatik>
Geschlossenes System
Open Source
Abstraktionsebene
Prozessautomation
Quick-Sort
Versuchsplanung
Chipkarte
Verbandstheorie
Flächeninhalt
Formale Sprache
Rechter Winkel
Debugging
Identitätsverwaltung
Projektive Ebene
Kantenfärbung
Tabelle <Informatik>
Tabelle <Informatik>
Beschreibungssprache
Rechter Winkel
Inhalt <Mathematik>
Ordnung <Mathematik>
Computeranimation
Homepage
Tabelle <Informatik>
Resultante
Hydrostatik
Telekommunikation
Subtraktion
System Dynamics
Browser
Formale Sprache
Mathematisierung
Hochdruck
Systemplattform
Kontextbezogenes System
Code
Raum-Zeit
Computeranimation
Client
Benutzerbeteiligung
Deklarative Programmiersprache
Code
Bildschirmfenster
Programmierparadigma
Kontrollstruktur
Optimierung
Bruchrechnung
Kontrolltheorie
Cross-site scripting
Verschiebungsoperator
Tabelle <Informatik>
Bruchrechnung
Vervollständigung <Mathematik>
Kontrolltheorie
Medizinische Informatik
Telekommunikation
Quantifizierung
Schlussregel
Kontextbezogenes System
Quick-Sort
Entscheidungstheorie
Arithmetisches Mittel
Objekt <Kategorie>
Menge
Pufferüberlauf
Client
System Dynamics
Tabelle <Informatik>
Randverteilung
Gewicht <Mathematik>
Quader
Wasserdampftafel
Content <Internet>
Element <Mathematik>
Code
Computeranimation
Homepage
Eins
Spannweite <Stochastik>
Prozess <Informatik>
Total <Mathematik>
Modelltheorie
Inhalt <Mathematik>
Default
Gerade
Hilfesystem
Graphiktablett
Default
Cliquenweite
Verzweigendes Programm
Konfiguration <Informatik>
Kantenfärbung
Modelltheorie
Quader
Wasserdampftafel
Mathematisierung
Element <Mathematik>
Code
Raum-Zeit
Computeranimation
Komponente <Software>
Reelle Zahl
Vererbungshierarchie
Modelltheorie
Demo <Programm>
Kategorie <Mathematik>
Vererbungshierarchie
Gebäude <Mathematik>
Relativitätstheorie
Element <Gruppentheorie>
Schlussregel
Datenfluss
Teilbarkeit
Objekt <Kategorie>
Verkettung <Informatik>
Verschlingung
Rechter Winkel
Mereologie
Datenfluss
Soundverarbeitung
Subtraktion
Web Site
Dean-Zahl
Betrag <Mathematik>
Quader
Ortsoperator
Rechter Winkel
Klasse <Mathematik>
Relativitätstheorie
Vererbungshierarchie
Betrag <Mathematik>
Element <Mathematik>
Computeranimation
Trennungsaxiom
Soundverarbeitung
Ortsoperator
Element <Mathematik>
Pufferüberlauf
Klasse <Mathematik>
Softwarewerkzeug
Element <Mathematik>
Datenfluss
Computeranimation
Datensichtgerät
Objekt <Kategorie>
Wurzel <Mathematik>
Pufferüberlauf
Temporale Logik
Mereologie
Minimum
Mixed Reality
Tropfen
Hacker
Bildgebendes Verfahren
Chipkarte
Rundung
Quader
Browser
Applet
Gleichungssystem
Unrundheit
Element <Mathematik>
Kontextbezogenes System
Raum-Zeit
Computeranimation
Algorithmus
Geschlossenes System
Prozess <Informatik>
Skript <Programm>
Inhalt <Mathematik>
Hacker
Gerade
Hacker
Cliquenweite
Gleitkommarechnung
Torus
Pixel
Datenfluss
Pufferüberlauf
Zellularer Automat
Mereologie
Pixel
Bit
Rundung
Gewicht <Mathematik>
Pixel
Browser
Familie <Mathematik>
Unrundheit
Element <Mathematik>
Computeranimation
Gradient
Multi-Tier-Architektur
Geschlossenes System
Minimum
Mereologie
Pixel
Gerade
Fehlermeldung
Kreisbewegung
Konfiguration <Informatik>
Gewicht <Mathematik>
Quader
Element <Mathematik>
Datensichtgerät
Browser
Content <Internet>
Fluss <Mathematik>
Element <Mathematik>
Term
Raum-Zeit
Computeranimation
Datensichtgerät
Eins
Datensatz
Task
Geschlossenes System
Font
Minimum
COM
Inverser Limes
Inhalt <Mathematik>
Hacker
Hacker
Bildgebendes Verfahren
Gerade
Basisvektor
Funktion <Mathematik>
Tabelle <Informatik>
Distributionstheorie
Kategorie <Mathematik>
Division
Raum-Zeit
Default
p-Block
Gleichheitszeichen
Quick-Sort
Menge
Rechter Winkel
Deklarative Programmiersprache
Basisvektor
p-Block
Ordnung <Mathematik>
Tabelle <Informatik>
Bit
Konfiguration <Informatik>
Quader
Kontrolltheorie
Hausdorff-Dimension
Datensichtgerät
Content <Internet>
Element <Mathematik>
Dialekt
Raum-Zeit
Quick-Sort
Teilbarkeit
Computeranimation
Lochstreifen
Übergang
Homepage
Hydrostatik
Mereologie
Wort <Informatik>
Inhalt <Mathematik>
Datenfluss
Subtraktion
Bit
Quader
Vererbungshierarchie
Extrempunkt
Quick-Sort
Computeranimation
Homepage
Übergang
Homepage
Intel
Systemprogrammierung
Geschlossenes System
Rechter Winkel
Last
Widget
Tabelle <Informatik>
Randverteilung
Web Site
Punkt
Ortsoperator
Klasse <Mathematik>
Gradient
Internetworking
Datensatz
Client
Geschlossenes System
Mittelwert
Widget
Mustersprache
Modelltheorie
Hacker
Softwareentwickler
Widerspruchsfreiheit
Cliquenweite
Cross-site scripting
Trennungsaxiom
Softwareentwickler
Open Source
Telekommunikation
Frequenz
Gleichheitszeichen
Weltformel
Menge
Widerspruchsfreiheit
Quick-Sort
Rechter Winkel
Mereologie
Projektive Ebene
Modelltheorie
Ordnung <Mathematik>
Objekt <Kategorie>
Bruchrechnung
Bit
Kraft
E-Mail
Instantiierung
Code
Computeranimation
Gradient
Forcing
Geschlossenes System
Bruchrechnung
Cross-site scripting
Cliquenweite
Randverteilung
Systemprogrammierung
Bit
Einheit <Mathematik>
Raum-Zeit
Computeranimation
Cross-site scripting
Cliquenweite
Webdesign
Web Site
Extrempunkt
Browser
Klasse <Mathematik>
Mathematisierung
Eindeutigkeit
Mathematisierung
Objektklasse
Kontextbezogenes System
Datenfluss
Cloud Computing
Widerspruchsfreiheit
Framework <Informatik>
Quick-Sort
Code
Computeranimation
Rechenschieber
Systemprogrammierung
Framework <Informatik>
Font
Geschlossenes System
Zahlenbereich
Endogene Variable
Bildschirmfenster
Asymmetrie
Projektive Ebene
Cliquenweite
Retrievalsprache
Kalkül
Element <Mathematik>
Bootstrap-Aggregation
Multiplizierer
Supersymmetrie
Element <Mathematik>
Zählen
Raum-Zeit
Computeranimation
Gradient
Spezialrechner
Algorithmus
Geschlossenes System
Programmierparadigma
Funktion <Mathematik>
Verschiebungsoperator
Cliquenweite
Lineares Funktional
Webdesign
Geschlossenes System
Kategorie <Mathematik>
Ruhmasse
Kontextbezogenes System
Rechnen
Menge
Rechter Winkel
Supersymmetrie
Kategorie <Mathematik>
Projektive Ebene
Tabelle <Informatik>
Fluid
Wasserdampftafel
Klasse <Mathematik>
Kontextbezogenes System
Datensichtgerät
Hypermedia
Systemprogrammierung
Datensatz
Endogene Variable
Mobiles Internet
Kalkül
Inhalt <Mathematik>
Cross-site scripting
Browser
Mathematisierung
Quick-Sort
Fluid
Touchscreen
Hypermedia
Variable
Geschlossenes System
Cloud Computing
Cliquenweite
Einheit <Mathematik>
Kontrolltheorie
Einheit <Mathematik>
Pufferüberlauf
Mathematisierung
Hypermedia
Abfrage
Sichtenkonzept
Drei
Raum-Zeit
Computeranimation
Verschiebungsoperator
Browser
Rechnen
Binder <Informatik>
Computeranimation
Einheit <Mathematik>
Geschlossenes System
Pufferüberlauf
Einheit <Mathematik>
Zellularer Automat
Kalkül
Inhalt <Mathematik>
Innerer Punkt
Cross-site scripting
Leistung <Physik>
Cliquenweite
Quader
Extrempunkt
Datensichtgerät
Browser
Polygon
Raum-Zeit
Ähnlichkeitsgeometrie
Template
Computeranimation
Datensichtgerät
Einheit <Mathematik>
Geschlossenes System
Bildschirmfenster
Total <Mathematik>
Vererbungshierarchie
Hacker
Bruchrechnung
Gerade
Bruchrechnung
Geschlossenes System
Raum-Zeit
Browser
Biprodukt
Gerade
Komplex <Algebra>
Einheit <Mathematik>
Web Site
Beschreibungssprache
Beschreibungssprache
Hausdorff-Dimension
Benutzerfreundlichkeit
Element <Mathematik>
E-Mail
Code
Template
Computeranimation
Datensichtgerät
Variable
Datensatz
Geschlossenes System
Gruppe <Mathematik>
Mustersprache
Flächeninhalt
Ordnung <Mathematik>
E-Mail
Ganze Funktion
Gerade
Graph
Biprodukt
Dialekt
Gerade
Automatische Indexierung
Kantenfärbung
Ordnung <Mathematik>
Quader
Ruhmasse
Abfrage
Lineares Funktional
Datenfluss
Code
Variable
Computeranimation
Datensichtgerät
Polstelle
Geschlossenes System
Hypermedia
Kategorie <Mathematik>
Wort <Informatik>
Modelltheorie
Datenfluss

Metadaten

Formale Metadaten

Titel Don't Use My Grid System (or any others)
Serientitel DjangoCon US 2017
Teil 19
Anzahl der Teile 48
Autor Suzanne, Miriam
Mitwirkende Confreaks, LLC
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/33175
Herausgeber DjangoCon US
Erscheinungsjahr 2017
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract I built Susy, a Sass grid system that can generate any grid technique you like — but I haven’t used it in years. I’ll show you how various grid systems work, and how to avoid using them. For those few cases where a grid really is required, we’ll talk about the best ways to roll your own, so you’re not relying on a bloated library to make decisions for you. We’ll also look at the new layout toys, from flexbox to CSS Grid, and how to get started with only a few lines of code. When to use floats, CSS Grid, flexbox, custom properties, and other techniques. How to make grid-math simple, and lose the grid-system. How to make existing grid-systems work for you, when you’re stuck with them.

Ähnliche Filme

Loading...
Feedback