Css for nondesigners

7,894 views

Published on

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.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,894
On SlideShare
0
From Embeds
0
Number of Embeds
5,454
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • Css for nondesigners

    1. 1. <ul>CSS for non-designers </ul><ul>What did you break, and how to fix it </ul>
    2. 2. Definition of success <ul><li>Hero : knows everything about CSS.
    3. 3. Hacker : understands CSS – mostly.
    4. 4. Newbie : example-driven guy that keeps throwing random shit around until something sticks. </li></ul>← I used to live here
    5. 5. Who am I? <ul><li>Nacho Coloma has been working with Java and HTML for the last 10 years
    6. 6. He is CTO at Extrema Sistemas
    7. 7. He hates talking about himself in the third person. </li></ul>
    8. 8. The browsers <ul><li>Chrome, Safari, Firefox 3.6+, IE 7+ </li></ul>
    9. 10. IE 6
    10. 11. <ul><li>The Box Model </li></ul>size display position float
    11. 12. Size <ul><li>width, height
    12. 13. padding
    13. 14. border
    14. 15. margin </li></ul>
    15. 16. box-sizing: border-box <ul><li>* { </li></ul><ul><ul><li>-moz-box-sizing: border-box;
    16. 17. -webkit-box-sizing: border-box;
    17. 18. box-sizing: border-box; </li></ul></ul><ul><li>} </li></ul>
    18. 19. box-sizing: border-box <ul>Source: http://css-tricks.com/ </ul>
    19. 20. Min and max <ul><li>min-width, min-height
    20. 21. max-width, max-height </li></ul>
    21. 22. The box model <ul><li>size
    22. 23. display
    23. 24. position
    24. 25. float </li></ul>
    25. 26. display <ul><li>display: block | inline | inline-block | none </li></ul>p, div, h1 { display: block; } a, span, strong, em { display: inline; } .hide { display: none; }
    26. 27. display: block <div>A</div> <div>B</div> <div>C</div>
    27. 28. display: inline-block div { display: inline-block; }
    28. 29. The box model <ul><li>size
    29. 30. display
    30. 31. position
    31. 32. float </li></ul>
    32. 33. Position <ul><li>position: static | relative | absolute | fixed </li></ul>
    33. 34. position: static <ul><li>The default </li></ul><div>A</div> <div>B</div> <div>C</div>
    34. 35. position: relative <ul><li>Relative coords to its default position </li></ul><div>A</div> <div style=” position: relative; left: 15px; top: 10px ” > B </div> <div>C</div>
    35. 36. position: absolute <ul><li>Absolute position from the first parent element that has a position other than static </li></ul><div>A</div> <div style=” position: absolute; left: 15px; top: 10px ” > B </div> <div>C</div>
    36. 37. position: fixed <ul><li>Fixed position relative to window, unaware of scrolling canvas </li></ul><div>A</div> <div style=” position: fixed; right: 10px; top: 10px ” > B </div> <div>C</div>
    37. 38. The box model <ul><li>size
    38. 39. display
    39. 40. position
    40. 41. float </li></ul>
    41. 42. float <ul><li>float: left | right
    42. 43. clear: left | right | both
    43. 44. Gets the element out of the box model </li></ul>
    44. 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>
    45. 46. Overflow <ul><li>overflow: visible | hidden | auto </li></ul>
    46. 47. That's all <ul><li>size
    47. 48. display
    48. 49. position
    49. 50. float </li></ul>
    50. 51. Good news, everyone! <ul><li>You don't have to deal with this
    51. 52. most of the time </li></ul>
    52. 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; }
    53. 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>
    54. 55. 960 Grid System
    55. 56. Twitter Bootstrap 2
    56. 57. Responsive design
    57. 58. Responsive design
    58. 59. More smartphones than PCs in 2012 <ul>Source: IDC. Graph by LukeW </ul>
    59. 60. That's it! <ul><li>Any questions? </li></ul>
    60. 61. Where to continue from here <ul><li>Come to our course! </li></ul><ul><ul><li>http://extrema-sistemas.com/training
    61. 62. http://del.icio.us/html5css3
    62. 63. http://github.com/html5css3 </li></ul></ul><ul><li>http://html5boilerplate.com/
    63. 64. http://html5please.us </li></ul>
    64. 65. Thanks! ( ) Futurama is a trademark from Twentieth Century Fox Film Corporation We honestly think the rest is ours. twitter.com/nachocoloma [email_address]

    ×