Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Materialize

Curso de Materialize

Diego De Granda

Diego De Granda

Construcción del main homepage

10/17
Recursos

Aportes 18

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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 [email protected];

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