mirror of
https://github.com/Templarian/MaterialDesign.git
synced 2026-03-06 08:34:15 +01:00
45 lines
1.7 KiB
Plaintext
45 lines
1.7 KiB
Plaintext
@title Style
|
|
@example2(icon1, icon2){
|
|
<div style="clear:both">
|
|
<div style="position:relative;width:242px;height:242px;border:1px solid #DDD;float:right;margin:0 0 20px 20px;">
|
|
<img src="/images/{@icon2}.svg" style="position:absolute;top:0;bottom:0;" />
|
|
<img src="/images/grid-240.svg" />
|
|
</div>
|
|
<div style="position:relative;width:242px;height:242px;border:1px solid #DDD;float:right;margin:0 0 20px 20px;">
|
|
<img src="/images/{@icon1}.svg" style="position:absolute;top:0;bottom:0;" />
|
|
<img src="/images/grid-240.svg" />
|
|
</div>
|
|
</div>
|
|
}
|
|
@clear(){
|
|
<div style="clear:both;"></div>
|
|
}
|
|
|
|
# @title (Work in Progress)
|
|
|
|
Google does an excellent job [explaining](http://www.google.com/design/spec/style/icons.html#icons-system-icons) the correct way to style icons to fit the Material Design ecosystem. This document is aimed at diving into these core concepts a little further. It also dives into ways to make new icons.
|
|
|
|
## Grid, Proportion, and Sizing
|
|
|
|
@example2(grid-240-circle, grid-240-box) Geometry goes a long to way to ensure that icons are consistent.
|
|
|
|
- Grid
|
|
- Proportion
|
|
- Size
|
|
|
|
@example2(grid-240-octagon, grid-240-off)
|
|
|
|
@example2(grid-240-circle-outline, grid-240-box-outline) Icons fall into a few unique groups for example `circle`, `box`, `outline`, and `off`. Each has a unique size that is kept consistent. All circle icons for instance are `20dp` while all boxes are `18dp`.
|
|
|
|
@example2(grid-240-account, grid-240-account-box-outline) Some more text here explaining how this applies to icons.
|
|
|
|
## Rounded Corners
|
|
|
|
Content.
|
|
|
|
## Help Edit this on GitHub
|
|
|
|
If you want to help edit this document simply click the edit on GitHub button at the top right. Illustrations will be added next to sections.
|
|
|
|
@clear()
|