Привет всем! Если вы пробовали Material Design Lite, вы должно быть заметили составной паттерн классов, которые он использует. Это бывает довольно удобно, когда имеешь дело с цветами фона или текста.
![](https://habrastorage.org/getpro/habr/post_images/34a/34a/e22/34a34ae22bf5a82e898a8cbb11309cb9.png)
Это полный список классов, которые вы можете задать вашим элементам, пользуйтесь!
![](https://habrastorage.org/getpro/habr/post_images/34a/34a/e22/34a34ae22bf5a82e898a8cbb11309cb9.png)
Это полный список классов, которые вы можете задать вашим элементам, пользуйтесь!
Текстовый класс | Фоновый класс | Hex-значение |
---|---|---|
.mdl-color-text--red |
.mdl-color--red |
#f44336 |
.mdl-color-text--red-50 |
.mdl-color--red-50 |
#ffebee |
.mdl-color-text--red-100 |
.mdl-color--red-100 |
#ffcdd2 |
.mdl-color-text--red-200 |
.mdl-color--red-200 |
#ef9a9a |
.mdl-color-text--red-300 |
.mdl-color--red-300 |
#e57373 |
.mdl-color-text--red-400 |
.mdl-color--red-400 |
#ef5350 |
.mdl-color-text--red-500 |
.mdl-color--red-500 |
#f44336 |
.mdl-color-text--red-600 |
.mdl-color--red-600 |
#e53935 |
.mdl-color-text--red-700 |
.mdl-color--red-700 |
#d32f2f |
.mdl-color-text--red-800 |
.mdl-color--red-800 |
#c62828 |
.mdl-color-text--red-900 |
.mdl-color--red-900 |
#b71c1c |
.mdl-color-text--red-A100 |
.mdl-color--red-A100 |
#ff8a80 |
.mdl-color-text--red-A200 |
.mdl-color--red-A200 |
#ff5252 |
.mdl-color-text--red-A400 |
.mdl-color--red-A400 |
#ff1744 |
.mdl-color-text--red-A700 |
.mdl-color--red-A700 |
#d50000 |
.mdl-color-text--pink |
.mdl-color--pink |
#e91e63 |
.mdl-color-text--pink-50 |
.mdl-color--pink-50 |
#fce4ec |
.mdl-color-text--pink-100 |
.mdl-color--pink-100 |
#f8bbd0 |
.mdl-color-text--pink-200 |
.mdl-color--pink-200 |
#f48fb1 |
.mdl-color-text--pink-300 |
.mdl-color--pink-300 |
#f06292 |
.mdl-color-text--pink-400 |
.mdl-color--pink-400 |
#ec407a |
.mdl-color-text--pink-500 |
.mdl-color--pink-500 |
#e91e63 |
.mdl-color-text--pink-600 |
.mdl-color--pink-600 |
#d81b60 |
.mdl-color-text--pink-700 |
.mdl-color--pink-700 |
#c2185b |
.mdl-color-text--pink-800 |
.mdl-color--pink-800 |
#ad1457 |
.mdl-color-text--pink-900 |
.mdl-color--pink-900 |
#880e4f |
.mdl-color-text--pink-A100 |
.mdl-color--pink-A100 |
#ff80ab |
.mdl-color-text--pink-A200 |
.mdl-color--pink-A200 |
#ff4081 |
.mdl-color-text--pink-A400 |
.mdl-color--pink-A400 |
#f50057 |
.mdl-color-text--pink-A700 |
.mdl-color--pink-A700 |
#c51162 |
.mdl-color-text--purple |
.mdl-color--purple |
#9c27b0 |
.mdl-color-text--purple-50 |
.mdl-color--purple-50 |
#f3e5f5 |
.mdl-color-text--purple-100 |
.mdl-color--purple-100 |
#e1bee7 |
.mdl-color-text--purple-200 |
.mdl-color--purple-200 |
#ce93d8 |
.mdl-color-text--purple-300 |
.mdl-color--purple-300 |
#ba68c8 |
.mdl-color-text--purple-400 |
.mdl-color--purple-400 |
#ab47bc |
.mdl-color-text--purple-500 |
.mdl-color--purple-500 |
#9c27b0 |
.mdl-color-text--purple-600 |
.mdl-color--purple-600 |
#8e24aa |
.mdl-color-text--purple-700 |
.mdl-color--purple-700 |
#7b1fa2 |
.mdl-color-text--purple-800 |
.mdl-color--purple-800 |
#6a1b9a |
.mdl-color-text--purple-900 |
.mdl-color--purple-900 |
#4a148c |
.mdl-color-text--purple-A100 |
.mdl-color--purple-A100 |
#ea80fc |
.mdl-color-text--purple-A200 |
.mdl-color--purple-A200 |
#e040fb |
.mdl-color-text--purple-A400 |
.mdl-color--purple-A400 |
#d500f9 |
.mdl-color-text--purple-A700 |
.mdl-color--purple-A700 |
#aa00ff |
.mdl-color-text--deep-purple |
.mdl-color--deep-purple |
#673ab7 |
.mdl-color-text--deep-purple-50 |
.mdl-color--deep-purple-50 |
#ede7f6 |
.mdl-color-text--deep-purple-100 |
.mdl-color--deep-purple-100 |
#d1c4e9 |
.mdl-color-text--deep-purple-200 |
.mdl-color--deep-purple-200 |
#b39ddb |
.mdl-color-text--deep-purple-300 |
.mdl-color--deep-purple-300 |
#9575cd |
.mdl-color-text--deep-purple-400 |
.mdl-color--deep-purple-400 |
#7e57c2 |
.mdl-color-text--deep-purple-500 |
.mdl-color--deep-purple-500 |
#673ab7 |
.mdl-color-text--deep-purple-600 |
.mdl-color--deep-purple-600 |
#5e35b1 |
.mdl-color-text--deep-purple-700 |
.mdl-color--deep-purple-700 |
#512da8 |
.mdl-color-text--deep-purple-800 |
.mdl-color--deep-purple-800 |
#4527a0 |
.mdl-color-text--deep-purple-900 |
.mdl-color--deep-purple-900 |
#311b92 |
.mdl-color-text--deep-purple-A100 |
.mdl-color--deep-purple-A100 |
#b388ff |
.mdl-color-text--deep-purple-A200 |
.mdl-color--deep-purple-A200 |
#7c4dff |
.mdl-color-text--deep-purple-A400 |
.mdl-color--deep-purple-A400 |
#651fff |
.mdl-color-text--deep-purple-A700 |
.mdl-color--deep-purple-A700 |
#6200ea |
.mdl-color-text--indigo |
.mdl-color--indigo |
#3f51b5 |
.mdl-color-text--indigo-50 |
.mdl-color--indigo-50 |
#e8eaf6 |
.mdl-color-text--indigo-100 |
.mdl-color--indigo-100 |
#c5cae9 |
.mdl-color-text--indigo-200 |
.mdl-color--indigo-200 |
#9fa8da |
.mdl-color-text--indigo-300 |
.mdl-color--indigo-300 |
#7986cb |
.mdl-color-text--indigo-400 |
.mdl-color--indigo-400 |
#5c6bc0 |
.mdl-color-text--indigo-500 |
.mdl-color--indigo-500 |
#3f51b5 |
.mdl-color-text--indigo-600 |
.mdl-color--indigo-600 |
#3949ab |
.mdl-color-text--indigo-700 |
.mdl-color--indigo-700 |
#303f9f |
.mdl-color-text--indigo-800 |
.mdl-color--indigo-800 |
#283593 |
.mdl-color-text--indigo-900 |
.mdl-color--indigo-900 |
#1a237e |
.mdl-color-text--indigo-A100 |
.mdl-color--indigo-A100 |
#8c9eff |
.mdl-color-text--indigo-A200 |
.mdl-color--indigo-A200 |
#536dfe |
.mdl-color-text--indigo-A400 |
.mdl-color--indigo-A400 |
#3d5afe |
.mdl-color-text--indigo-A700 |
.mdl-color--indigo-A700 |
#304ffe |
.mdl-color-text--blue |
.mdl-color--blue |
#2196f3 |
.mdl-color-text--blue-50 |
.mdl-color--blue-50 |
#e3f2fd |
.mdl-color-text--blue-100 |
.mdl-color--blue-100 |
#bbdefb |
.mdl-color-text--blue-200 |
.mdl-color--blue-200 |
#90caf9 |
.mdl-color-text--blue-300 |
.mdl-color--blue-300 |
#64b5f6 |
.mdl-color-text--blue-400 |
.mdl-color--blue-400 |
#42a5f5 |
.mdl-color-text--blue-500 |
.mdl-color--blue-500 |
#2196f3 |
.mdl-color-text--blue-600 |
.mdl-color--blue-600 |
#1e88e5 |
.mdl-color-text--blue-700 |
.mdl-color--blue-700 |
#1976d2 |
.mdl-color-text--blue-800 |
.mdl-color--blue-800 |
#1565c0 |
.mdl-color-text--blue-900 |
.mdl-color--blue-900 |
#0d47a1 |
.mdl-color-text--blue-A100 |
.mdl-color--blue-A100 |
#82b1ff |
.mdl-color-text--blue-A200 |
.mdl-color--blue-A200 |
#448aff |
.mdl-color-text--blue-A400 |
.mdl-color--blue-A400 |
#2979ff |
.mdl-color-text--blue-A700 |
.mdl-color--blue-A700 |
#2962ff |
.mdl-color-text--light-blue |
.mdl-color--light-blue |
#03a9f4 |
.mdl-color-text--light-blue-50 |
.mdl-color--light-blue-50 |
#e1f5fe |
.mdl-color-text--light-blue-100 |
.mdl-color--light-blue-100 |
#b3e5fc |
.mdl-color-text--light-blue-200 |
.mdl-color--light-blue-200 |
#81d4fa |
.mdl-color-text--light-blue-300 |
.mdl-color--light-blue-300 |
#4fc3f7 |
.mdl-color-text--light-blue-400 |
.mdl-color--light-blue-400 |
#29b6f6 |
.mdl-color-text--light-blue-500 |
.mdl-color--light-blue-500 |
#03a9f4 |
.mdl-color-text--light-blue-600 |
.mdl-color--light-blue-600 |
#039be5 |
.mdl-color-text--light-blue-700 |
.mdl-color--light-blue-700 |
#0288d1 |
.mdl-color-text--light-blue-800 |
.mdl-color--light-blue-800 |
#0277bd |
.mdl-color-text--light-blue-900 |
.mdl-color--light-blue-900 |
#01579b |
.mdl-color-text--light-blue-A100 |
.mdl-color--light-blue-A100 |
#80d8ff |
.mdl-color-text--light-blue-A200 |
.mdl-color--light-blue-A200 |
#40c4ff |
.mdl-color-text--light-blue-A400 |
.mdl-color--light-blue-A400 |
#00b0ff |
.mdl-color-text--light-blue-A700 |
.mdl-color--light-blue-A700 |
#0091ea |
.mdl-color-text--cyan |
.mdl-color--cyan |
#00bcd4 |
.mdl-color-text--cyan-50 |
.mdl-color--cyan-50 |
#e0f7fa |
.mdl-color-text--cyan-100 |
.mdl-color--cyan-100 |
#b2ebf2 |
.mdl-color-text--cyan-200 |
.mdl-color--cyan-200 |
#80deea |
.mdl-color-text--cyan-300 |
.mdl-color--cyan-300 |
#4dd0e1 |
.mdl-color-text--cyan-400 |
.mdl-color--cyan-400 |
#26c6da |
.mdl-color-text--cyan-500 |
.mdl-color--cyan-500 |
#00bcd4 |
.mdl-color-text--cyan-600 |
.mdl-color--cyan-600 |
#00acc1 |
.mdl-color-text--cyan-700 |
.mdl-color--cyan-700 |
#0097a7 |
.mdl-color-text--cyan-800 |
.mdl-color--cyan-800 |
#00838f |
.mdl-color-text--cyan-900 |
.mdl-color--cyan-900 |
#006064 |
.mdl-color-text--cyan-A100 |
.mdl-color--cyan-A100 |
#84ffff |
.mdl-color-text--cyan-A200 |
.mdl-color--cyan-A200 |
#18ffff |
.mdl-color-text--cyan-A400 |
.mdl-color--cyan-A400 |
#00e5ff |
.mdl-color-text--cyan-A700 |
.mdl-color--cyan-A700 |
#00b8d4 |
.mdl-color-text--teal |
.mdl-color--teal |
#009688 |
.mdl-color-text--teal-50 |
.mdl-color--teal-50 |
#e0f2f1 |
.mdl-color-text--teal-100 |
.mdl-color--teal-100 |
#b2dfdb |
.mdl-color-text--teal-200 |
.mdl-color--teal-200 |
#80cbc4 |
.mdl-color-text--teal-300 |
.mdl-color--teal-300 |
#4db6ac |
.mdl-color-text--teal-400 |
.mdl-color--teal-400 |
#26a69a |
.mdl-color-text--teal-500 |
.mdl-color--teal-500 |
#009688 |
.mdl-color-text--teal-600 |
.mdl-color--teal-600 |
#00897b |
.mdl-color-text--teal-700 |
.mdl-color--teal-700 |
#00796b |
.mdl-color-text--teal-800 |
.mdl-color--teal-800 |
#00695c |
.mdl-color-text--teal-900 |
.mdl-color--teal-900 |
#004d40 |
.mdl-color-text--teal-A100 |
.mdl-color--teal-A100 |
#a7ffeb |
.mdl-color-text--teal-A200 |
.mdl-color--teal-A200 |
#64ffda |
.mdl-color-text--teal-A400 |
.mdl-color--teal-A400 |
#1de9b6 |
.mdl-color-text--teal-A700 |
.mdl-color--teal-A700 |
#00bfa5 |
.mdl-color-text--green |
.mdl-color--green |
#4caf50 |
.mdl-color-text--green-50 |
.mdl-color--green-50 |
#e8f5e9 |
.mdl-color-text--green-100 |
.mdl-color--green-100 |
#c8e6c9 |
.mdl-color-text--green-200 |
.mdl-color--green-200 |
#a5d6a7 |
.mdl-color-text--green-300 |
.mdl-color--green-300 |
#81c784 |
.mdl-color-text--green-400 |
.mdl-color--green-400 |
#66bb6a |
.mdl-color-text--green-500 |
.mdl-color--green-500 |
#4caf50 |
.mdl-color-text--green-600 |
.mdl-color--green-600 |
#43a047 |
.mdl-color-text--green-700 |
.mdl-color--green-700 |
#388e3c |
.mdl-color-text--green-800 |
.mdl-color--green-800 |
#2e7d32 |
.mdl-color-text--green-900 |
.mdl-color--green-900 |
#1b5e20 |
.mdl-color-text--green-A100 |
.mdl-color--green-A100 |
#b9f6ca |
.mdl-color-text--green-A200 |
.mdl-color--green-A200 |
#69f0ae |
.mdl-color-text--green-A400 |
.mdl-color--green-A400 |
#00e676 |
.mdl-color-text--green-A700 |
.mdl-color--green-A700 |
#00c853 |
.mdl-color-text--light-green |
.mdl-color--light-green |
#8bc34a |
.mdl-color-text--light-green-50 |
.mdl-color--light-green-50 |
#f1f8e9 |
.mdl-color-text--light-green-100 |
.mdl-color--light-green-100 |
#dcedc8 |
.mdl-color-text--light-green-200 |
.mdl-color--light-green-200 |
#c5e1a5 |
.mdl-color-text--light-green-300 |
.mdl-color--light-green-300 |
#aed581 |
.mdl-color-text--light-green-400 |
.mdl-color--light-green-400 |
#9ccc65 |
.mdl-color-text--light-green-500 |
.mdl-color--light-green-500 |
#8bc34a |
.mdl-color-text--light-green-600 |
.mdl-color--light-green-600 |
#7cb342 |
.mdl-color-text--light-green-700 |
.mdl-color--light-green-700 |
#689f38 |
.mdl-color-text--light-green-800 |
.mdl-color--light-green-800 |
#558b2f |
.mdl-color-text--light-green-900 |
.mdl-color--light-green-900 |
#33691e |
.mdl-color-text--light-green-A100 |
.mdl-color--light-green-A100 |
#ccff90 |
.mdl-color-text--light-green-A200 |
.mdl-color--light-green-A200 |
#b2ff59 |
.mdl-color-text--light-green-A400 |
.mdl-color--light-green-A400 |
#76ff03 |
.mdl-color-text--light-green-A700 |
.mdl-color--light-green-A700 |
#64dd17 |
.mdl-color-text--lime |
.mdl-color--lime |
#cddc39 |
.mdl-color-text--lime-50 |
.mdl-color--lime-50 |
#f9fbe7 |
.mdl-color-text--lime-100 |
.mdl-color--lime-100 |
#f0f4c3 |
.mdl-color-text--lime-200 |
.mdl-color--lime-200 |
#e6ee9c |
.mdl-color-text--lime-300 |
.mdl-color--lime-300 |
#dce775 |
.mdl-color-text--lime-400 |
.mdl-color--lime-400 |
#d4e157 |
.mdl-color-text--lime-500 |
.mdl-color--lime-500 |
#cddc39 |
.mdl-color-text--lime-600 |
.mdl-color--lime-600 |
#c0ca33 |
.mdl-color-text--lime-700 |
.mdl-color--lime-700 |
#afb42b |
.mdl-color-text--lime-800 |
.mdl-color--lime-800 |
#9e9d24 |
.mdl-color-text--lime-900 |
.mdl-color--lime-900 |
#827717 |
.mdl-color-text--lime-A100 |
.mdl-color--lime-A100 |
#f4ff81 |
.mdl-color-text--lime-A200 |
.mdl-color--lime-A200 |
#eeff41 |
.mdl-color-text--lime-A400 |
.mdl-color--lime-A400 |
#c6ff00 |
.mdl-color-text--lime-A700 |
.mdl-color--lime-A700 |
#aeea00 |
.mdl-color-text--yellow |
.mdl-color--yellow |
#ffeb3b |
.mdl-color-text--yellow-50 |
.mdl-color--yellow-50 |
#fffde7 |
.mdl-color-text--yellow-100 |
.mdl-color--yellow-100 |
#fff9c4 |
.mdl-color-text--yellow-200 |
.mdl-color--yellow-200 |
#fff59d |
.mdl-color-text--yellow-300 |
.mdl-color--yellow-300 |
#fff176 |
.mdl-color-text--yellow-400 |
.mdl-color--yellow-400 |
#ffee58 |
.mdl-color-text--yellow-500 |
.mdl-color--yellow-500 |
#ffeb3b |
.mdl-color-text--yellow-600 |
.mdl-color--yellow-600 |
#fdd835 |
.mdl-color-text--yellow-700 |
.mdl-color--yellow-700 |
#fbc02d |
.mdl-color-text--yellow-800 |
.mdl-color--yellow-800 |
#f9a825 |
.mdl-color-text--yellow-900 |
.mdl-color--yellow-900 |
#f57f17 |
.mdl-color-text--yellow-A100 |
.mdl-color--yellow-A100 |
#ffff8d |
.mdl-color-text--yellow-A200 |
.mdl-color--yellow-A200 |
#ffff00 |
.mdl-color-text--yellow-A400 |
.mdl-color--yellow-A400 |
#ffea00 |
.mdl-color-text--yellow-A700 |
.mdl-color--yellow-A700 |
#ffd600 |
.mdl-color-text--amber |
.mdl-color--amber |
#ffc107 |
.mdl-color-text--amber-50 |
.mdl-color--amber-50 |
#fff8e1 |
.mdl-color-text--amber-100 |
.mdl-color--amber-100 |
#ffecb3 |
.mdl-color-text--amber-200 |
.mdl-color--amber-200 |
#ffe082 |
.mdl-color-text--amber-300 |
.mdl-color--amber-300 |
#ffd54f |
.mdl-color-text--amber-400 |
.mdl-color--amber-400 |
#ffca28 |
.mdl-color-text--amber-500 |
.mdl-color--amber-500 |
#ffc107 |
.mdl-color-text--amber-600 |
.mdl-color--amber-600 |
#ffb300 |
.mdl-color-text--amber-700 |
.mdl-color--amber-700 |
#ffa000 |
.mdl-color-text--amber-800 |
.mdl-color--amber-800 |
#ff8f00 |
.mdl-color-text--amber-900 |
.mdl-color--amber-900 |
#ff6f00 |
.mdl-color-text--amber-A100 |
.mdl-color--amber-A100 |
#ffe57f |
.mdl-color-text--amber-A200 |
.mdl-color--amber-A200 |
#ffd740 |
.mdl-color-text--amber-A400 |
.mdl-color--amber-A400 |
#ffc400 |
.mdl-color-text--amber-A700 |
.mdl-color--amber-A700 |
#ffab00 |
.mdl-color-text--orange |
.mdl-color--orange |
#ff9800 |
.mdl-color-text--orange-50 |
.mdl-color--orange-50 |
#fff3e0 |
.mdl-color-text--orange-100 |
.mdl-color--orange-100 |
#ffe0b2 |
.mdl-color-text--orange-200 |
.mdl-color--orange-200 |
#ffcc80 |
.mdl-color-text--orange-300 |
.mdl-color--orange-300 |
#ffb74d |
.mdl-color-text--orange-400 |
.mdl-color--orange-400 |
#ffa726 |
.mdl-color-text--orange-500 |
.mdl-color--orange-500 |
#ff9800 |
.mdl-color-text--orange-600 |
.mdl-color--orange-600 |
#fb8c00 |
.mdl-color-text--orange-700 |
.mdl-color--orange-700 |
#f57c00 |
.mdl-color-text--orange-800 |
.mdl-color--orange-800 |
#ef6c00 |
.mdl-color-text--orange-900 |
.mdl-color--orange-900 |
#e65100 |
.mdl-color-text--orange-A100 |
.mdl-color--orange-A100 |
#ffd180 |
.mdl-color-text--orange-A200 |
.mdl-color--orange-A200 |
#ffab40 |
.mdl-color-text--orange-A400 |
.mdl-color--orange-A400 |
#ff9100 |
.mdl-color-text--orange-A700 |
.mdl-color--orange-A700 |
#ff6d00 |
.mdl-color-text--deep-orange |
.mdl-color--deep-orange |
#ff5722 |
.mdl-color-text--deep-orange-50 |
.mdl-color--deep-orange-50 |
#fbe9e7 |
.mdl-color-text--deep-orange-100 |
.mdl-color--deep-orange-100 |
#ffccbc |
.mdl-color-text--deep-orange-200 |
.mdl-color--deep-orange-200 |
#ffab91 |
.mdl-color-text--deep-orange-300 |
.mdl-color--deep-orange-300 |
#ff8a65 |
.mdl-color-text--deep-orange-400 |
.mdl-color--deep-orange-400 |
#ff7043 |
.mdl-color-text--deep-orange-500 |
.mdl-color--deep-orange-500 |
#ff5722 |
.mdl-color-text--deep-orange-600 |
.mdl-color--deep-orange-600 |
#f4511e |
.mdl-color-text--deep-orange-700 |
.mdl-color--deep-orange-700 |
#e64a19 |
.mdl-color-text--deep-orange-800 |
.mdl-color--deep-orange-800 |
#d84315 |
.mdl-color-text--deep-orange-900 |
.mdl-color--deep-orange-900 |
#bf360c |
.mdl-color-text--deep-orange-A100 |
.mdl-color--deep-orange-A100 |
#ff9e80 |
.mdl-color-text--deep-orange-A200 |
.mdl-color--deep-orange-A200 |
#ff6e40 |
.mdl-color-text--deep-orange-A400 |
.mdl-color--deep-orange-A400 |
#ff3d00 |
.mdl-color-text--deep-orange-A700 |
.mdl-color--deep-orange-A700 |
#dd2c00 |
.mdl-color-text--brown |
.mdl-color--brown |
#795548 |
.mdl-color-text--brown-50 |
.mdl-color--brown-50 |
#efebe9 |
.mdl-color-text--brown-100 |
.mdl-color--brown-100 |
#d7ccc8 |
.mdl-color-text--brown-200 |
.mdl-color--brown-200 |
#bcaaa4 |
.mdl-color-text--brown-300 |
.mdl-color--brown-300 |
#a1887f |
.mdl-color-text--brown-400 |
.mdl-color--brown-400 |
#8d6e63 |
.mdl-color-text--brown-500 |
.mdl-color--brown-500 |
#795548 |
.mdl-color-text--brown-600 |
.mdl-color--brown-600 |
#6d4c41 |
.mdl-color-text--brown-700 |
.mdl-color--brown-700 |
#5d4037 |
.mdl-color-text--brown-800 |
.mdl-color--brown-800 |
#4e342e |
.mdl-color-text--brown-900 |
.mdl-color--brown-900 |
#3e2723 |
.mdl-color-text--grey |
.mdl-color--grey |
#9e9e9e |
.mdl-color-text--grey-50 |
.mdl-color--grey-50 |
#fafafa |
.mdl-color-text--grey-100 |
.mdl-color--grey-100 |
#f5f5f5 |
.mdl-color-text--grey-200 |
.mdl-color--grey-200 |
#eeeeee |
.mdl-color-text--grey-300 |
.mdl-color--grey-300 |
#e0e0e0 |
.mdl-color-text--grey-400 |
.mdl-color--grey-400 |
#bdbdbd |
.mdl-color-text--grey-500 |
.mdl-color--grey-500 |
#9e9e9e |
.mdl-color-text--grey-600 |
.mdl-color--grey-600 |
#757575 |
.mdl-color-text--grey-700 |
.mdl-color--grey-700 |
#616161 |
.mdl-color-text--grey-800 |
.mdl-color--grey-800 |
#424242 |
.mdl-color-text--grey-900 |
.mdl-color--grey-900 |
#212121 |
.mdl-color-text--blue-grey |
.mdl-color--blue-grey |
#607d8b |
.mdl-color-text--blue-grey-50 |
.mdl-color--blue-grey-50 |
#eceff1 |
.mdl-color-text--blue-grey-100 |
.mdl-color--blue-grey-100 |
#cfd8dc |
.mdl-color-text--blue-grey-200 |
.mdl-color--blue-grey-200 |
#b0bec5 |
.mdl-color-text--blue-grey-300 |
.mdl-color--blue-grey-300 |
#90a4ae |
.mdl-color-text--blue-grey-400 |
.mdl-color--blue-grey-400 |
#78909c |
.mdl-color-text--blue-grey-500 |
.mdl-color--blue-grey-500 |
#607d8b |
.mdl-color-text--blue-grey-600 |
.mdl-color--blue-grey-600 |
#546e7a |
.mdl-color-text--blue-grey-700 |
.mdl-color--blue-grey-700 |
#455a64 |
.mdl-color-text--blue-grey-800 |
.mdl-color--blue-grey-800 |
#37474f |
.mdl-color-text--blue-grey-900 |
.mdl-color--blue-grey-900 |
#263238 |
.mdl-color-text--black |
.mdl-color--black |
#000000 |
.mdl-color-text--white |
.mdl-color--white |
#ffffff |
Поделиться с друзьями
Комментарии (13)
pepelsbey
12.12.2016 11:40Вы уверены, что Хабр — это хорошее место, чтобы дампить листинги классов?
bykov
12.12.2016 11:59Мне бы хотелось, чтобы эти и другие (например, по типографике) классы были представлены в документации на официальном сайте Material Design Lite. Однако, гугл почему-то не стал об этом писать ни на сайте, ни в .md файлах на github. Однако, при разработке с использование material design lite возникает желание использовать цвета именно из их набора, и это может быть полезно, чтобы использовать для reference.
raveclassic
12.12.2016 17:51Простите, но зачем это все?
Неужели вот этого не достаточно? Или этого если для статики?
На худой конец
почему-то не стал об этом писать ни на сайте, ни в .md файлах на github.
И правильно сделал, потому что класснеймы не имеют никакого отношения к их дизайн-спеке. Это лишь частный случай.
цвета именно из их набора
Но разве они чем-то отличаются от гугловой спеки?bykov
12.12.2016 18:07не имеют никакого отношения к их дизайн-спеке
Не соглашусь с вами. Всё-таки речь идет не о спецификации material design, а о их фреймворке Material Design Lite. А классы приведены для тех, кто подключает именно material design lite. И правда, зачем сочинять свои собственные классы, если уже есть готовые, которые можно использовать. И они их применяют в своих examples для MDL, но нигде не описали.
На худой конец
Спасибон за ссылку на палитру цветов из спецификацию material design. Ну вот жаль, что они в документации к своему фреймворку не перечислили классы, которые они задали.
вот этого не достаточно? Или этого
Нет, далеко не всем достаточно читать SCSS код для этого. Можно и CDN ссылку открыть на подключаемый CSS файл со стилями открыть, зачем тогда вообще документацию писать к чему-нибудь, можно же sources глянуть всегда.
Без обидraveclassic
12.12.2016 18:14Всё-таки речь идет не о спецификации material design, а о их фреймворке Material Design Lite.
Проглядел, действительно. Но я имел в виду именно спеку material design, а не доки к mtl.
Без обид
Да никаких обид. :) Просто лучше было бы им в доки открыть PR с автогенерацией этой таблицы.
tehnolog
Жаль, что нет визуального представления цветов.
Upd. Сейчас посмотрел в источнике — а там есть.
bykov
Да, в первоисточнике раскрашено. Мне тоже жаль, что здесь нельзя выставить цвета, хабра-редактор вырезает стили.
3axap4eHko
а если вставить картинки?
bykov
Да, хочу попробовать вставить картинками. Посмотрим, как это будет отображаться здесь и на мобильной версии хабра.
Ставьте лайк, если за то, чтобы поменять на картинки :)
776166
Любой уважающий себя сайт должен иметь специальный фильтр, который реагирует на варианты фразы «ставьте лайк, если…». Пост должен немедленно удаляться, а пользователь получать бан на минимум год.
bykov
Понимаю ваше недовольство. Так сейчас принято. Люди могут выразить свое мнение лайками или комментами. Посмотрите, каждый подкастер на youtube говорит своим слушателям, что они могут выразить свое мнение в комментах под видео.
Вот и я прошу вас выразить свое желание (надо вам картинками переделать или не надо). Хотите лайками, хотите комментами, хотите ещё как-нибудь по-другому.