Takachizu
Takachizu is a community archive that identifies and reflects on that which is most valuable about Little Tokyo. Submit to our growing archive.
The site is a lovely example of a re-flowing page that fits chunks on content into the spaces that are available, often referred to as a masonry layout.
Takachizu is built in a way that we’re seeing more and more sites developed, the HTML sent from the server is very lean with not much content, and JavaScript takes over to deliver the full experience. You can see the HTML delivered from the server below
<!-- 2k17 folderstudio.com -->
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="assets/images/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Takachizu</title>
<meta name="description" content="Takachizu is a community archive that identifies and reflects on that which is most valuable about Little Tokyo." />
<meta name="title" content="Takachizu" />
<meta name="og:description" content="Takachizu is a community archive that identifies and reflects on that which is most valuable about Little Tokyo." />
<meta name="og:title" content="Takachizu" />
<meta name="og:image" content="http://takachizu.org/content/home/takachizu-fb4.jpg" />
<link rel="stylesheet" href="http://takachizu.org/assets/bundle.css?v=1513802459"> </head>
<body>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="http://takachizu.org/assets/bundle.js?v=1513802456"></script> </body>
</html>
The layout masonry layout implementation uses absolute positioning and real time calculations, similar to the magic numbers approach that we sometimes take when building sites (magic numbers work, but they’re not ideal).
<div sm="c6" md="c5" class="grid-item c12" style="position: absolute; left: 0%; top: 0px;"><div sm="p2" class="px2 br12 pb2">A project of Sustainable Little Tokyo initiated by +lab and Little Tokyo Service Center.</div></div>
<div sm="s2" md="s3" lg="s6" class="grid-item s1" style="position: absolute; left: 41.6448%; top: 0px;"><div class="p2 pb1 br12 block-blending bgc-tan" style=""><a href="/treasure/my-memories-of-little-tokyo"> <div class="pb2"><div style="padding-top: 70.2778%; background-image: url("http://takachizu.org/api/v1/posts/my-memories-of-little-tokyo?service=resize&image=047_image_3.jpg&size=small");" class="bgsc bgpc bgrn image b-lazy b-loaded"></div></div><div>47. “My Memories of Little Tokyo” Sheets</div><div class="pt1 oh fs1 lh1"></div></a></div></div>
For those of your with an eagle eye you might also notice that aside from on the fly positioning layouts the site uses atomic CSS
With atomic CSS instead of applying margins to your component, like .card, you create an atomic CSS declaration that applies very particular margins.
.m0 {
margin: 0
}
.m0-5 {
margin: .5rem
}
.m1 {
margin: 1rem
}
.m1-75 {
margin: 1.75rem
}
.m2 {
margin: 2rem
}This is done for margin (m), padding (p), z-index (z), position (ps), height (h), width (w), line-hight (lh)…. basically everything. I’m not a fan of this approach, but it works for some people and I always say what ever works for you is great.
Takachizu Technical Details
Site Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1">Media Queries
@media (min-width:768px) { }
@media (min-width:1024px) { }
@media (min-width:1280px) { }
@media (min-width:1300px) { }
@media (min-width:1600px) { }
Plugins used on Takachizu
