001 • Una Unidad Base

Te cuento como simplifico mi hojas de estilo. Esta técnica reduce la complejidad y hace mas fácil la colocación de elementos en mis página web.

De vez en cuando tengo proyectos donde no puedo aplicar estas reglas en todo el contenido, pero entonces, aislo ese contenido que no pueden ser simplificado. Y sigo aplicando mis reglas en el resto.

Intentar que tu página sea exactamente como un mockup de photoshop es muy viejuno, y ademas imposible. El motor de renderización de fuentes de photoshop es mucho mas complejo que el de un navegador. Y con tanto tamaño de pantalla, ¿Cómo puedes hacerlo?

Te voy a mostrar mi técnica de usar un cuadricula para posicionar mis elementos y usar esa unidad base para darle forma en CSS.

Ahora, si CSS tuviera variables, seria la vida mucho mas fácil. Pero, no hay problema, llegan los preprocesadores al rescate.

Ya estarás gritando: Tío! Calla! Muestra código!!

Vale, vale. En el vídeo, te muestro un pequeño ejemplo de lo que se puede hacer con estas variables.

Aquí tienes el resultado en HTML que tengo en la vista.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  <div class="page">
    <header>
      <h1>Estudiantes</h1>
      <a href="/new">Nuevo</a>
    </header>
    <ul class="student-list">
      <li>
        <figure>
          <img src="http://hhhhold.com/200">
          <figcaption>John Nylavo</figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://hhhhold.com/200">
          <figcaption>Mary Jones</figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://hhhhold.com/200">
          <figcaption>Emilio Torta</figcaption>
        </figure>
      </li>
    </ul>
    <section class="load-more">
      <button>Ver más</button>
    </section>
  </div>

Y aqui esta la hoja de estilo en Sass:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
  $unit: 1.5rem

  html
    font-size: 100%
    line-height: $unit
    font-family: sans-serif

  h1
    font-size: 2rem

  .page
    width: $unit * 23
    margin: 0 auto
    padding-top: $unit * 2

  header
    position: relative
    background: dimgray
    color: white
    h1
      padding: $unit 0
      text-align: center
    a
      position: absolute
      top: 0
      right: 0
      padding: $unit
      background: limegreen
      color: white
      text-decoration: none
      font-weight: bold

  .student-list
    padding: $unit 0
    li
      list-style: none
      float: left
      width: $unit * 7
      margin: 0 $unit
      &:first-child, &:last-child
        margin: 0
      img
        width: 100%
      figcaption
        text-align: center

  .load-more
    float: none
    clear: both
    padding: $unit * 2 0
    text-align: center
    button
      padding: $unit /2 $unit * 2
      outline: 0
      border: 0
      background: orange
      color: white
      border-radius: 3px

Pruébalo tu mismo. Hazte una pequeña interfaz e intenta usar la cuadrilla para colocar tus elementos y me cuentas que tal te ha ido.

¿Feedback? te escucho en sebastian arroba frontazo punto com

Extra

¿Te preguntas el origen de las palabras triquiñuela y birlibirloque?

Pero ya había grabado cuando me corrige @ggalmazor

Así que me queda pendiente utilizar la palabra triquiñuel correctamente en un futuro episodio.

Si tienes mas sugerencias para otras palabras, estaré encantado de colocarlas dentro del próximo episodio. Sin garantías. Me reservo el derecho a no ponerlas tampoco ;)

comments powered by Disqus