#f4f5f7;

[shonarollo-blog]

S

panning Kensington Market is not just a market, but a vibrant, living community, home to numerous waves of immigrants over the years.When visiting, I was struck by how many different people from all walks of life gather here to work, eat, live and play. With so many cultures and generations all layered on top of each other, the whole place has a DIY feel you don’t really find anywhere else.

As a destination for art, global street food and community events, there is so much life tucked into every corner of this bustling neighbourhood. It’s nearly impossible to take it all in at once… so, where to start?

Make the Most of Kensington Market

Golden Patty

Eat your way through a world of food

Although Kensington Market has some finer dining establishments such as Grey Gardens, more casual spots that only specialize in one or two items are really where it’s at. True to the market’s immigrant roots, you’ll find mom and pop restaurants serving quick street food and authentically cooked meals that bring a taste of their home countries to you.

Seven Lives is a neighbourhood favourite for getting Baja-style tacos, and they’re in demand. This cash only counter has mouthwatering tacos loaded with all the right toppings, and lots of hot sauce options to pick from. Another popular street food, empanadas, are perfect for a quick and affordable snack. At Jumbo Empanada, you can get a taste of Chile for as little as $1.75 for one of their mini pastries.

Fish and Chips from Fresco’s

As a Montrealer I also have to mention NU Bügel. They serve classic Montreal bagels wood fired to perfection and topped with the works, if you wish. Fresco’s Fish and Chips has meanwhile mastered and upgraded a British classic with an optional extra crispy batter made from Miss Vickie’s “crisps.” Then, Golden Patty will deliver on all your flaky, spicy, delicious, beefy needs.

Kensington Market also has a lot of options for vegetarian and vegan eats. Options like Urban Herbivore,  Hibiscus and King’s Cafe are sure to make your little plant-based hearts sing.

Kensington Market & Chinatown Toronto Food Tour exploring the back alleys

Take the Kensington Market and Chinatown Toronto Food Tour

If you’re new in the area or want to get to know it from a different perspective, taking a tour can be the perfect way to connect with the place. You’ll get to know the stories and the history that helped make Kensington Market the way it is today, and get a taste of what a community like this really means. Plus, it’s clear there’s a lot to taste in this high density foodie destination.

Food samples on the Kensington Market & Chinatown Toronto Food Tour

On the Kensington Market & Chinatown Toronto Food Tour, you’ll have the chance to visit 7+ different food stops to taste delicacies that are inspired by global cuisines, and yet take root at a small local business, each with its own story. No single restaurant could bring you a seven course meal this diverse! You’ll definitely get plenty to eat, but you’ll also be enriched by the guide’s insider knowledge as they take you to explore off the main streets and into the real heart of Kensington Market. Have a look at Local Toronto Food Tours.

Outside FIKA

Take it easy at a local cafe

You might need some extra energy to soak in as much as you can of Kensington Market, so why not treat yourself to a delicious cup of coffee, and maybe a scone?

My favourite place to refresh as I explore the market is Moonbean. The locally owned coffee shop and roastery brings the streets’ energy inside with a sprawling chalkboard menu, loose leaf teas lining the walls, and a cozy art-filled room in the back. They also have two patios, front and back, plentiful baked goods, and just about every drink you can think of, even smoothies. Plus, if you need to make another kind of rest stop, you’ll find kind messages from strangers scrawled all over the bathroom walls.

Another great coffee shop is FIKA, a bright and stylish Sweden-inspired spot that’s a favourite for studying, reading a book, or simply taking it easy. They serve specialty drinks such as a spiced cardamom latte, lavender white hot chocolate, and a mean iced coffee, too – perfect for enjoying on their airy patio in the summer.

Other local favourites include famed Toronto chain Jimmy’s Coffee as well as i deal coffee, Cafe Pamenar and Livelihood Cafe.

Exploring the alleyways of Kensington Pl.

See where creativity spills onto the streets

Music, street performances, murals and more fill the streets of Kensington Market with endless inspiration and photo opportunities. With so many artists around, you’ll be pressed to find wall space that doesn’t boast even a speck of paint. They’ve truly made Kensington their own.

Some of my favourite murals are a photo collage on Kensington Ave off St Andrew and a huge Alphonse Mucha inspired mural at Augusta and Oxford. Parked in front the latter, you’ll also find Yvonne Bambrick’s infamous Garden Car, a teeny tiny city park/community art project which has been sprouting in the same spot each summer since ’07. Make sure you keep your eyes up as you explore hidden corners and back alleys, you never know what else you’ll find!

Street performers

While street performers and pop-up concerts may be a little harder to track, if the sun is out you’re sure to stumble upon some talented buskers at Bellevue Square Park. To increase your odds, come by for Pedestrian Sundays. The whole market is blocked off from traffic on the last Sunday of every summer month, opening it up for people and their experimentations. Support artists directly, too, by checking out the Kensington Market Art Fair.

The Winter Solstice Festival also takes over the market annually on December 21st, lighting up the longest night of the year with creativity and passion.

