Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add scaffolding to compound styles #10

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

add scaffolding to compound styles #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b9f1680
add scaffoldin to compound styles
Jul 26, 2023
3111430
remove font size
Jul 26, 2023
04ce000
add var
Jul 26, 2023
a775078
add anchor mixin
Jul 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion scss/abstracts/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,15 @@ $gold--90: #472214;
$gold--70: #E05A00;
$gold--50: #FF871F;
$gold--30: #FFA947;
$gold--10: #FFE7B8;
$gold--10: #FFE7B8;

$device-sm: 40em;
$device-md: 60em;
$device-lg: 82em;

$column-gutter: 1.33rem;

@mixin anchor(){
text-decoration: none;
cursor: pointer;
}
122 changes: 122 additions & 0 deletions scss/layout/_scaffolding.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
@import '../abstracts/variables';

body,
html {
margin: 0;
padding: 0;
}

*,
*:after,
*:before {
box-sizing: border-box;
}

[class*='container'] {
margin: 0 auto;
padding-right: $column-gutter;
padding-left: $column-gutter;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We definitely should not take this class, it's been super annoying to use so let's not migrate this over.

.container-small {
max-width: $device-sm;
}
.container {
position: relative;
max-width: 66rem;
}
.container-large {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we currently have references to these container names already in webb3? I would be scared this might break something if we already use these class names.

position: relative;
max-width: $device-lg;
}

.row {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again would want to check this class name for usage in webb3 to make sure we don't screw up any existing alignments.

display: flex;
flex-flow: row wrap;
margin-right: -($column-gutter/2);
margin-left: -($column-gutter/2);
&.align-middle {
align-items: center;
}
&.align-bottom {
align-items: flex-end;
}
&.align-stretch {
align-items: stretch;
}
&.align-left {
justify-content: flex-start;
}
&.align-center {
justify-content: center;
}
&.align-right {
justify-content: flex-end;
}
&.align-between {
justify-content: space-between;
}
&.reverse {
flex-wrap: wrap-reverse;
}
}

[class*='col'] {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's do a small adjustment to match only on col-

flex-basis: 100%;
padding: 0 $column-gutter/2;
}

@mixin col-size($col) {
flex-basis: (100% * $col / 12);
max-width: (100% * $col / 12);
}

@each $col in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12) {
.col-xs-#{$col} {
@include col-size($col);
}
}

@media (min-width: $device-sm) {
html,
body {
font-size: 14px;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we probably don't want this font size to propagate lest we break webb3? Also font changes like this should probably stay in typography.

@each $col in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12) {
.col-sm-#{$col} {
@include col-size($col);
}
}
.col-sm-auto {
flex-basis: auto;
}
}

@media (min-width: $device-md) {
html,
body {
font-size: 15px;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dittO: we probably don't want this font size to propagate lest we break webb3? Also font changes like this should probably stay in typography.

@each $col in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12) {
.col-md-#{$col} {
@include col-size($col);
}
}
.col-md-auto {
flex-basis: auto;
}
}

@media (min-width: $device-lg) {
html,
body {
font-size: 16px;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditt: we probably don't want this font size to propagate lest we break webb3? Also font changes like this should probably stay in typography.

@each $col in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12) {
.col-lg-#{$col} {
@include col-size($col);
}
}
.col-lg-auto {
flex-basis: auto;
}
}