Morning:
Afternoon:
Foundation is a CSS (and JS) framework that makes it easy to create stylish, responsive web pages. The foundation (get it?) of it is the grid system. The grid splits the page into 12 equally-sized columns, making it easy to set the alignment of elements on the page by specifying how many columns they span.
In addition, you can add sizes of ‘small’, ‘medium’, ‘large’, etc, to specify different behavior at different screen sizes. In the following example, the two child divs will be full screen width at small screen sizes (stacked on top of each other), and half of the screen width at medium and larger screen sizes (appearing next to each other).
<div class="row">
<div class="small-12 medium-6 columns">
</div>
<div class="small-12 medium-6 columns">
</div>
</div>
HTML5 gave us a way to save extra information on a standard HTML Element via the data-* attributes. Basically, you can add any arbitrary information you want, prefixing the name of the attribute with data-. This data is then accessible through JavaScript via the someElement.dataset object, or through CSS via attr(data-*).
<div
id="my-div"
data-name="Awesome div"
data-id="div-1234"
data-color="blue"
data-marshmallows="yummy">
</div>
const myDiv = document.querySelector('#my-div')
myDiv.dataset.name // "Awesome div"
myDiv.dataset.data-id // "div-1234"
myDiv.dataset.color // "blue"
myDiv.dataset.marshmallows // "yummy"
#my-div {
background-color: attr(data-color);
}
div[data-id='div-1234'] {
height: 400px;
width: 400px;
}
.cloneNodeSometimes it may be easier to clone an existing node rather than build an entirely new one, especially if the markup is complex. In our ‘Tatum Tots’ project, we kept a hidden li in the DOM that we cloned every time we needed to render a new list item.
<li class="flick grid-x align-middle template">
<span class="flick-name cell auto">sdfkjhgds</span>
<span class="actions button-group cell shrink">
<button class="fav button warning">fav</button>
<button class="remove button alert">del</button>
</span>
</li>
/* hides any 'li' with a 'template' class */
li.template {
display: none;
}
const list = document.querySelector('ul')
const templateItem = document.querySelector('li.template')
// Make a copy of the templateItem
// Pass 'true' as an argument to clone all children as well
const newItem = templateItem.cloneNode(true)
// remove 'template' class so it is no longer hidden
newItem.classList.remove('template')
list.appendChild(newItem)
const ary = [1, 2, 3, 4, 5]
ary.unshift(0)
console.log(ary) // [0, 1, 2, 3, 4, 5]
ary.shift() // 0
console.log(ary) // [1, 2, 3, 4, 5]
ary.reverse()
console.log(ary) // [5, 4, 3, 2, 1]
Tatum Tots * Morning * Afternoon
{
id: 1,
name: 'GI Joe',
fav: true,
}
(Would it be nice if we could make that span’s content editable?)