No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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?

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=鈥渟earch鈥 驴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 鈥渁ctivator鈥

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 鈥渃ards鈥 usamos el c贸digo de 鈥渃ards 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