Lanterns on display at Dancing Days

Shop around for locally made goods

Naturally, the storefronts in Kensington Market sell products by people just as diverse as its residents. Creativity is concentrated at a few charming stores offering handmade and locally produced goods that range from artwork to accessories to home decor, and more.

First off, Kid Icarus is a sweet, stylish screen printing studio and gift shop all in one. They focus on paper products like greeting cards and stationary, but you’ll find pins, soap and other creative crafts, too. Everything in store is made by Canadian artists and artisans, and it’s irresistibly cute.

Painted house

Outside of Dancing Days

Another good place to pick up Canadian-made gifts is The Blue Banana Market. The giant store is practically a warehouse for locally made goods and novelty items from around the globe. Then, for comic book lovers, manga fans, and graphic novel enthusiasts, there’s The Beguiling. You’ll find the famed comic book store just a couple steps from the market on College Ave. Even if you weren’t looking for any of those, there’s something about it that just draws you in.

Finally, if you’re looking for some unique jewellery, you’re in luck. One Love is one man’s tiny storefront selling handcrafted goods and jewellery, with a smile. You can also find other similarly handmade pieces displayed on tabletops around the market. Follow your instinct as you stroll the streets and see what speaks to you!

One of Kensington Market’s many fruit stands

Pick up some specialty ingredients

Grocery shopping might be an underrated form of entertainment, but one of the big draw-ins of Kensington Market is its high density of specialty grocers. There’s nothing better than treating yourself to some of the freshest ingredients you can get. Whether you’re cooking up a special meal or just having a snack, you’ll see the difference that freshness makes.

Even if you don’t have a kitchen at your disposal, these spots can help you feel right at home. There’s nothing better than fresh bread from Toronto’s favourite Blackbird Baking Co. topped with your favourite creamy delight from the Global Cheese Shoppe just around the corner.

Global Cheese

For carnivores, Sanagan’s Meat Locker is your local go-to. They emphasize building relationships with farmers, meaning you can trace everything in store back to its source. All that’s left to do is let the helpful staff guide you to picking the perfect cut. Next, you’ll find fruit and vegetable stands all around the market to add a little colour to your meal, while House of Spice will help bring the flavour. You’re sure to discover something new while you’re in there, too.

If you’re looking for place to shop that’s a little better rounded, 4 Life Natural Foods has it all when it comes to organic goods. With spacious aisles, wooden shelves and so many ethically sourced food options, the whole experience of being there is simply a pleasure.

Kensington Mall

Discover the wonder of thrift shops

Kensington Market is truly a haven for lovers of vintage. With shops selling unique finds around every corner, its no wonder the area’s residents all look so cool. Plus, buying secondhand clothes is a simple way to take it easy on Mother Earth.

Perhaps the most well-known vintage shop in the area is Courage My Love, a cozy and colourful store perfect for finding cashmere pieces, theatrical accessories, beads, buttons and other DIY necessities, as well as the perfect pair of cowboy boots. Another favourite is Sub Rosa Vintage just next door, which boasts a hand picked selection of clothes more in line with today’s fashion trends. Meanwhile, Vintage Depot has top tier threads in just about any shape or colour, including some designer finds, Exile delivers on the costume department and Bungalow mixes the old with the new making it a one-stop shop for any lover of retro style.

If you’re in the mood for a little shopping spree, you’ll find the highest concentration of other vintage shops on Kensington Ave around Courage My Love and Sub Rosa.

CN Tower seen from Chinatown

Explore neighbouring Chinatown

A mere block away from the heart of Kensington Market is another bustling urban community. Chinatown is full of family-owned business of all sorts, but the main attraction is definitely the food. While the number of restaurants serving different variations on the same cuisine was a little overwhelming at first, after a little exploring I’ve narrowed down my favourite spots, depending on what you’re looking for.

Chefs working at Mother’s Dumplings

Dumplings? Try Mother’s Dumplings, and watch the little bundles of flavour be made right in front of your eyes. Noodles? Despite the name, Chinese Traditional Buns serves some awesome Dan Dan Noodles, without the frills. Soup? Phở Hưng has all you could want, and more. Sandwich? Banh Mi Nguyen Huong serves Banh Mi that’s quick, cheap and most of all delicious. Buns? Now, those are top-tier at Mashion Bakery.

The post What to Do and See in Toronto’s Kensington Market appeared first on To Europe And Beyond.

[deverodesign]

Reading Time: 14 minutes

Have you heard about CSS grid? This is currently a very popular topics on web design scene, probably one of the most popular. It is also one of the most searched CSS features on CanIUse website. It is not a surprise. It is safe to say that CSS grid has the potential to cause a revolution in web design. In this tutorial, you will learn how to use this promising CSS feature to build your own simple layout. The future of web design arrived today. Let’s take a look at it!

Table of Contents:

Briefing

HTML

CSS (Sass)

Sass workflow and resets

Enter the grid

Defining template areas

Creating second grid

Putting it all together

Closing thoughts on CSS grid

