Materializierung des Web

08.06.2016

Diesmal geht es um das CSS Framework Materialize.

Zusammen mit Web-Seiten Framework Grav bildet dies das Hauptgerüst für die »SuperMOS« Web-Seite. Materialize-CSS fußt auf Googles Material-Design und ist auch Basis für Android-Mobile Designs.

Das verwendete Farbschema hier basiert auf dem blue-grey Farbschema. Hinzu kommen noch ein paar Alarm-Farben und die üblichen Graustufen.

Haupt-Farbschema

#ECEFF1 : blue-grey lighten-5

#CFD8DC : blue-grey lighten-4

#B0BEC5 : blue-grey lighten-3

#90A4AE : blue-grey lighten-2

#78909C : blue-grey lighten-1

#607D8B : blue-grey

#546E7A : blue-grey darken-1

#455A64 : blue-grey darken-2

#37474F : blue-grey darken-3

#263238 : blue-grey darken-4

Grüntöne

#8BC34A : light-green

#558B2F : light-green darken-3

#33691E : light-green darken-4

Rottöne

#FF9800 orange

#EF6C00 orange darken-3

#E65100 orange darken-4

Effektfarben

#0097A7 cyan darken-2

#00838F cyan darken-3

#006064 cyan darken-4

Grautöne

#000000 : black

#FFFFFF : white

#FAFAFA : grey lighten-5

#F5F5F5 : grey lighten-4

#EEEEEE : grey lighten-3

#E0E0E0 : grey lighten-2

#BDBDBD : grey lighten-1

#9E9E9E : grey

#757575 : grey darken-1

#616161 : grey darken-2

#424242 : grey darken-3

#212121 : grey darken-4

Die entsprechenden Vordergrund-Farben werden gebildet, indem ein -text an die Farbe angehängt wird: So wird aus light-green eben light-green-text. Für den Helligkeitsmodifikator für Texte muss text- voran gestellt werden. Damit wird darken-3 mittels text-darken-3 abgebildet.