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.

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

2-nd lost-waffle's argument's adding feature #423

Closed
wants to merge 11 commits into from
Closed

2-nd lost-waffle's argument's adding feature #423

wants to merge 11 commits into from

Conversation

art-kan
Copy link

@art-kan art-kan commented Oct 14, 2018

What kind of change is this? (Bug Fix, Feature...)
Feature.

What is the current behavior (You can also link to an issue)
Yes.

What is the new behavior this introduces (if any)
lost-waffle: 1/3 3/1;
Where 3/1 is cycle/start

Does this introduce any breaking changes?
Likely no.

Does the PR fulfill these requirements?

  • [Y] Tests for the changes have been added
  • Docs have been added or updated

Other Comments

<!-- HTML -->
<section>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
</section>

/* CSS (before) */
div {
	lost-waffle: 1/3 3/2;
}

div:first-child {
	lost-offset: 1/3;
}

/* CSS (after) */
div {
	width: calc(100% * 1/3 - (10px - 10px * 1/3));
	max-width: calc(100% * 1/3 - (10px - 10px * 1/3));
	height: calc(100% * 1/3 - (10px - 10px * 1/3));
}

div:nth-child(1n) {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	clear: none;
}

div:last-child {
	margin-right: 0;
	margin-bottom: 0;
}

div:nth-child(3n + 2) {
	margin-right: 0;
}

div:nth-child(3n) {
	clear: both;
}

div:nth-last-child(-n + 3) {
	margin-bottom: 0;
}

div:first-child {
	margin-left: calc(100% * (-1/3 * -1) - (10px - 10px * (-1/3 * -1)) + 10px) !important;
}

```
<!-- HTML -->
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>
```

```
/* CSS */
.child {
	lost-column: 1/3 3n+1;
}

.child:first-child {
	lost-offset: 1/3;
}
```

Bad implementation but it's work.
@art-kan art-kan changed the title 2-nd argument's adding feature 2-nd lost-waffle's argument's adding feature Oct 14, 2018
@codecov
Copy link

codecov bot commented Oct 14, 2018

Codecov Report

Merging #423 into master will not change coverage.
The diff coverage is 100%.

Impacted file tree graph

@@          Coverage Diff          @@
##           master   #423   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          19     19           
  Lines         701    712   +11     
=====================================
+ Hits          701    712   +11
Impacted Files Coverage Δ
lib/lost-waffle.js 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9be2233...046094c. Read the comment docs.

@peterramsing
Copy link
Owner

I'm sorry this has taken me so long to get back to. Thanks so much for taking the time to write this. Let me wrap my head around this and play with what you've got here. This could be something pretty swell.

If you don't mind I'm going to create an issue for this so we can line the code up with an issue. Let's talk about the feature there and the code here, eh?

Thanks again!

@peterramsing
Copy link
Owner

Closing for now but poke if you want to circle back on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants