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

feat: adds no wrap demo, refactors Y margins #22

Merged
merged 7 commits into from
Mar 27, 2021
Merged

feat: adds no wrap demo, refactors Y margins #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
61bc000
feat: adds wrapper var, `.clean`, some flexibility
MickL Jan 24, 2021
5747b6d
revert: removes uneven cols
zalog Mar 13, 2021
0cdada7
feat: renames `$ph-border` var
zalog Mar 15, 2021
62a1e3f
fix: removes not needed margin reset
zalog Mar 15, 2021
adcff3d
feat: adds empty, no wrap placeholder
zalog Mar 16, 2021
1f62f67
feat(demo): adds some headings styling
zalog Mar 16, 2021
21f0f1a
refactor: moves margins for markup flexibility
zalog Mar 16, 2021
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
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ You can change the order, add avatar or image, change text bar sizes, etc.
```scss
$ph-bg: #fff !default;
$ph-color: #ced4da !default;
$ph-border: 1px solid darken($ph-bg, 10%) !default;
$ph-border-radius: 2px !default;

$ph-gutter: 30px !default;
Expand Down Expand Up @@ -95,7 +96,7 @@ A simple html markup would be something like this:

## Contributing

Please read angular's [CONTRIBUTING.md](https://github.com/angular/angular/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
Please read Angular's [CONTRIBUTING.md](https://github.com/angular/angular/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

## Versioning

Expand Down
21 changes: 19 additions & 2 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
header,
footer { padding: 20px 0; }
.container-fluid { max-width: 600px; }
.container-fluid .h4:not(:first-child) { margin-top: 30px; }
</style>
</head>
<body>
Expand Down Expand Up @@ -46,7 +47,7 @@ <h2 class="h4">Generic placeholder</h2>

</div>

<h2 class="h4">Placeholder in a external twitter bootstrap grid</h2>
<h2 class="h4">Placeholder in a external Bootstrap grid</h2>

<div class="row">
<div class="col-12 col-sm-6">
Expand Down Expand Up @@ -103,6 +104,22 @@ <h2 class="h4">Placeholder in a external twitter bootstrap grid</h2>
</div>
</div>

<h2 class="h4">Placeholder without wrapper or animation</h2>

<div class="ph-col">
<div class="ph-picture"></div>
<div class="ph-row">
<div class="ph-col-6 big"></div>
<div class="ph-col-4 empty big"></div>
<div class="ph-col-2 big"></div>
<div class="ph-col-4"></div>
<div class="ph-col-8 empty"></div>
<div class="ph-col-6"></div>
<div class="ph-col-6 empty"></div>
<div class="ph-col-12"></div>
</div>
</div>

<h2 class="h4">Other placeholder examples</h2>

<div class="ph-item">
Expand Down Expand Up @@ -235,4 +252,4 @@ <h2 class="h4">Other placeholder examples</h2>
<script async defer src="https://buttons.github.io/buttons.js"></script>

</body>
</html>
</html>
21 changes: 15 additions & 6 deletions src/scss/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@
overflow: hidden;
margin-bottom: $ph-gutter;
background-color: $ph-bg;
border: 1px solid darken($ph-bg, 10%);
border: $ph-border;
border-radius: $ph-border-radius;

&::before {
content: " ";
pointer-events: none;
position: absolute;
top: 0;
right: 0;
Expand All @@ -35,23 +36,23 @@
flex-flow: column;
padding-right: ($ph-gutter / 2);
padding-left: ($ph-gutter / 2);
margin-bottom: $ph-spacer;
}
}

.ph-row {
display: flex;
flex-wrap: wrap;
margin-bottom: ($ph-spacer / 2);
margin-top: -($ph-spacer / 2);

div {
height: 10px;
margin-bottom: ($ph-spacer / 2);
margin-top: ($ph-spacer / 2);
background-color: $ph-color;
}
.big,
&.big div {
height: 20px;
margin-bottom: $ph-spacer;
}
.empty {
background-color: rgba($ph-bg, 0);
Expand All @@ -77,12 +78,21 @@
flex: 0 0 percentage(12 / 12);
}

[class*="ph-col"] > * {
+ .ph-row {
margin-top: 0;
}

+ * {
margin-top: ($ph-spacer / 2);
}
}

.ph-avatar {
position: relative;
width: 100%;
min-width: 60px;
background-color: $ph-color;
margin-bottom: $ph-spacer;
border-radius: $ph-avatar-border-radius;
overflow: hidden;

Expand All @@ -97,7 +107,6 @@
width: 100%;
height: 120px;
background-color: $ph-color;
margin-bottom: $ph-spacer;
}

@keyframes phAnimation {
Expand Down
3 changes: 2 additions & 1 deletion src/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
$ph-bg: #fff !default;
$ph-color: #ced4da !default;
$ph-border: 1px solid darken($ph-bg, 10%) !default;
$ph-border-radius: 2px !default;

$ph-gutter: 30px !default;
$ph-spacer: 15px !default;

$ph-avatar-border-radius: 50% !default;

$ph-animation-duration: .8s !default;
$ph-animation-duration: .8s !default;