materializecssAan de slag met materializecss


Opmerkingen

MaterializeCSS is een CSS en Javascript gebaseerd front-end responsive framework, afgeleid van Google's Material Design. Het is volledig gebaseerd op de richtlijnen voor materiaalontwerp van Google en dient als een boilerplate om materiaalontwerp op een betere en snelle manier te gebruiken. Het heeft een aantal vooraf gedefinieerde plug-ins zoals Scrollspy, Scrollfire, lightbox, parallax en nog veel meer.

versies

Versie Publicatiedatum
0.93.0 2014/12/19
0.94.0 2015/12/30
0.95.0 2015/01/17
0.96.0 2015/04/01
0.97.0 2015/07/02
0.97.7 2016/07/23
0.97.8 2016/10/30
0.98.0 2017/01/25
0.98.1 2017/03/21

Download

Er zijn twee manieren om MaterializeCSS te gebruiken: u kunt de bestanden op uw systeem downloaden of de bestanden van CDN (Content Delivery Network) gebruiken.

Bestanden downloaden

Opnemen van CDN

  • Inclusief minifed CSS in de kop sectie:

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
     
  • Neem het Javascript-bestand op in de Body- sectie, net voor de afsluitende body-tag.

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
     

Hoe kan ik mijn Sass compileren

Deze sectie is alleen relevant als u werkt met de Sass-versie van Materialise.

Eerst moet u Sass in uw werkmap installeren:

gem install sass
 

Wanneer u Sass op uw project hebt geïnstalleerd en u wilt uw uitvoer .css-bestand bijwerken, moet u de volgende opdracht gebruiken:

sass sass/materialize.scss public/style.css
 

OPMERKING : de tweede parameter sass / materialize.scss is het pad naar uw .scss-bestand en de laatste parameter sass / style.css is het pad naar uw uitvoermap wanneer het bestand .css-bestand zich bevindt.

Als u dit commando elke keer wilt vermijden wanneer u een wijziging aanbrengt, kunt u een watch-commando uitvoeren:

 sass --watch sass/sass:public/stylesheets
 

OPMERKING : met deze opdracht worden alle Sass-bestanden in de map scss op wijzigingen gecontroleerd en wordt het stijlbestand vervolgens bijgewerkt naar onze openbare map.

Opstelling

Nadat u de bestanden hebt gedownload, pakt u ze uit in de door u toegewezen map.

U zult merken dat er twee sets van de bestanden zijn. De min betekent dat het bestand wordt "gecomprimeerd" om laadtijden te verminderen. Deze verkleinde bestanden worden meestal gebruikt in productie, terwijl het beter is om de niet-verkleinde bestanden te gebruiken tijdens de ontwikkeling.


Na het uitpakken ziet de bestandsstructuur van uw map er als volgt uit:

  MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html
 

Voorbeeld MaterialiseCSS HTML-pagina:

<!DOCTYPE html>
<html>
 <head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>

 <body>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
 </body>
</html>
 

Sjablonen

Dit zijn de eenvoudigste startpagina's met een koptekst, call-to-action en pictogramfuncties.

Starter Template Parallax-sjabloon
Starter Template Parallax-sjabloon
Demo of downloaden Demo of downloaden

MaterializeCSS gebruiken met Angular

Er zijn veel manieren om het MaterializeCSS-framework te gebruiken.

Weinig dingen om in gedachten te houden voordat u naar de installatie gaat

  • Het is niet alleen een CSS-kader, hoewel het een CSS-naam bevat. We kunnen zijn SCSS ook gebruiken
  • Het is niet gebouwd voor Angular
  • Het is een componentframework dat te veel op jquery is gebouwd. Hoewel we niet worden geacht jquery (niet voorgesteld) in hoekig te gebruiken, importeren we toch.

U kunt een van de volgende methoden gebruiken:

  • CDN
  • Middelen
  • Opnemen in hoekig (NPM)
  • Opnemen in Angular (bron met SCSS)

Elk heeft zijn eigen voor- en nadelen.

CDN

Voeg dit gewoon toe aan index.html en u bent klaar om te gaan.

 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
 
 <!-- We need jquery first -->  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
 

Middelen

Voeg het toe als een activum in uw project. Dit helpt bij het niet afhankelijk zijn van internet wanneer lokaal wordt gebouwd en uitgevoerd.

