Skip to content

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

Closed
art-kan wants to merge 11 commits intopeterramsing:masterfrom
art-kan:patch-1
Closed

2-nd lost-waffle's argument's adding feature#423
art-kan wants to merge 11 commits intopeterramsing:masterfrom
art-kan:patch-1

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