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

Enhancement #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Enhancement #1

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f56726
Add option to remove spacing at the end
triasrahman Nov 18, 2019
1a43455
Fix margin and padding
triasrahman Nov 18, 2019
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
19 changes: 11 additions & 8 deletions flexbin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,26 @@ $flexbin-phone-max: 400px !default;
$flexbin-row-height-phone: 100px !default;
$flexbin-space-phone: $flexbin-space !default;

$flexbin-add-end-space: false;
Copy link
Owner

Choose a reason for hiding this comment

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

Every parameter should be optional, with !default. This option should be true by default to be backward compatible.


// Minxin for customize multiple Flexbin layout
// For example, 300px height for desktop devices, 150px height for mobile devices
@mixin flexbin($row-height, $space) {
display: flex;
overflow: hidden;
flex-wrap: wrap;
margin: - $space / 2;
margin: 0 (-1 * $space / 2);
Copy link
Owner

@guoyunhe guoyunhe Nov 18, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

You can define a local variable $container-margin: -1 * $space / 2; to make it easier to read. Note, this margin is same for all sides.

padding: 2.5px 0;
Copy link
Owner

@guoyunhe guoyunhe Nov 18, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Please remove this padding. It is not designed like this.


// Let final row align left fit if images are not enough to fill
// If the gap is very small, fill the final row
&:after {
content: '';
flex-grow: 999999999; // avoid final row zoom too much to fit width
min-width: $row-height; // avoid small gap in final row (< $row-height)
height: 0;
@if $flexbin-add-end-space {
&:after {
content: '';
flex-grow: 999999999; // avoid final row zoom too much to fit width
min-width: $row-height; // avoid small gap in final row (< $row-height)
height: 0;
}
}

> * {
Expand Down Expand Up @@ -66,5 +71,3 @@ $flexbin-space-phone: $flexbin-space !default;
@include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
}
}