JQuery downloaden

CSS-versie downloaden

  • Pak ze uit

  • Kopieer materialize.min.css , jquery-3.2.1.min.js en materialize.min.js naar uw jquery-3.2.1.min.js

  • voeg ze toe aan index.html

     <link rel="stylesheet" href="./assets/materialize.min.css" >
     <script src="./assets/jquery-3.2.1.min.js"></script>
     <script src="./assets/materialize.min.js"></script>
     

Opnemen in hoekig (NPM)

In deze methode nemen we de bestanden rechtstreeks op in onze hoekige build. Ik neem aan dat het hoekproject is gebouwd met @angular/cli voor de eenvoud.

Doen

npm install materialize-css --save 
npm install jquery --save
 

Dit is hetzelfde als het downloaden van CSS-bestanden, maar we hoeven ze niet toe te voegen aan onze repository.

Voeg het volgende toe aan .angular-cli.json :

"styles": [
    "../node_modules/materialize-css/dist/css/materialize.css",
    "styles.scss"
]

...

"scripts":[
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
]
 

Opnemen in hoekig (SCSS)

Download bron met SCSS-versie

Doe dit als u wilt profiteren van SCSS om het standaardgedrag van de bibliotheek te wijzigen. Anders kunt u nog steeds de vorige methode gebruiken en SCSS naast elkaar gebruiken.

Voeg ze toe aan een map buiten src . Mag een map maken materialize-src als broer of zus te src en plak de inhoud daar. We doen dit omdat npm install van materialise-css ons geen scss-versie geeft. ( Corrigeer me als ik het mis heb )

Jquery installeren

npm install jquery --save 
 

Voeg ze toe aan je .angular-cli.json

"styles": [
    "../materialize-src/sass/materialize.scss",
    "styles.scss"
 ],
 "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../materialize-src/js/bin/materialize.min.js"
 ],
 

Integratie met Angular:

De vooral installatiemethoden bieden volledige functionaliteit met materialisatie en het is niet nodig om verder iets te installeren om onder een hoek te werken . Neem een voorbeeld en gebruik gewoon de juiste HTML-structuur binnen het componentgedeelte van hoekig en je bent klaar om te gaan.

In sommige gevallen moet u misschien aan javascript sleutelen en daarvoor moeten we jQuery gebruiken. In plaats daarvan kunnen we de ontwikkelaar van de hoekwikkelaar bij angular2-materialise gebruiken . Ik ontwikkelde een volledig functionele site met behulp van hoekig en materialiseer en heb daar nooit behoefte aan gehad.

Als je nog steeds denkt dat je het nodig hebt. U kunt als volgt installeren:

  • Installeer materialiseren op een van de bovengenoemde manieren

  • Installeer angular2-materialise

     npm install angular2-materilize --save 
     

    Voeg hoekige app.module.ts

     import { MaterializeModule } from "angular2-materialize";
    
     @NgModule({
       imports: [
         //...
         MaterializeModule,
       ],
       //...
     })
     

Webpagina met Materializecss

Hier is een voorbeeld van een basispagina met behulp van het CSS-framework Materialise waarin het rastersysteem en materialboxed .

<!DOCTYPE html>
<html>
<head>
<title>Materializecss Example webpage</title>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"  media="screen,projection"/>

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
  <div class="container"> 
    <div class="row">
      <div class="col s12"><h3>MATERIALIZECSS EXAMPLE</h3><h4>A simple website just to show how an element is used.</h4></div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220"  src="https://upload.wikimedia.org/wikipedia/commons/7/76/Katun_nature_reserve.jpg">
        <h4>Katun Nature Reserve</h4>
        <p><i>Lovely Place</i></p>
      </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Computer_art_4.png">
        <h4>Art</h4>
        <p><i>Simple & Attractive</i></p>
      </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/9/8715/16947318656_4c6cbc3091_b.jpg">
        <h4>Food</h4>
        <p><i>For any occasion</i></p>
       </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/7/6179/6217102314_350be5e843.jpg">
        <h4>Steve Jobs</h4>
        <p><i>Inspiration</i></p>
      </div>
    <div class="col s12"><h5>Comment your suggestion</h5></div>
    </div>
  </div>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
  $('.materialboxed').materialbox();
});
</script>
</body>