Skip to content

Instantly share code, notes, and snippets.

@jasonfesta

jasonfesta/card-grid.css

Created May 7, 2019 18:37
Show Gist options
  • Save jasonfesta/c09e3c4bccd65b6136ecd02829e9ff16 to your computer and use it in GitHub Desktop.
Save jasonfesta/c09e3c4bccd65b6136ecd02829e9ff16 to your computer and use it in GitHub Desktop.
Download ZIP
Design Engine auto generated syntax v1
Raw
card-grid.css
.activity {
position: absolute;
top: 0px;
left: 0px;
width: 375px;
height: 812px;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 375px;
height: 812px;
background-color: #FFFFFF;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 375px;
height: 140px;
background-color: #FFFFFF;
}
.home {
position: absolute;
top: 97px;
left: 17px;
width: 121px;
height: 35px;
font-family: "SFProText Semibold", sans-serif;
font-weight: 600;
font-size: 35px;
color: #000000;
letter-spacing: -1.24px;
line-height: 41px;
text-align: left;
}
.settings {
position: absolute;
top: 59px;
left: 316px;
width: 43px;
height: 14px;
font-family: "SFProText Regular", sans-serif;
font-weight: 400;
font-size: 17px;
color: #007AFF;
letter-spacing: -0.41px;
line-height: 22px;
text-align: right;
}
.card {
position: absolute;
top: 188px;
left: 16px;
width: 342px;
height: 78px;
background-color: #007AFF;
}
.background {
position: absolute;
top: 188px;
left: 16px;
width: 342px;
height: 78px;
background-color: #007AFF;
}
.you-have-completed-a {
position: absolute;
top: 209px;
left: 36px;
width: 227px;
height: 18px;
font-family: "SFProText Bold", sans-serif;
font-weight: 700;
font-size: 18px;
color: #FFFFFF;
letter-spacing: -0.43px;
line-height: 24px;
text-align: left;
}
.today-1125-am {
position: absolute;
top: 235px;
left: 36px;
width: 92px;
height: 13px;
font-family: "SFProText Regular", sans-serif;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0.00px;
line-height: 14px;
text-align: left;
}
.chevron {
position: absolute;
top: 213px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.background {
position: absolute;
top: 213px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.chevron {
position: absolute;
top: 213px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.chevron-icon {
position: absolute;
top: 213px;
left: 311px;
width: 27px;
height: 28px;
background: url("436F2A9C-6302-4E15-985A-7E1EDAC08B1C@3x.png");
}
.bounds {
position: absolute;
top: 213px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.shape {
position: absolute;
top: 221px;
left: 322px;
width: 6px;
height: 12px;
background-color: #FFFFFF;
}
.card {
position: absolute;
top: 286px;
left: 16px;
width: 342px;
height: 78px;
background-color: #2AE735;
}
.background {
position: absolute;
top: 286px;
left: 16px;
width: 342px;
height: 78px;
background-color: #2AE735;
}
.you-have-ran-10-mile {
position: absolute;
top: 306px;
left: 36px;
width: 190px;
height: 16px;
font-family: "SFProText Bold", sans-serif;
font-weight: 700;
font-size: 18px;
color: #FFFFFF;
letter-spacing: -0.43px;
line-height: 24px;
text-align: left;
}
.today-1125-am {
position: absolute;
top: 333px;
left: 36px;
width: 92px;
height: 13px;
font-family: "SFProText Regular", sans-serif;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0.00px;
line-height: 14px;
text-align: left;
}
.chevron {
position: absolute;
top: 311px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.background {
position: absolute;
top: 311px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.chevron {
position: absolute;
top: 311px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.chevron-icon {
position: absolute;
top: 311px;
left: 311px;
width: 27px;
height: 28px;
background: url("875F18F2-5F99-42B0-AE7B-D9C04F9D3C6C@3x.png");
}
.bounds {
position: absolute;
top: 311px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.shape {
position: absolute;
top: 319px;
left: 322px;
width: 6px;
height: 12px;
background-color: #FFFFFF;
}
.card {
position: absolute;
top: 384px;
left: 16px;
width: 342px;
height: 78px;
background-color: #FF8B1E;
}
.background {
position: absolute;
top: 384px;
left: 16px;
width: 342px;
height: 78px;
background-color: #FF8B1E;
}
.you-completed-a-task {
position: absolute;
top: 405px;
left: 36px;
width: 190px;
height: 18px;
font-family: "SFProText Bold", sans-serif;
font-weight: 700;
font-size: 18px;
color: #FFFFFF;
letter-spacing: -0.43px;
line-height: 24px;
text-align: left;
}
.today-1125-am {
position: absolute;
top: 431px;
left: 36px;
width: 92px;
height: 13px;
font-family: "SFProText Regular", sans-serif;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0.00px;
line-height: 14px;
text-align: left;
}
.chevron {
position: absolute;
top: 409px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.background {
position: absolute;
top: 409px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.chevron {
position: absolute;
top: 409px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.chevron-icon {
position: absolute;
top: 409px;
left: 311px;
width: 27px;
height: 28px;
background: url("721EC000-0DFE-46E4-B906-C2A642505E34@3x.png");
}
.bounds {
position: absolute;
top: 409px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.shape {
position: absolute;
top: 417px;
left: 322px;
width: 6px;
height: 12px;
background-color: #FFFFFF;
}
.card {
position: absolute;
top: 482px;
left: 16px;
width: 342px;
height: 78px;
background-color: #D96CFF;
}
.background {
position: absolute;
top: 482px;
left: 16px;
width: 342px;
height: 78px;
background-color: #D96CFF;
}
.someone-near-you-is {
position: absolute;
top: 502px;
left: 36px;
width: 177px;
height: 40px;
font-family: "SFProText Bold", sans-serif;
font-weight: 700;
font-size: 18px;
color: #FFFFFF;
letter-spacing: -0.43px;
line-height: 24px;
text-align: left;
}
.chevron {
position: absolute;
top: 507px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.background {
position: absolute;
top: 507px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.chevron {
position: absolute;
top: 507px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.chevron-icon {
position: absolute;
top: 507px;
left: 311px;
width: 27px;
height: 28px;
background: url("382B403A-893B-493D-938C-53579D56095B@3x.png");
}
.bounds {
position: absolute;
top: 507px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.shape {
position: absolute;
top: 515px;
left: 322px;
width: 6px;
height: 12px;
background-color: #FFFFFF;
}
.card {
position: absolute;
top: 580px;
left: 16px;
width: 342px;
height: 78px;
background-color: #186E5B;
}
.background {
position: absolute;
top: 580px;
left: 16px;
width: 342px;
height: 78px;
background-color: #186E5B;
}
.complete-your-task {
position: absolute;
top: 601px;
left: 36px;
width: 173px;
height: 18px;
font-family: "SFProText Bold", sans-serif;
font-weight: 700;
font-size: 18px;
color: #FFFFFF;
letter-spacing: -0.43px;
line-height: 24px;
text-align: left;
}
.today-1125-am {
position: absolute;
top: 627px;
left: 36px;
width: 92px;
height: 13px;
font-family: "SFProText Regular", sans-serif;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0.00px;
line-height: 14px;
text-align: left;
}
.chevron {
position: absolute;
top: 605px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.background {
position: absolute;
top: 605px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.chevron {
position: absolute;
top: 605px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.chevron-icon {
position: absolute;
top: 605px;
left: 311px;
width: 27px;
height: 28px;
background: url("D5F2ACA8-C074-47BD-86EB-331AC016F458@3x.png");
}
.bounds {
position: absolute;
top: 605px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.shape {
position: absolute;
top: 613px;
left: 322px;
width: 6px;
height: 12px;
background-color: #FFFFFF;
}
.background {
position: absolute;
top: 140px;
left: 0px;
width: 375px;
height: 48px;
background-color: #FFFFFF;
}
.today {
position: absolute;
top: 153px;
left: 17px;
width: 72px;
height: 26px;
font-family: "SFProText Semibold", sans-serif;
font-weight: 600;
font-size: 26px;
color: #000000;
letter-spacing: -0.63px;
line-height: 22px;
text-align: left;
}
.all {
position: absolute;
top: 157px;
left: 337px;
width: 18px;
height: 14px;
font-family: "SFProText Regular", sans-serif;
font-weight: 400;
font-size: 17px;
color: #007AFF;
letter-spacing: -0.41px;
line-height: 22px;
text-align: right;
}
.card {
position: absolute;
top: 716px;
left: 16px;
width: 342px;
height: 78px;
background-color: #007AFF;
}
.background {
position: absolute;
top: 716px;
left: 16px;
width: 342px;
height: 78px;
background-color: #007AFF;
}
.you-have-completed-a {
position: absolute;
top: 737px;
left: 36px;
width: 227px;
height: 18px;
font-family: "SFProText Bold", sans-serif;
font-weight: 700;
font-size: 18px;
color: #FFFFFF;
letter-spacing: -0.43px;
line-height: 24px;
text-align: left;
}
.today-1125-am {
position: absolute;
top: 763px;
left: 36px;
width: 92px;
height: 13px;
font-family: "SFProText Regular", sans-serif;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0.00px;
line-height: 14px;
text-align: left;
}
.chevron {
position: absolute;
top: 741px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.background {
position: absolute;
top: 741px;
left: 311px;
width: 27px;
height: 28px;
background-color: #000000;
}
.chevron {
position: absolute;
top: 741px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.chevron-icon {
position: absolute;
top: 741px;
left: 311px;
width: 27px;
height: 28px;
background: url("397B22F3-F55B-41C3-81CD-CE7CAAC5AAC1@3x.png");
}
.bounds {
position: absolute;
top: 741px;
left: 311px;
width: 27px;
height: 28px;
background-color: #FFFFFF;
}
.shape {
position: absolute;
top: 749px;
left: 322px;
width: 6px;
height: 12px;
background-color: #FFFFFF;
}
.background {
position: absolute;
top: 668px;
left: 0px;
width: 375px;
height: 48px;
background-color: #FFFFFF;
}
.yesterday {
position: absolute;
top: 681px;
left: 16px;
width: 121px;
height: 26px;
font-family: "SFProText Semibold", sans-serif;
font-weight: 600;
font-size: 26px;
color: #000000;
letter-spacing: -0.63px;
line-height: 22px;
text-align: left;
}
.all {
position: absolute;
top: 685px;
left: 337px;
width: 18px;
height: 14px;
font-family: "SFProText Regular", sans-serif;
font-weight: 400;
font-size: 17px;
color: #007AFF;
letter-spacing: -0.41px;
line-height: 22px;
text-align: right;
}
.tab-bar {
position: absolute;
top: 729px;
left: 0px;
width: 375px;
height: 83px;
background-color: #F8F8F8;
}
.background {
position: absolute;
top: 729px;
left: 0px;
width: 375px;
height: 83px;
background-color: #F8F8F8;
}
.settings-tab {
position: absolute;
top: 729px;
left: 304px;
width: 71px;
height: 48px;
background-color: #D8D8D8;
}
.settings {
position: absolute;
top: 765px;
left: 321px;
width: 37px;
height: 11px;
font-family: "SFProText Medium", sans-serif;
font-weight: 500;
font-size: 10px;
color: #8E8E93;
letter-spacing: -0.24px;
line-height: 13px;
text-align: center;
}
.settings-icon {
position: absolute;
top: 736px;
left: 325px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.settings-icon {
position: absolute;
top: 736px;
left: 325px;
width: 30px;
height: 26px;
background: url("BF178AA7-287D-4A03-BF47-1DD28E4CC895@3x.png");
}
.rectangle {
position: absolute;
top: 736px;
left: 325px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.shape {
position: absolute;
top: 739px;
left: 330px;
width: 21px;
height: 20px;
background-color: #8E8E93;
}
.profile-tab {
position: absolute;
top: 729px;
left: 228px;
width: 71px;
height: 48px;
background-color: #D8D8D8;
}
.profile {
position: absolute;
top: 765px;
left: 250px;
width: 28px;
height: 9px;
font-family: "SFProText Medium", sans-serif;
font-weight: 500;
font-size: 10px;
color: #8E8E93;
letter-spacing: -0.24px;
line-height: 13px;
text-align: center;
}
.profile-icon {
position: absolute;
top: 736px;
left: 249px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.profile-icon {
position: absolute;
top: 736px;
left: 249px;
width: 30px;
height: 26px;
background: url("14FB986B-A330-4977-A4EE-3F8E4B4A04C4@3x.png");
}
.rectangle {
position: absolute;
top: 736px;
left: 249px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.shape {
position: absolute;
top: 738px;
left: 253px;
width: 22px;
height: 22px;
background-color: #8E8E93;
}
.post-action {
position: absolute;
top: 729px;
left: 152px;
width: 71px;
height: 48px;
background-color: #007AFF;
}
.rectangle {
position: absolute;
top: 737px;
left: 164px;
width: 48px;
height: 40px;
background-color: #007AFF;
}
.compose-icon {
position: absolute;
top: 744px;
left: 173px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.compose-icon {
position: absolute;
top: 744px;
left: 173px;
width: 30px;
height: 26px;
background: url("E0173246-C9EA-4025-88A0-770D94D04C00@3x.png");
}
.rectangle {
position: absolute;
top: 744px;
left: 173px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.shape {
position: absolute;
top: 745px;
left: 178px;
width: 21px;
height: 22px;
background-color: #FFFFFF;
}
.activity-tab {
position: absolute;
top: 729px;
left: 76px;
width: 71px;
height: 48px;
background-color: #D8D8D8;
}
.activity {
position: absolute;
top: 765px;
left: 95px;
width: 34px;
height: 11px;
font-family: "SFProText Medium", sans-serif;
font-weight: 500;
font-size: 10px;
color: #007AFF;
letter-spacing: -0.24px;
line-height: 13px;
text-align: center;
}
.tab-bg {
position: absolute;
top: 733px;
left: 88px;
width: 48px;
height: 32px;
background-color: #D8D8D8;
}
.activity-icon {
position: absolute;
top: 736px;
left: 97px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.activity-icon {
position: absolute;
top: 736px;
left: 97px;
width: 30px;
height: 26px;
background: url("DE8849E2-436C-4C60-8ADF-162F5D5BB1BE@3x.png");
}
.rectangle {
position: absolute;
top: 736px;
left: 97px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.bell {
position: absolute;
top: 739px;
left: 104px;
width: 15px;
height: 20px;
background-color: #007AFF;
}
.shape {
position: absolute;
top: 739px;
left: 104px;
width: 15px;
height: 16px;
background-color: #007AFF;
}
.shape {
position: absolute;
top: 756px;
left: 109px;
width: 4px;
height: 2px;
background-color: #007AFF;
}
.home-tab {
position: absolute;
top: 729px;
left: 0px;
width: 71px;
height: 48px;
background-color: #D8D8D8;
}
.home {
position: absolute;
top: 765px;
left: 23px;
width: 26px;
height: 9px;
font-family: "SFProText Medium", sans-serif;
font-weight: 500;
font-size: 10px;
color: #9B9B9B;
letter-spacing: -0.24px;
line-height: 13px;
text-align: center;
}
.tab-bg {
position: absolute;
top: 733px;
left: 12px;
width: 48px;
height: 32px;
background-color: #D8D8D8;
}
.home-icon {
position: absolute;
top: 736px;
left: 21px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.rectangle {
position: absolute;
top: 736px;
left: 21px;
width: 30px;
height: 26px;
background-color: #D8D8D8;
}
.home-icon {
position: absolute;
top: 736px;
left: 21px;
width: 30px;
height: 26px;
background: url("2982E4B6-D934-4DE6-BBFE-82929F3B35A2@3x.png");
}
.shape {
position: absolute;
top: 740px;
left: 27px;
width: 18px;
height: 17px;
background-color: #9B9B9B;
}
.status-bar {
position: absolute;
top: 0px;
left: 0px;
width: 375px;
height: 44px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment