diff options
add flexbox layout
7 files changed, 226 insertions, 14 deletions
| -rw-r--r-- | demo/index.html | 31 | ||||
| -rw-r--r-- | dist/spectre.css | 117 | ||||
| -rw-r--r-- | src/base.less | 1 | ||||
| -rw-r--r-- | src/layout.less | 69 | ||||
| -rw-r--r-- | src/typography.less | 2 | ||||
| -rw-r--r-- | src/utilities.less | 9 | ||||
| -rw-r--r-- | src/variables.less | 11 |
diff --git a/demo/index.html b/demo/index.html index 77480e7..f886414 100644 --- a/demo/index.html +++ b/demo/index.html @@ -50,6 +50,37 @@ <li>list item 3</li> </ol> </section> + <section class="layout"> + <header class="text-center">flexbox layout</header> + <div class="columns"> + <div class="column col-6"> + First column + </div> + <div class="column"> + Second column + </div> + <div class="column"> + Third column + </div> + <div class="column"> + Fourth column + </div> + </div> + <div class="columns"> + <div class="column col-4"> + First column + </div> + <div class="column col-4"> + Second column + </div> + <div class="column"> + Third column + </div> + <div class="column"> + Fourth column + </div> + </div> + </section> </section> </body> </html>
\ No newline at end of file diff --git a/dist/spectre.css b/dist/spectre.css index b0a84d8..3673bd7 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -382,6 +382,7 @@ ol ol { } html { font-size: 10px; + -webkit-tap-highlight-color: transparent; } body { color: #333; @@ -396,6 +397,8 @@ h4, h5, h6 { font-weight: 300; + line-height: 1.1; + color: inherit; } h1 { font-size: 5rem; @@ -496,12 +499,116 @@ ol { ol ol { list-style-type: lower-alpha; } -.clearfix:before, -.clearfix:after { - content: " "; - display: table; +.container { + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; +} +.columns { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin-left: -10px; + margin-right: -10px; +} +.column { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + padding: 10px; +} +.column.col-12 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 100%; +} +.column.col-11 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 91.66666667%; +} +.column.col-10 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 83.33333333%; } -.clearfix:after { +.column.col-9 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 75%; +} +.column.col-8 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 66.66666667%; +} +.column.col-7 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 58.33333333%; +} +.column.col-6 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 50%; +} +.column.col-5 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 41.66666667%; +} +.column.col-4 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 33.33333333%; +} +.column.col-3 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 25%; +} +.column.col-2 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 16.66666667%; +} +.column.col-1 { + -webkit-box-flex: 0; + -webkit-flex: none; + -ms-flex: none; + flex: none; + width: 8.33333333%; +} +.clearfix::after, +.container::after, +.columns::after { + content: ""; + display: table; clear: both; } .pull-left { diff --git a/src/base.less b/src/base.less index 8dc377f..1590e8e 100644 --- a/src/base.less +++ b/src/base.less @@ -8,6 +8,7 @@ } html { font-size: 10px; + -webkit-tap-highlight-color: transparent; } body { color: @body-font-color; diff --git a/src/layout.less b/src/layout.less index b1e35d6..7879aff 100644 --- a/src/layout.less +++ b/src/layout.less @@ -1 +1,70 @@ // Layout +.container { + margin-left: auto; + margin-right: auto; + padding-left: 10px; + padding-right: 10px; + &:extend(.clearfix all); +} + +.columns { + display: flex; + margin-left: -10px; + margin-right: -10px; + &:extend(.clearfix all); +} +.column { + flex: 1; + padding: 10px; + + &.col-12 { + flex: none; + width: 100%; + } + &.col-11 { + flex: none; + width: 91.66666667%; + } + &.col-10 { + flex: none; + width: 83.33333333%; + } + &.col-9 { + flex: none; + width: 75%; + } + &.col-8 { + flex: none; + width: 66.66666667%; + } + &.col-7 { + flex: none; + width: 58.33333333%; + } + &.col-6 { + flex: none; + width: 50%; + } + &.col-5 { + flex: none; + width: 41.66666667%; + } + &.col-4 { + flex: none; + width: 33.33333333%; + } + &.col-3 { + flex: none; + width: 25%; + } + &.col-2 { + flex: none; + width: 16.66666667%; + } + &.col-1 { + flex: none; + width: 8.33333333%; + } +} + + diff --git a/src/typography.less b/src/typography.less index 7b76e62..e3a8d37 100644 --- a/src/typography.less +++ b/src/typography.less @@ -6,6 +6,8 @@ h4, h5, h6 { font-weight: 300; + line-height: 1.1; + color: inherit; } h1 { font-size: 5rem; diff --git a/src/utilities.less b/src/utilities.less index f7a7aa1..eee854a 100644 --- a/src/utilities.less +++ b/src/utilities.less @@ -1,13 +1,6 @@ // Position .clearfix { - &:before, - &:after { - content: " "; // 1 - display: table; // 2 - } - &:after { - clear: both; - } + .clearfix(); } .pull-left { float: left !important; diff --git a/src/variables.less b/src/variables.less index 35a1d15..d4a8cb9 100644 --- a/src/variables.less +++ b/src/variables.less @@ -4,4 +4,13 @@ @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 +@body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif; + +// Mixins +.clearfix() { + &::after { + content: ""; + display: table; + clear: both; + } +}
\ No newline at end of file |