Demo on Codepen.

Briefing

Before we get any further, let’s talk about the environment for this tutorial. Or, what will you need to get the code running? This tutorial will not use any external framework or resources. Well, except one. This will be font awesome. I used this font in order to show the icons for browser support and the heart icon in the footer. There is no other use of this font. So, you don’t have to use this font unless you want to use these (or other) icons.

Also I didn’t use any CSS stylesheet for resetting / normalizing CSS styles. This means that the only styles used are the styles you can see. The next thing are vendor prefixes. As you will notice, the CSS code contain no vendor prefixes. The reason is simple. Codepen allows to choose one of two plugins that take care about this. Then, code is prefixed automatically on the background. These plugins are autoprefixer and prefixfree.

You can see this option if you click on “Settings” button, in the Codepen header, and navigate to CSS tab. You may need to switch to “Editor view” via “Change view” button. Okay, what if you want to see the CSS code with all prefixes? Then, in “Editor view”, click on the button with down arrow (or angle) and click on “View Compiled CSS”. This will show you the Sass code compiled into CSS with all prefixes.

Lastly, let’s quickly address current support for CSS grid. Or, what browser will you need to make the code work? CSS grid will work, more or less, on IE +11, Edge +14, Chrome +57, Firefox +52, Opera +44 and Safari +10.1. Opera 43 and Chrome 49-56 require enabling “experimental Web Platform features” flag in chrome://flags. In case of Firefox 51, use “layout.css.grid.enabled” flag.

HTML

The first part of this CSS grid tutorial is about setting up the HTML structure. This structure will contain a number of blocks – header, sidebar, main block and footer. These blocks will be wrapped inside div element with class “grid”. This will be the first element using CSS grid. Header will contain only h1 tag with simple text. Sidebar (aside) will contain h2 tag with list containing six links. The main block will contain eight cards (article). This will be the second element using CSS grid.

We will use CSS grid for main block to distribute the cards evenly on different screen resolutions. Footer will contain list with six items showing current browser support for CSS properties related to CSS grid. And, footer will contain a short note. We can call this note epitaph. Below is the whole HTML structure we will need for this tutorial.

HTML:

<!-- Grid container and main wrapper --> <div class="grid"> <!-- Header --> <header> <h1>Introduction to CSS grid</h1> </header><!-- .end Header --> <!-- Sidebar --> <aside> <h2>Navigation:</h2> <nav> <ul class="nav"> <li><a href="#">Nav Link 1</a></li> <hr /> <li><a href="#">Nav Link 2</a></li> <hr /> <li><a href="#">Nav Link 3</a></li> <hr /> <li><a href="#">Nav Link 4</a></li> <hr /> <li><a href="#">Nav Link 5</a></li> <hr /> <li><a href="#">Nav Link 6</a></li> </ul> </nav> </aside><!-- .end Sidebar --> <!-- Main content --> <main> <article class="card"> <h1 class="card__heading">Heading</h1> <p class="card__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa? </p> <a href="#"><strong><small>read more »</small></strong></a> </article> <article class="card"> <h1 class="card__heading">Heading</h1> <p class="card__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa? </p> <a href="#"><strong><small>read more »</small></strong></a> </article> <article class="card"> <h1 class="card__heading">Heading</h1> <p class="card__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa? </p> <a href="#"><strong><small>read more »</small></strong></a> </article> <article class="card"> <h1 class="card__heading">Heading</h1> <p class="card__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa? </p> <a href="#"><strong><small>read more »</small></strong></a> </article> <article class="card"> <h1 class="card__heading">Heading</h1> <p class="card__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa? </p> <a href="#"><strong><small>read more »</small></strong></a> </article> <article class="card"> <h1 class="card__heading">Heading</h1> <p class="card__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa? </p> <a href="#"><strong><small>read more »</small></strong></a> </article> <article class="card"> <h1 class="card__heading">Heading</h1> <p class="card__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa? </p> <a href="#"><strong><small>read more »</small></strong></a> </article> <article class="card"> <h1 class="card__heading">Heading</h1> <p class="card__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa? </p> <a href="#"><strong><small>read more »</small></strong></a> </article> </main><!-- .end Main content --> <!-- Footer --> <footer> <ul class="footer-support"> <li> <span> <i class="fa fa-chrome"></i> <span class="browser-version">57</span> </span> </li> <li> <span> <i class="fa fa-edge"></i> <span class="browser-version">14</span> </span> </li> <li> <span> <i class="fa fa-firefox"></i> <span class="browser-version">52</span> </span> </li> <li> <span> <i class="fa fa-internet-explorer"></i> <span class="browser-version">11</span> </span> </li> <li> <span> <i class="fa fa-opera"></i> <span class="browser-version">43</span> </span> </li> <li> <span> <i class="fa fa-safari"></i> <span class="browser-version">10.1</span> </span> </li> </ul> <small class="epitaph"> Built with <i class="fa fa-heart"></i> by <a href="www.alexdevero.com"><u>Alex Devero</u></a> </small> </footer><!-- .end Footer --> </div><!-- .end Grid container and main wrapper -->

