Css for nondesigners
•
1 like•4,701 views
My talk at Apache Barcamp Spain 2011. It includes a developer approach about how to get started with CSS if you do not have a web design background. Includes answers to the too-well-known question "What did I break now?". During these 32 slides some basic concepts like the browser box model get explained, and some CSS frameworks are introduced. This presentation (together with our "CSS3 101" talk) got the award to the best presentation at Apache Barcamp Spain.
![[object Object],[object Object]](https://image.slidesharecdn.com/cssfornondesigners-111011093510-phpapp01/85/Css-for-nondesigners-1-320.jpg)
![Definition of success ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
More Related Content
What's hot
Viewers also liked
Viewers also liked (7)
Similar to Css for nondesigners
Similar to Css for nondesigners (20)
Recently uploaded
Recently uploaded (20)
Css for nondesigners
- 3. Hacker : understands CSS – mostly.
- 4. Newbie : example-driven guy that keeps throwing random shit around until something sticks. ← I used to live here
- 6. He is CTO at Extrema Sistemas
- 7. He hates talking about himself in the third person.
- 10. IE 6
- 13. padding
- 14. border
- 15. margin
- 23. display
- 24. position
- 25. float
- 27. display: block <div>A</div> <div>B</div> <div>C</div>
- 28. display: inline-block div { display: inline-block; }
- 30. display
- 31. position
- 32. float
- 39. display
- 40. position
- 41. float
- 43. clear: left | right | both
- 44. Gets the element out of the box model
- 45. float: left NO FLOAT <div>A</div> <div>B</div> <div>C</div> FLOAT LEFT <div style=”float: left” >A</div> <div>B</div> <div>C</div> FLOAT AND CLEAR <div style=”float: left” >A</div> <div>B</div> <div style=”clear: left” >C</div>
- 48. display
- 49. position
- 50. float
- 52. most of the time
- 53. Eric Meyer's reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
- 54. CSS frameworks: 960gs <div class=” container_12 ”> <div class=” grid_12 ”> Header contents </div> <div class=” grid_6 ”> Column 1 contents </div> <div class=” grid_6 ”> Column 2 contents </div> </div>
- 55. 960 Grid System
- 65. Thanks! ( ) Futurama is a trademark from Twentieth Century Fox Film Corporation We honestly think the rest is ours. twitter.com/nachocoloma [email_address]
Editor's Notes
- Casi todo el mundo está en el último nivel y prueban al azar. La idea de esta charla es subirles al menos un nivel.
- Recordar que se al ancho/alto se suman el padding y border que pongan
- IE6 no reconoce min ni max. Min y max controlan el comportamiento de los textarea en chrome
- Margins etc solo aplican a block Float automaticamente implica display: block
- vertical-align puede valer top, bottom, baseline o middle. Lo normal para esto sería usar top. Esto no se suele usar, sino float. A diferencia de float, este no necesita fijarle el alto a los elementos. Soportado por IE7, aunque necesita un par de hacks de CSS para hacerlo rodar
- Se explican en las siguientes slides
- Se coloca en la posición que le corresponde según el modelo de cajas. left, right, top y bottom se ignoran
- Añade a su posición por defecto. Puede usarse top, left, right, bottom Pueden usarse cantidades negativas
- El contenedor de B no hará scroll junto con el resto de la página
- Float: Posiciona un elemento a la derecha o izquierda de su contenedor y permite que el resto de elementos fluyan alrededor suyo. Así el float no hará crecer a su contenedor. Tanto posicionar de forma absoluta un elemento como el flotarlo, significan que salen del flujo normal de documento y eso afecta en unos casos a todos los elementos (position) y el otro a su caja padre que se comportan en algunos aspectos como si esos elementos no existiesen.
- Cuando hay un contenido flotado (A) puede ser que sea más largo que el no flotado (B y C) o no. Aquí se cubren los dos casos, y el uso de clear.
- hidden: oculta el contenido que se desborda. Es una alternativa a clearfix. visible: puede desbordar la caja auto: puede mostrar barras de scroll Esto aplica a los contenidos flotados
- El reset de Eric Meyer es el más conocido. Es también el primero. Esto es el reset completo. No falta nada. Notarse que en la columna izquierda no se usa *, sino cada tag individual. Esto es por rendimiento y por no asignar propiedades a tags que no las usan (como object o script) En la columna derecha hay una referencia a HTML5 que veremos en la parte de tags semánticos
- Afecta a cada uno de los roles de un proyecto: * Diseñador: le da un Photoshop para trabajar * HTML: le da un CSS ya probado * Desarrollador: no tiene que entender cómo funciona, sino sólo el número de columnas que quiere usar.