.github
api-server
client
config
curriculum
docs
freeCodeCamp
guide
arabic
chinese
english
3D
accessibility
agile
algorithms
android-development
angular
angularjs
apache
aspnet
bash
blockchain
book-recommendations
bootstrap
bsd-os
bulma
c
canvas
certifications
chef
clojure
cloud-development
computational-genomics
computer-hardware
computer-science
containers
cplusplus
csharp
css
background
background-opacity
background-size
before-selector
borders
box-shadow
breakpoints
class-selector
colors
comments-in-css
css-buttons
css-cursors
css-custom-properties
css-display
css-frameworks
css-framework-bootstrap
css-framework-bulma
css-framework-foundation
css-framework-material-design-lite
css-framework-materialize
index.md
css-framework-semanticui
css-framework-skeleton
css-frameworks-uikit
index.md
css-images
css-performance
css-position
css-pre-processors
css-preprocessors
css-syntax-and-selectors
css3-2d-transforms
css3-at-media-rule
css3-backgrounds
css3-borders-rounded-corners
css3-colors
css3-flexible-box
css3-gradients
css3-grid-layout
css3-media-queries
css3-multiple-columns
css3-nth-child-selector
css3-opacity-property
css3-shadow-effects
css3-transitions
current-color-keyword
device-independent-pixel
dropdowns
fonts
forms
graceful-degradation
height-and-width-dimensions
hover-selector
id-selector
image-galleries
image-opacity-and-transparency
layout
layout-horizontal-and-vertical-align
legal-color-values
linear-gradient
margins
media-queries
navigation-bars
object-fit
overflow
padding
pointer-events
progressive-enhancement
properties
selectors
selectors-reference
structure-of-css
styling-links
styling-lists
styling-tables
text
text-align
text-indent
text-shadow
the-box-model
transition
tutorials
units
using-css-animations
using-css-transitions
vertical-align
w3-css-containers
w3-css-slideshow
web-safe-fonts
will-change
z-index
index.md
d3
data-science-tools
design-patterns
designer-tools
developer-ethics
developer-tools
devops
docker
documentation
electron
elixir
elm
erlang
game-development
gatsbyjs
git
go
groovy
haskell
hibernate
html
ionic
java
javascript
joomla
jquery
julia
kotlin
laravel
linux
logic
machine-learning
mathematics
meta
miscellaneous
mobile-app-development
mongodb
natural-language-processing
neovim
network-engineering
nginx
nodejs
php
product-design
progressive-web-apps
puppet
python
r
react
react-native
redux
rest-api
robotics
rt-os
ruby
rust
security
semantic-ui
software-engineering
sql
ssh
svg
svn
swift
terminal-commandline
tools
typescript
typography
user-experience-design
user-experience-research
vagrant
vim
virtualbox
visual-design
voice
vue
vue-cli
web-augmented-reality
web-components
web-performance
web-virtual-reality
wordpress
working-in-tech
xml
portuguese
russian
spanish
news
tools
.editorconfig
.eslintignore
.eslintrc
.gitattributes
.gitignore
.node-inspectorrc
.prettierrc
.snyk
.travis.yml
.vcmrc
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE.md
README.md
docker-compose-shared.yml
docker-compose.yml
lerna.json
netlify.toml
package-lock.json
package.json
sample.env
39 lines
1.8 KiB
Markdown
39 lines
1.8 KiB
Markdown
|
---
|
||
|
|
title: CSS Framework Materialize
|
||
|
|
---
|
||
|
|
# CSS Framework Materialize
|
||
|
|
|
||
|
|
Materialize is a Responsive CSS framework based on Google's <a href='https://design.google.com/spec/' target='_blank' rel='nofollow'>Material Design</a> Language.
|
||
|
|
|
||
|
|
## Getting Started
|
||
|
|
|
||
|
|
Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Materialize library.
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<!--Import Google Icon Font-->
|
||
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
|
|
<!--Import materialize.css-->
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
|
||
|
|
|
||
|
|
<!--Let browser know website is optimized for mobile-->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>Hello World!</h1>
|
||
|
|
<!--Import jQuery before materialize.js-->
|
||
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
We have used a CDN in this example, but you can checkout other ways of installing Materialize <a href='http://materializecss.com/getting-started' target='_blank' rel='nofollow'>here</a>.
|
||
|
|
|
||
|
|
## Learning Resources
|
||
|
|
|
||
|
|
* The official documentation for Materialize is available <a href='www.materializecss.com/' target='_blank' rel='nofollow'>here</a>.
|
||
|
|
* Checkout Materialize's open source GitHub repository <a href='https://github.com/Dogfalo/materialize' target='_blank' rel='nofollow'>here</a>.
|
||
|
|
* <a href='https://scotch.io/tutorials/make-material-design-websites-with-the-materialize-css-framework' target='_blank' rel='nofollow'>Here</a> is a handy tutorial on using Materialize.
|