CSS (Sass)

Like in case of flexbox, there are many ways to approach this subject. There is the hard and the easy way. You can use flexbox with just a few lines of code. If you want to master it, you have to learn about a lot of CSS properties. The same is true about CSS grid. Grid, too, comes with amount of new CSS properties and values. My goal is to show you the minimum effective dose, not to overwhelm you. I want to help you get started. So, I will do my best to keep this tutorial simple.

We will be using a small number of CSS grid-related properties. These properties are grid-template-areas, grid-template-columns, grid-template-rows, grid-row-gap, grid-column-gap and display with “grid” as value. You can find the rest of all properties and values in this Complete Guide to Grid published on CSS Tricks. This guide also explains important terminology. So, if you find yourself in doubt, check this guide. You will probably find a solution. Now, back to the tutorial.

Sass workflow and resets

The first thing we will do is creating a few variables and one function to make our work easier and faster. If you are not familiar with Sass preprocessor, I highly recommend reading The Beginner’s Guide to Learn Sass Part 1, Part 2 and Part 3. This mini series will take you from basic of Sass to the most advanced topics and some tips & tricks. You will learn all you need to start using Sass at full-speed. Next, we will reset and add custom styles for html, body, a and ul elements.

Sass:

// Sass function for converting pixels to rems @function remy($value) { @return ($value / 16px) * 1rem; } // Sass variables $spacing: remy(16px); $spacing-big: remy(32px); $spacing-small: remy(8px); //- Basic resets -// html { font-size: 100%; } body { margin: 0; font: 16px / 1.414 Verdana, Arial, sans-serif; background-color: #f4f5f7; } a { $color: #212121; text-decoration: none; color: $color; transition: color .25s; &:focus, &:hover { color: lighten($color, 25%); } } ul { padding: 0; margin: 0; display: flex; list-style-type: none; }

Enter the grid

That was easy intro. Now, let’s dive right into the CSS grid. We will use our grid class to apply grid styles to the div that wraps the whole page. First, we need to set display property to “grid”. Then, we will set grid-template-areas property to “’header’ ‘sidebar’ ‘main’ ‘footer’”. Each row contains element(s) inside the quotes. So, first row contains ‘header’, second ‘sidebar’, fourth ‘main’ and fifth ‘footer.’ This basically means that our grid will contain four rows stacked on top of each other.

Next, we will use grid-template-columns property to specify how much space of the grid will each area in the row (think element like ‘header’) take. We want to keep it full-width so we will use “1fr” which stands for 1 fraction. After that, we will use grid-template-rows with minmax() CSS function to make sure the footer will always stick to the bottom. This will let the center of the grid remain flexbile and expand as screen allows while keeping header and footer at the same height.

In order to make this work, we will also need to set height to “100vh” (viewport height). Next are some styles for reducing the max-width of the grid and centering it. After that, we will use media query to target screen with higher than 768 pixels. When this happens, we will restructure the grid. From that moment, first row will still contain only ‘header’, second will contain ‘sidebar main’ and third will contain ‘footer’. We will also set grid-template-columns will to 1fr 4fr.

This means that the first area (element) inside the quotes (grid-template-areas) will cover 1 fraction of the grid while the second will cover 4 fractions. In other words, we will split the grid into two columns (fractions). One will take 1/5 (1 fraction) of the space and the second 4/5 (4 fractions). Also, the duplicate header and footer areas (‘header header’ ‘sidebar main’ ‘footer footer’) in grid-template-areas is not a mistake.

We are saying that we want these areas to fill both columns of the specific row. Or, this row should contain only header / footer and it should be full-width. Otherwise, header and footer would cover only one fraction or column. What if you want to split the grid into three columns?

Then, you can set grid-template-columns to “1fr 3fr 1fr” (or any other fractions of the space). And, you will set grid-template-areas to “’header header header’ ‘sidebar-left main sidebar-right’ ‘footer footer footer’”. Again, header and footer will be full-width. Sidebar-left and sidebar-right will both take 1/4 of the space and main will take 3/4. If you want header or footer to fill only 2 columns you will use “’header header’ ‘sidebar-left main sidebar-right’ ‘footer footer’”.

I know that grid-template-areas and grid-template-columns can be a bit tricky to understand. The best way to understand it is by trying different numbers of fractions along with adding / removing areas to see what will happen. Remember that you are dividing the grid into fractions. One more example. Let’s say you want to divide it into two halves. Then, set the grid-template-columns to “1fr 1fr”. This means that first column with take 1/2 of the grid and second will take 1/2 as well.

Sass:

//- Set the grid layout -// .grid { display: grid; grid-template-areas: 'header' 'sidebar' 'main' 'footer'; grid-template-columns: 1fr; grid-template-rows: minmax(min-content, max-content) auto minmax(min-content, max-content); margin-right: auto; margin-left: auto; max-width: remy(1170px); min-height: 100vh; @media screen and (min-width: 768px) { grid-template-areas: 'header header' 'sidebar main' 'footer footer'; grid-template-columns: 1fr 4fr; } }

