Construcción del main homepage

Hasta ahora me esta gustando más Materialize que Bootstrap.

Mismo sistema de columnas (grid) pero siento que esta mejor en tema de documentación y clases intuitivas. Muy útil y sencillo poner icons con Materialize.

los nombres genericos que usa Materialize son intuitivos

• Materialize utiliza 4 tamaños de pantalla para manejar
  el Grid System: s, m, l y xl

• Las cards son un medio conveniente para mostrar contenido compuesto por diferentes tipos de objetos. También son adecuados para presentar objetos similares cuyo tamaño o acciones admitidas pueden variar considerablemente, como fotos con subtítulos de longitud variable.

No encuentro información en la documentación sobre el id=“search” ¿Para autocompletar siempre debo utilizar ese id en el input?

Materialize fue el primer framework que aprendí a usar y es una chulada.

Abreviatura emmet para segunda main section:

section>.row>article.col.s12.m6.l4>.card>.card-image.waves-effect-waves-block.waves-light>img.activator

para que sirve la class “activator”

Wenas a tod@s;

Materialize, es pura brujeria!!! Burjeria he dicho!!!

Las cards de materilize son muy buenas.

El primero 😄

& - .section - layout -Materialize

<div class="col s12 m2">
  <p class="z-depth-1">z-depth-1</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-2">z-depth-2</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-3">z-depth-3</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-4">z-depth-4</p>
</div>
<div class="col s12 m2">
  <p class="z-depth-5">z-depth-5</p>
</div>

jaja un men dejando Spam :C

cuales son las medidas que determinan materialize como pantallas chica (S), mediana(M) grande (L)

Bueno, pues se puso mas interesante, no he visto algo parecido en cuanto al efecto de la card en boostrap, punto para Materialize (Al menos para mi)

Emmet para la primera section del main:

main.container>section>div.section>div.row>div.col.m7.input-field.input-container>(i.material-icons+input)

Empezamos con la barra de Autocompletar y le agregamos el Icono de Buscador, la info está en el apartado de Icons en la documentación

En la parte de “cards” usamos el código de “cards reveal”

Les dejo el Codigo del <main>

<main class="container ">
    <section>
      <div class="section">
        <div class="row">
          <div class="col m7 input-field input-container">
            <i class="material-icons">search</i>
            <input id="search" type="text" placeholder="Search">
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="row">
        <article class="col s12 m6 l4">
          <div class="card">
            <div class="card-image waves-effect waves-block waves-light">
              <img class="activator" src="assets/img/card1.jpg" alt="">
            </div>
          </div>
        </article>
      </div>
    </section>
  </main>

n