diff options
update typography style
9 files changed, 252 insertions, 4 deletions
| -rw-r--r-- | src/base.less | 9 | ||||
| -rw-r--r-- | src/buttons.less | 1 | ||||
| -rw-r--r-- | src/dist/layout.css | 1 | ||||
| -rw-r--r-- | src/dist/type.css | 1 | ||||
| -rw-r--r-- | src/layout.less | 1 | ||||
| -rw-r--r-- | src/normalize.less | 23 | ||||
| -rw-r--r-- | src/typography.less | 112 | ||||
| -rw-r--r-- | src/utilities.less | 102 | ||||
| -rw-r--r-- | src/variables.less | 6 |
diff --git a/src/base.less b/src/base.less index 7e0005c..06e46dd 100644 --- a/src/base.less +++ b/src/base.less @@ -1,4 +1,4 @@ -// Base +/* Base */ * { box-sizing: border-box; } @@ -6,7 +6,12 @@ *:after { box-sizing: border-box; } +html { + font-size: 10px; +} body { + color: @body-font-color; + font-family: @body-font-family; + font-size: @body-font-size; background-color: @body-bg; - font-size: @body-font-family; } diff --git a/src/buttons.less b/src/buttons.less new file mode 100644 index 0000000..2175666 --- /dev/null +++ b/src/buttons.less @@ -0,0 +1 @@ +/* Buttons */
\ No newline at end of file diff --git a/src/dist/layout.css b/src/dist/layout.css new file mode 100644 index 0000000..428cfa1 --- /dev/null +++ b/src/dist/layout.css @@ -0,0 +1 @@ +/* Layout */ diff --git a/src/dist/type.css b/src/dist/type.css new file mode 100644 index 0000000..d7bacdf --- /dev/null +++ b/src/dist/type.css @@ -0,0 +1 @@ +/* Type */ diff --git a/src/layout.less b/src/layout.less new file mode 100644 index 0000000..428cfa1 --- /dev/null +++ b/src/layout.less @@ -0,0 +1 @@ +/* Layout */ diff --git a/src/normalize.less b/src/normalize.less index 3bd3b62..7c6577e 100644 --- a/src/normalize.less +++ b/src/normalize.less @@ -421,4 +421,27 @@ table { td, th { padding: 0; +} + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +ul, +ol { + list-style: none; + padding: 0; + margin: 0; +} +ul ul, +ol ul, +ul ol, +ol ol { + margin-bottom: 0; }
\ No newline at end of file diff --git a/src/typography.less b/src/typography.less new file mode 100644 index 0000000..4c7ee81 --- /dev/null +++ b/src/typography.less @@ -0,0 +1,112 @@ +/* Typography */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 300; +} +h1 { + font-size: 5rem; +} +h2 { + font-size: 4rem; +} +h3 { + font-size: 3rem; +} +h4 { + font-size: 2.4rem; +} +h5 { + font-size: 2rem; +} +h6 { + font-size: 1.6rem; +} +p { + line-height: 1.428571429; + margin: 0 0 1rem; + + &.lead { + font-size: 120%; + } +} +blockquote { + padding: 1rem 2rem; + border-left: 2px solid #ddd; + + p:last-child { + margin-bottom: 0; + } +} + +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} + +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} + +.text-bold { + font-weight: bold; +} +.text-italic { + font-style: italic; +} + +.text-ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.text-clip { + white-space: nowrap; + overflow: hidden; + text-overflow: clip; +} +.text-break { + word-break: break-word; + word-wrap: break-word; + hyphens: auto; +} +/* List */ +ul, +ol { + ul, + ol { + margin-left: 2rem; + } + margin: 0 0 1rem; +} +ul { + list-style: disc inside; + + ul { + list-style-type: circle; + } +} +ol { + list-style: decimal inside; + + ol { + list-style-type: lower-alpha; + } +}
\ No newline at end of file diff --git a/src/utilities.less b/src/utilities.less new file mode 100644 index 0000000..775fe58 --- /dev/null +++ b/src/utilities.less @@ -0,0 +1,102 @@ +/* Position */ +.clearfix { + &:before, + &:after { + content: " "; // 1 + display: table; // 2 + } + &:after { + clear: both; + } +} +.pull-left { + float: left !important; +} +.pull-right { + float: right !important; +} + +.rel { + position: relative; +} +.abs { + position: absolute; +} +.fixed { + position: fixed; +} +.top { + .abs; + top: 0; +} +.right { + .abs; + right: 0; +} +.bottom { + .abs; + bottom: 0; +} +.left { + .abs; + left: 0; +} + +.mt-10 { + margin-top: 10px; +} +.mr-10 { + margin-right: 10px; +} +.mb-10 { + margin-bottom: 10px; +} +.ml-10 { + margin-left: 10px; +} + +.mt-5 { + margin-top: 5px; +} +.mr-5 { + margin-right: 5px; +} +.mb-5 { + margin-bottom: 5px; +} +.ml-5 { + margin-left: 5px; +} + +/* Display */ +.block { + display: block !important; +} +.inline { + display: inline !important; +} +.inline-block { + display: inline-block !important; +} +.flex { + display: flex; +} +.hide { + display: none !important; +} + +/* Shadow */ +.shadow { + box-shadow: 0 1px 4px rgba(0, 0, 0, .3); +} +.light-shadow { + box-shadow: 0 1px 2px rgba(0, 0, 0, .15); +} + +/* Shapes */ +.rounded { + border-radius: 3px; +} +.circle { + border-radius: 50%; +}
\ No newline at end of file diff --git a/src/variables.less b/src/variables.less index 98567e4..e31a594 100644 --- a/src/variables.less +++ b/src/variables.less @@ -1,5 +1,7 @@ -// Core variables +/* Core variables */ -// Global +/* Global */ @body-bg: #fff; +@body-font-color: #333; +@body-font-size: 14px; @body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif;
\ No newline at end of file |