Defining template areas

By now, you may wonder, how the grid knows what area relates to which HTML element? Great question! The truth is that you have to specify it explicitly. If you want to use some element with grid-template-areas as an area, you need to target this element and use grid-area CSS property set to some name for that area. Don’t use spaces or quotes. You can use camelCase or dashes. For example, grid-area: header, grid-area: footer, grid-area: sidebar-left or grid-area: sidebarRight.

In our example, we used header, main, sidebar and footer as areas. This means that we need to use grid-area for header, main, aside and footer with proper values.

Sass:

//- Define template areas -// header { grid-area: header; } main { grid-area: main; } aside { grid-area: sidebar; } footer { grid-area: footer; }

Creating second grid

There are a lot of styles to make the example for this tutorial look good. However, these styles are not necessary for learning about CSS grid. And, going over all the styles would take a lot of time. I will skip this code and stick only to what is directly related to CSS grid. Don’t worry, I will include the whole Sass code in the end. Now, let’s move to the second and last appearance of CSS grid in this tutorial. We can use grid to take our eight cards in the main area and create simple grid layout.

First, we will need to select the main element and set its display property to “grid”. We will use mobile-first approach. This means that we will use grid-template-columns and set it to “100%”. Meaning, the grid should contain one full-width column. Next, we will use grid-row-gap and to create some spacing between rows. $spacing-big variable is equal to 32px. This will be enough. After that, we can move beyond mobile screens.

We will create first media query targeting screens with width of 480px and wider. Inside this media query we will change set grid-template-columns to “auto auto” (without quotes). This means that we want two columns with equal widths in each row. We will also use grid-column-gap property and set it to $spacing variable (16px). This will create 16px wide gap between columns. Another media query will target screens 992 and wider.

Inside this media query, we will set grid-template-columns to “auto auto auto”, again without quotes. This will create rows with three cards with equal widths in each. Finally, let’s create one more media query for screen widths of 1200px and wider. This media query will change the value of grid-template-columns to “auto auto auto auto”. Yes, you guessed it. We want to have four cards with the same width in each row.

Sass:

