Scalable way to stack in CSS

Question

I hope everyone will have heard about Sticky Notes. I wanna stack stuff like that. So this is the approach I have till now. I am not sure how to make it scalable for any number of stickies, without using JavaScript.

* {
  font-family: 'Segoe UI';
}
.stickynote {
  position: absolute;
  background: #fc0;
  border: 1px solid #f90;
  border-radius: 5px;
  padding: 10px;
  width: 75px;
  top: 10px;
  left: 10px;
}
.stickynote + .stickynote {
  top: 20px;
  left: 20px;
}

.stickynote + .stickynote + .stickynote {
  top: 30px;
  left: 30px;
}

<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>

Problem:

1. I cannot keep on adding .stickynote + .stickynote + .stickynote for all.
2. Is the approach (HTML Structure) correct?
3. It is not a good idea to nest them, as they will not be semantically correct. If that was possible, I would have used nested <ul> and <li>, but I want all those stickies be siblings.
4. Every sticky note has variable heights and may be fixed width. Please don't hardcode the height.

Note: I am ready to provide as much as information. I don't see why this question gets close votes!

Answer 1

EDIT: I did it :). Using transform rotate from the top left on the notes, then reversing the rotation from top left of the parent div. XD

You can change the degrees as long as the parent is negative the same degrees for different offset degrees...

I have eaten my own words saying you can't do it without programming...

---

I don't know how to overline the rest of the answer, this is the old answer.

---

The best I could come up with.

Uses pseudo before and after.

Before creates a "bar" the width of the left offset and set height. So if after has more than 200px of height, it falls back to home left.

After is the part that shows the sticky note.

If anyone can figure out how to move this into the element itself, without being in pseudo using the title attribute, then we win! Otherwise that's the closest you can get without creating extra elements. It's about as semantic as sticky notes get too. Very intriguing question!

HTML

<div class="stack">
  <div class="note" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></div>
  <div class="note" title="Sed ac tellus at quam convallis feugiat. Ut vehicula leo non tellus convallis, id faucibus quam varius. Sed feugiat nulla in elit dignissim condimentum."></div>
  <div class="note" title=""></div>
  <div class="note" title="Cras quis volutpat sapien. Mauris volutpat ultrices lacus eu accumsan. Cras tempor sapien maximus quam finibus, ullamcorper imperdiet mauris aliquam."></div>
</div>

CSS

.note:before {
  content: '';
  width: 20px;
  height: 200px;
  float: left;
}
.note:after {
  content: attr(title);
  width: 200px;
  min-height: 200px;
  padding: 10px;
  background: khaki;
  box-shadow: 1px 2px 7px rgba(0,0,0,.3);
  border: khaki 1px outset;
  display: inline-block;
  margin: 10px 0 -190px 0;
}

Answer 2

You can make your elements float and give them a negative margin for the desired effect. The <div class="nofloat">Floating box</div> is to make every annotation skip a line. The visibility is set to hidden so that the element still affects the layout.

<div class="floating-box1">Floating box1</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box2</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box3</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box4</div>

CSS:

.floating-box1 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
}
.floating-box {
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    margin-left:-160px; 
}
.nofloat{
    visibility:hidden;
}

jsfiddle for example : http://jsfiddle.net/1nu02a37/

Answer 3

This is a really interesting question. I think I'm going to look at it semantically rather than practically at the code.

I understand why you don't want to nest them, and at first thought it seems semantically wrong to do so. But I think that's where you're making a mistake.

Think about a physical stack of sticky notes. Are they beside each other, or have they been combined into another distinct "thing"?

Semantically, they are a stack. You could look at it and say this is a clear physical representation of a list, with the ul being the stack and the li being the notes. This makes perfect semantic sense.

You could also say that the physical placement of each note depends on the physical placement of the one before it. You are physically nesting related notes on each other (they just stick out on the right and bottom) but the organization of each consecutive note depends on the one before it. Some might say this is a design thing and not semantic, but why are you stacking the notes if they're not semantically related to begin with? This means that nesting them can also make perfect sense semantically.

To have them side by side in your code but represented as not side by side to the user actually seems semantically meaningless to me. Unless you have a parent container to represent the stack. Which means you're essentially just using other elements to represent ul/li.

Answer 4

A touch of JavaScript can do the trick.

var arrStickyNotes = document.querySelectorAll('.stickynote');
var pos = 0;
for (i = 0; i < arrStickyNotes.length; i++) {
    arrStickyNotes[i].style.top = pos + 'px';
    arrStickyNotes[i].style.left = pos + 'px';
    pos += 10;
}

.stickynote {
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
    width: 75px;
    position:absolute;
}
.container {
    position:relative;
}

<div class="container">
    <div class="stickynote">Sticky!!!</div>
    <div class="stickynote">Sticky!!!</div>
    <div class="stickynote">Sticky!!!</div>
</div>

Answer 5

If you're not going to nest them, I don't believe there is a very viable way to do this in a truly scalable fashion. Negative margins will work vertically, but you'll always need an incremental value if you want the notes to extend towards the right.

You can do this with a preprocessor, if you enjoy 4000 lines of source code just for your 1k stack. Trivial, really, but that's still a hard limit.

Sass - DEMO

I would post the output in a snippet, but SO yelled at me.

Body is limited to 30000 characters; you entered 79511.

@mixin notes($m, $n: 10) {
  @for $i from 1 through $n {
    &:nth-child(#{$i}) {
      @each $k, $v in $m {
        #{$k}: $v * $i;
      }
    }
  }
}

* {
  font-family: 'Segoe UI';
}
.stickynote {
  position: absolute;
  background: #fc0;
  border: 1px solid #f90;
  border-radius: 5px;
  padding: 10px;
  width: 75px;
  top: 10px;
  left: 10px;

  @include notes((top: 10px, left: 10px), 1000);
}

CSS is a pretty non-scalable language when it comes to certain repetitive tasks.

I also agree with Syntax Error about the semantics of this.

Realistically, I'm not sure why you would need a scalable CSS solution for markup that obviously has to be generated. There's no way you're manually writing in hundreds of .stickynote elements. Whatever is generating the markup could generate the styles as well.