-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
27
committed
May 23, 2021
1 parent
9ba1987
commit 35651a5
Showing
28 changed files
with
950 additions
and
431 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,43 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="../index.css"> | ||
| <link rel="stylesheet" href="less.css"> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <style> | ||
| figure, blockquote, p, body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| </style> | ||
| <link rel="stylesheet" href="../index.css"> | ||
| <link rel="stylesheet" href="less.css"> | ||
| </head> | ||
| <body> | ||
| <figure class="bc_fff tac pt24 pb24 pl24 pr24"> | ||
| <img class="w128 h128 br100% db mla mra mb24" src="./avatar.jpg" alt="avatar" width="128" height="128" /> | ||
| <blockquote class="mb16 fs18 fw700 lh28"> | ||
| <p>“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</p> | ||
| </blockquote> | ||
| <figcaption class="fs16 lh24 fw500"> | ||
| <em class="db c_info fsn">Sarah Dayan</em> | ||
| <strong class="db c_s">Staff Engineer, Algolia</strong> | ||
| </figcaption> | ||
| </figure> | ||
| <hr> | ||
| <div class="pt16 pb16 pr16 pl16"> | ||
| <div class="fs16 lh20 mb16 ellipsis">Life was like a box of chocolates. You never know what you're going to get.</div> | ||
| <div class="fs16 lh20 mb16 ellipsis-mul _2row">Life was like a box of chocolates. You never know what you're going to get. Life was like a box of chocolates. You never know what you're going to get.</div> | ||
| <div class="clearfix fs16 lh20"> | ||
| <div class="fl mr16">float-left</div> | ||
| <div class="cell">Life was like a box of chocolates. You never know what you're going to get. Life was like a box of chocolates. You never know what you're going to get.</div> | ||
| <figure class="bc_fff tac pt24 pb24 pl24 pr24"> | ||
| <img class="w128 h128 br100% db mla mra mb24" src="./avatar.jpg" alt="avatar" width="128" height="128"/> | ||
| <blockquote class="mb16 fs18 fw700 lh28"> | ||
| <p>“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any | ||
| design, and the build size is tiny.”</p> | ||
| </blockquote> | ||
| <figcaption class="fs16 lh24 fw500"> | ||
| <em class="db c_info fsn">Sarah Dayan</em> | ||
| <strong class="db c_s">Staff Engineer, Algolia</strong> | ||
| </figcaption> | ||
| </figure> | ||
| <hr> | ||
| <div class="pt16 pb16 pr16 pl16"> | ||
| <div class="fs16 lh20 mb16 ellipsis">Life was like a box of chocolates. You never know what you're going to get.</div> | ||
| <div class="fs16 lh20 mb16 ellipsis-mul _2row">Life was like a box of chocolates. You never know what you're going to | ||
| get. Life was like a box of chocolates. You never know what you're going to get. | ||
| </div> | ||
| <div class="clearfix fs16 lh20"> | ||
| <div class="fl mr16">float-left</div> | ||
| <div class="cell">Life was like a box of chocolates. You never know what you're going to get. Life was like a box of | ||
| chocolates. You never know what you're going to get. | ||
| </div> | ||
| </div> | ||
| <div style="height: 500px"></div> | ||
| </div> | ||
| <div style="height: 500px"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,56 @@ | ||
| @import '../mixin.less'; | ||
| @import '../less/SACSS.less'; | ||
| @import "../less/helpers"; | ||
|
|
||
| //$prefix:'sacss_'; | ||
| //#_SACSS($prefix); | ||
| @import '../less/WidthPrefix'; | ||
|
|
||
| @prefix: '_'; | ||
|
|
||
| #WidthPrefix(@prefix); | ||
| // margin | ||
| #SACSS(margin-top; mt; 8, 16; 1px); // .mt8, .mt16 | ||
| #SACSS(margin-right; mr; 8, 16; 1px); // .mr8, .mr16 | ||
| #SACSS(margin-bottom; mb; 8, 16; 1px); // .mb8, .mb16 | ||
| #SACSS(margin-left; ml; 8, 16; 1px); // .ml8, .ml16 | ||
|
|
||
| // padding | ||
| #SACSS(padding-top; pt; 8, 16; 1px); // .pt8, .pt16 | ||
| #SACSS(padding-right; pr; 8, 16; 1px); // .pr8, .pr16 | ||
| #SACSS(padding-bottom; pb; 8, 16; 1px); // .pb8, .pb16 | ||
| #SACSS(padding-left; pl; 8, 16; 1px); // .pl8, .pl16 | ||
|
|
||
| #Margins(8, 16, 24; 1px); // .mt8, .mr8, .mb8, .ml8, .mt16, .mr16, .mb16, .ml16; | ||
| #Paddings(8, 16, 24; 1px); // .pt8, .pr8, .pb8, .pl8, .pt16, .pr16, .pb16, .pl16; | ||
| #SACSS(font-size; fs; 12, 16; 1px); // .fs12, .fs16; | ||
| #SACSS(line-height; lh; 16, 20, 24; 1px); // .lh16, .lh20; | ||
| #SACSS(line-height; lh; 16, 24; 1px); // .lh16, .lh24; | ||
|
|
||
| // helpers | ||
| .clearfix { | ||
| #Clearfix; | ||
| } | ||
|
|
||
| .ellipsis { | ||
| #Ellipsis; | ||
| } | ||
|
|
||
| .clearfix{ #Clearfix; } | ||
| .ellipsis{ #Ellipsis; } | ||
| .cell{ #Cell; } | ||
| .ellipsis-mul{ #Ellipsis-multiple; } | ||
| .ellipsis-mul._2row{ -webkit-line-clamp: 2; } | ||
| .cell { | ||
| #Cell; | ||
| } | ||
|
|
||
| .ellipsis-mul { | ||
| #Ellipsis-multiple; | ||
| } | ||
|
|
||
| .c_m{ color: #000; } | ||
| .c_s{ color: #71717a; } | ||
| .c_info{ color:#0891b2; } | ||
| .ellipsis-mul._2row { | ||
| -webkit-line-clamp: 2; | ||
| } | ||
|
|
||
| // Color | ||
| .c_m { | ||
| color: #000; | ||
| } | ||
|
|
||
| .c_s { | ||
| color: #71717a; | ||
| } | ||
|
|
||
| // css reset for demo | ||
| figure, blockquote, p,body{ | ||
| margin: 0; | ||
| padding: 0; | ||
| .c_info { | ||
| color: #0891b2; | ||
| } |
Oops, something went wrong.