main { display: grid; grid-template-columns: 100%; grid-row-gap: $spacing-big; @media screen and (min-width: 480px) { grid-template-columns: auto auto;// 2 cards per line with equal widths grid-column-gap: $spacing; } @media screen and (min-width: 992px) { grid-template-columns: auto auto auto;// 3 cards per line with equal widths } @media screen and (min-width: 1200px) { grid-template-columns: auto auto auto auto;// 4 cards per line with equal widths } }

Putting it all together

As I promised, here is the whole code for this tutorial. Keep in mind that it contains a lot of CSS used only for additional styling. If you want to replicate the design in this tutorial completely, use the code below. If you only want to practice with grid you can use only the snippets we discussed on the lines above. Also, if you want to see compiled CSS with all prefixes, take a look at the demo on Codepen in “Editor view” and choose “View compiled CSS” on CSS editor tab.

Sass:

// Sass function for converting pixels to rems @function remy($value) { @return ($value / 16px) * 1rem; } // Sass variables $spacing: remy(16px); $spacing-big: remy(32px); $spacing-small: remy(8px); //- Basic resets -// html { font-size: 100%; } body { margin: 0; font: 16px / 1.414 Verdana, Arial, sans-serif; background-color: #f4f5f7; } a { $color: #212121; text-decoration: none; color: $color; transition: color .25s; &:focus, &:hover { color: lighten($color, 25%); } } ul { padding: 0; margin: 0; display: flex; list-style-type: none; } //- Set the grid layout -// .grid { display: grid; grid-template-areas: 'header' 'sidebar' 'main' 'footer'; grid-template-columns: 1fr; grid-template-rows: minmax(min-content, max-content) auto minmax(min-content, max-content); margin-right: auto; margin-left: auto; max-width: remy(1170px); min-height: 100vh; @media screen and (min-width: 768px) { grid-template-areas: 'header header' 'sidebar main' 'footer footer'; grid-template-columns: 1fr 4fr; } } //- Define template areas -// header { grid-area: header; } main { grid-area: main; } aside { grid-area: sidebar; } footer { grid-area: footer; } //- Header -// header { padding-top: $spacing; padding-bottom: $spacing; margin-bottom: $spacing; background-color: #fff; box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.08); h1 { margin-top: 0; margin-bottom: 0; font-size: 18px; font-weight: 700; text-align: center; text-transform: uppercase; } } //- Navigation -// aside { padding: $spacing; background-color: #fff; @media screen and (max-width: 767px) { padding-bottom: $spacing; margin-bottom: $spacing; } @media screen and (min-width: 768px) { margin-right: $spacing; } h2 { @media screen and (max-width: 767px) { display: none; } margin-bottom: $spacing-small; font-size: 14px; } } .nav { flex-direction: row; justify-content: center; a { font-size: remy(12px); } @media screen and (max-width: 767px) { hr { display: none; } li + li { margin-left: $spacing; } } @media screen and (min-width: 768px) { flex-direction: column; justify-content: flex-start; hr { margin-top: $spacing-small; margin-bottom: $spacing-small; margin-left: 0; width: remy(36px); height: 1px; background: #eee; border: 0; } li + li { margin-top: $spacing-small; } } } //- Main area -// main { display: grid; grid-template-columns: 100%; grid-row-gap: $spacing-big; @media screen and (min-width: 480px) { grid-template-columns: auto auto; // 2 cards per line with equal widths grid-column-gap: $spacing; } @media screen and (min-width: 992px) { grid-template-columns: auto auto auto; // 3 cards per line with equal widths } @media screen and (min-width: 1200px) { grid-template-columns: auto auto auto auto; // 4 cards per line with equal widths } } //- Cards -// .card { display: flex; flex-direction: column; padding: $spacing; background-color: #fff; box-shadow: 0 20px 20px rgba(0, 0, 0, .08); transition: all 250ms cubic-bezier(.02, .01, .47, 1); &:focus, &:hover { box-shadow: 0 30px 30px rgba(0, 0, 0, .16); transform: translate(0, -10px); } a { margin-top: auto;// Push link to the bottom of the card } } .card__heading { margin-top: 0; font-size: remy(18px); } .card__excerpt { font-size: remy(14px); } //- Footer -// footer { margin-top: remy(24px); background-color: #fff; } .footer-support { padding-top: $spacing-big; padding-bottom: $spacing; display: flex; justify-content: center; li + li { margin-left: $spacing; } .browser-version { font-size: remy(14px); } } .epitaph { padding-top: $spacing-small; padding-bottom: $spacing; display: block; text-align: center; } .fa-heart { color: #e74c3c; }

Closing thoughts on CSS grid

Congratulations! You’ve just made your first layout using CSS grid! I hope that it was easy for you to follow this tutorial and learn about this CSS feature. Are you still trying to wrap your head around some things we discussed? Use the code I wrote for this tutorial, or fork my pen on Codepen, and play with it. If you are not sure how some property works, play with it and try using different values. Also, take a look at that guide published on CSS tricks. Remember, it all comes to practice.

Thank you very much for your time.

Want more?

If you liked this article, please subscribe or follow me on Twitter.

The post Quick and Easy Introduction to CSS Grid for Beginners appeared first on Alex Devero Blog.

[shonarollo-blog]

When travel is concerned, I firmly believe that you should always, always stay in a place at least as long as it took to get there—especially when that place is halfway across the world. You’ve got to make it worth your while! With that in mind and with 19 hours of transit ahead of me, I set out to put together my three-week Japan itinerary which, as a first timer in the land of the rising sun, would take me to all the main sights.

From Edo-era castles to metropolises, from shogun villages to iconic volcanoes, and from tranquil temples to surprising wildlife, here’s what I did in the space of three weeks.

TOKYO // 4 days

Where I stayed: Millennium Mitsui Garden Hotel Tokyo

With most flights landing into Narita airport, it only made sense to spend a little time in the Japanese capital; plus, it’s the kind of mega city you’ve just got to be in to fully grasp its tremendous size and significance.

Nevertheless, I was hesitant about spending too much time in Tokyo, however fascinating it may be, as I wanted to cover as much ground as possible.

Things to do in Tokyo:

Drinks at New York Bar atop the iconic Park Hyatt on my final night in Japan: totally worth the expense, the best possible way to conclude this epic Japanese odyssey. This is where they filmed Lost in Translation.

Ueno Park (I was in Tokyo during cherry blossom season)

Meiji Jingu shinto shrine

SkyTree: if you’re budget-strapped, skip the prohibitively expensive observation deck fees and go to Sky Tree East Tower instead where you get can to the 31st floor free of charge; not quite as high, but still impressive (see city view photo above).

Senso-ji Temple

$1 conveyor belt sushi in Shinjuku

Shibuya crossing

Shopping and browsing in Harajuku

Edo Museum

Tokyo guided tours & day trips:

Shinjuku and Kabukicho Walking Tour

Old and Nostalgic Tokyo: Yanaka Walking Tour

Sumo Morning Practice

Soba-Making with a Master

Taiko Drum Lesson

Japanese Garden Tour and Sake Tasting

Green Tea and Wagashi Experience

Samurai Experience

Geisha Experience + Kaiseki Course Dinner

Tsukiji Fish Market Tour with Sushi Making Experience

Sake Brewery Tour including Sake-Tasting

NIKKO // 1 day

Nikko Temple

Where I stayed: Okunoin Hotel Tokugawa

The small city of Nikko is located in a mountainous area north of Tokyo called the Tochigi Prefecture, and is home to some of the most famous and esteemed shrines in the country: UNESCO World Heritage Site of Toshogu Shrine, erected in 1617 to commemorate the founding ruler of the Tokugawa shogunate and ultimate feudal military government, Tokugawa Ieyasu.

It’s a stretch on any typical Japan Itinerary but it’s well worth the trip.

Here, you will find luxuriant woodlands with rows and rows of stone lanterns, occasionally dotted with vermillion gates. A truly spiritual and grandiose place and one of the most popular day trips from Tokyo, although it is possible to stay overnight.

Day trips to Nikko

Nikko National Park Day Trip from Tokyo

Best of Edo Japan: Nikko National Park and Edo Wonderland Day Trip from Tokyo

2 Days Onsen, Trekking and Zen Meditation Tour in Nikko

Nikko, Lake Chuzenji, Kegon Waterfalls including Lunch from Tokyo

MOUNT FUJI // 1 day

Fuji-san

Where I stayed: Rakuyu

Located right outside Tokyo, the majestic mountain is one of the most popular day trip destinations in the area. Rightfully so; the stratovolcano is Japan’s highest peak at 12,389 feet tall as well as both a Special Place of Scenic Beauty (a great page to bookmark if you want to hit Japan’s prettiest sights, by the way) and a UNESCO World Heritage Site.

Fuji’s unusually symmetrical snow-capped cone is a well-known symbol of Japan and it is frequently depicted both touristy and authentic artworks.

The easiest and most cost-efficient way to admire Fujisan is by sitting on the right-hand side of the shinkansen travelling between Tokyo and Kyoto. The mountain majestically soars into the picture about 45 minutes into the journey.

Day trips to Mount Fuji

Many tour operators offer day trips to the sacred mountain; should you wish to travel to Mount Fuji independently, note that hiking trails are only officially open in July and August.

Forest hiking in Mount Fuji

Lake cruise in Mount Fuji

VIP experience in Mount Fuji with local priests

Motorcoach excursion including a trip up to Mt. Fuji’s 5th Station and a ride on the Komagatake Ropeway

KYOTO // 5 days

Kinkaku-Ji Temple

Where I stayed: Hotel Granvia Kyoto

Not only does Kyoto hold an impressive quantity of temples and castles, it is strategically located on the Tokaido Shinkansen line for easy side trips and has plenty of mouth-watering restaurants to keep your appetite satisfied. Good to know, though: most of the noteworthy temples are located in the same area north-west of the train station, making it easy to visit all of them on a single day.

Handy tip: if you’re planning on wearing sandals or go commando in your shoes, bring a pair of socks with you; this being Japan, you won’t be authorised to enter temples with your shoes on or barefoot.

Things to do in Kyoto

Arashiyama (bamboo grove, monkey park, splendid hiking opportunities)

Fushimi Inari Shrine

Evening in Gion on the lookout for geishas and maikos

Side note about geishas: whatever you do, remember to be respectful to geishas you encounter. If you want to take a picture of them, just ask – a lot of geishas have complained in recent years that tourists act like ruthless paparazzi. Please don’t be that person!

Kinkakuji, the Golden Temple

Ginkakuji, the Silver Pavilion

Ryoanji

Toji-in Temple

Toji Temple (believe it or not, it’s an entirely different temple)

Philosopher’s Walk

Higashiyama historic district

Kyoto guided tours & day trips to consider:

Kyoto Full-Day Sightseeing Tour

Maiko Performance with Kaiseki Dinner

Kyoto Small-Group Bike Tour

Tea Ceremony with a Tea Master

Morning Tour: Kyoto Imperial Palace, Golden Pavilion, Nijo Castle

Samurai School

Fushimi Inari and Sake Brewery Tour

Gion by Night: Culture Performance with Dinner

Arashiyama and Sagano Morning Walking Tour

Nishiki Market: The Heart of Kyoto Cuisine

NARA // 1 day

A 16 metres high Buddha

Nara was an absolute delight and one of my favourite stops on this Japan itinerary.

Where I stayed: Noborioji Hotel Nara

It just ticked all the boxes of things you expect to find in a place like Japan: cute animals, wareshinobu-clad maikos, immense Buddhist temples, and mystical forests. I found all that here, in this small city just outside Kyoto.

Although a destination in its own right (there are a few hotels near the train station), Nara is a worthwhile day trip from the ancient capital. It was Japan’s first permanent capital in the year 710; as such, it is home to over eight UNESCO World Heritage Sites, second only to Kyoto as a directory of Japan’s cultural heritage.

Things to do in Nara

Tōdai-ji: the largest wooden building in the world, which, astonishingly enough, is actually a mere two-thirds of its estimated original size. It contains the Great Buddha (not an understatement, at 16 metres high and 437 tonnes of bronze) is housed inside.

Horyuji Temple

Nara Park and its equal parts tame, hungry, and adorable deer

HIMEJI // 1 day

Himeji Castle

Where I stayed: Daiwa Roynet Hotel Himeji

Confession time: I didn’t actually go inside Himeji Castle.

I unknowingly turned up two days after the castle had reopened following massive renovations, and frankly I wasn’t too keen on the three-hour long queue. I decided to stick to the flowery gardens instead, knowing that another fabulous castle was on my itinerary later in the week.

HIROSHIMA // 1 day

Where I stayed: Hotel Kuretakeso Hiroshima Otemachi

You simply can’t travel along the southern coast of Honshu Island — or plan any Japan Itinerary — and not spend some time in Hiroshima. Even though Hiroshima was largely obliterated by an atomic bomb —ironically named Little Boy— during World War II, the city is now thriving and well. Hiroshima Castle and Shukkeien Garden, two major monuments pertaining to Hiroshima’s historical heritage, were destroyed during the bombing and were later on reconstructed; they can be visited today.

The UNESCO A-Bomb Dome acts as a stark symbol of Hiroshima’s newfound peace, as only the skeleton of what once was Hiroshima Prefectural Industrial Promotion Hall building remains. Nearby is the lush and leafy Peace Memorial Park, built over the former business district, which commemorates people who lost their lives on that fateful day in 1945.

Hiroshima guided tours & day trips to consider:

Hiroshima & Miyajima 1-Day Tour from Hiroshima

Hiroshima Half-day Private Custom Tour with National Licensed Guide

Central Hiroshima, Miyajima, Iwakuni including traditional lunch

Hiroshima Cycling Peace Tour with Local Guide

Rabbit Island Private Tour from Hiroshima with Local Guide

Hiroshima & Miyajima 1-day cruise tour

MIYAJIMA // 1 day

Itsukushima Shrine

Where I stayed: Hotel Kuretakeso Hiroshima Otemachi

Almost right across the bay from Hiroshima is the quaint island of Miyajima, home to the iconic Itsukushima Temple.

Its claim to fame is undoubtedly the bold Itsukushima Shrine, which dramatically soars 16 metres high out of the water; it’s often referred to as a “floating torii gate” in popular culture. Interestingly, it’s possible to walk right up to the shrine at low tide—which is why I highly recommend spending a full day on Miyajima.

Things to do in Miyajima

There are plenty of exciting hiking trails around Mount Misen

A 27-metres high, 5-storied pagoda

The old town of Miyajima

Shishiiwa Observatory, accessible by cable car

Miyajima guided tours & day trips to consider:

Trekking Tour of the World Heritage Miyajima

Hiroshima & Miyajima 1-day cruise tour

Hiroshima & Miyajima 1-Day Tour from Hiroshima

Central Hiroshima, Miyajima, Iwakuni including traditional lunch

Rabbit Island Private Tour from Hiroshima with Local Guide

KANAZAWA // 1 day

Where I stayed: The Square Hotel KANAZAWA

I wanted to visit Kanazawa because of its famously well-preserved heritage from the Edo Period when it served as the seat of the powerful Maeda feudal Clan. It was one of the wealthiest clans in terms of fief sizes and rice production, but with great power come equally great threats. The Maeda clan, therefore, employed several samurais and offered them property at the foot of Kanazawa Castle in Nagamachi District, which can still be visited today.

Japan’s most celebrated landscape garden, Kenrokuen, as well as Higashi Chaya District, filled with ancient wooden teahouses where geishas work and perform, are both well worth a few hours.

Kanazawa guided tours & day trips to consider:

Full Day Small Group Tour of Kanazawa

Geiko (Geisha) Performance & Dinner

Omicho Market Tour & Cooking Class

Kimono trip in historical Kanazawa

Explore Kanazawa via Bicycle

JAPANESE ALPS // 2 days

Where I stayed: Yamanouchi Ryokan

Moving on to the Japanese Alps for the last few days of this Japan itinerary, where I had planned on hanging out with snow monkeys and experience a ryokan with an onsen and a traditional dinner.

It was absolutely perfect and even though I was terrified of committing a cultural faux-pas I managed to make it out unscathed, and infinitely more appreciative of my time in the Nagano prefecture.

Janapese Alps guided tours & day trips to consider:

Full-Day Tour of Snow Monkeys, Zenko-ji Temple and Sake in Nagano

Explore Jigokudani Snow Monkey Park and Knowledgeable Local Guide

Nagano Full-Day Cycling Tour with Snow Monkey, Obuse Town, Apple Orchards

Nagano Private Two Day Tour with Guide, Private Vehicle and Overnight at Ryokan

MATSUMOTO // 1 day

Matsumoto Castle

Where I stayed: Matsumoto Hotel Kagetsu 

The detour on this Japan Itinerary by this somewhat underrated portion of Honshu Island was mainly to visit Matsumoto Castle, one of Japan’s premier historic castles and a splendid work of art. Its value is simply inestimable, as it still contains original wooden interiors and external stonework. It really was a fascinating journey into the history of the military in Japan; the castle is awash with secret passageways, tricky steep stairs, and other secrets that only samurais were privy to.

I think I ended up having a much better and more informative time at Matsumoto than I would have at Himeji, which was way too crowded.

The post How To Get The Best Out Of A First Trip To Japan: A 21-Day Japan Itinerary appeared first on To Europe And Beyond.