Materialize

Szerző: Sallai András
Copyright © 2021, Sallai András
Szerkesztve: 2021, 2024
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

A Materialize

Webhely:

https://materializecss.com/

Materialize kezdés

npm install materialize-css@next

Weblap előkészítése

<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css">

<script src="node_modules/materialize-css/dist/js/materialize.js"></script>

Konténer

<div class="container">
<!-- Tartalom -->
</div>

Színek

https://materializecss.com/color.html (2024)

<div class="teal lighten-2">alma</div>

Grid

    <div class="row">
      <div class="col s1">1</div>
      <div class="col s1">2</div>
      <div class="col s1">3</div>
      <div class="col s1">4</div>
      <div class="col s1">5</div>
      <div class="col s1">6</div>
      <div class="col s1">7</div>
      <div class="col s1">8</div>
      <div class="col s1">9</div>
      <div class="col s1">10</div>
      <div class="col s1">11</div>
      <div class="col s1">12</div>
    </div>

    <div class="row">
      <div class="col s12">12-oszlop - teljes szélességet elfoglal</div>
      <div class="col s6">6-oszlop - szélesség fele</div>
      <div class="col s6">6-oszlop - szélesség fele</div>
    </div>

Segítők

Igazítás

.left-align
.right-align
.center-align

  <div>
    <h5 class="left-align">Lorem ipsum dolor est amet</h5>
  </div>
  <div>
    <h5 class="right-align">Lorem ipsum dolor est amet</h5>
  </div>
  <div>
    <h5 class="center-align">Lorem ipsum dolor est amet</h5>
  </div>

Média

Képek

<img class="responsive-img" src="kepnev.jpg">