Building a Yoga Retreat Website from Scratch.

Design

Build

For this project I used the Gridlex grid for the first time, which used Flexbox. Flexbox is a modern css layout property that has incredible power and functionality but until recently wasn't widelt supported. To learn more about Flexbox and Gridlex Grid in particular check out http://eager-peanut.cloudvent.net/

Part 1

Part 2

Part 3

After the video ended I made a few small changes.

Vertical Centering

You can vertically center columns two ways, first by appending -middle onto the class of grid so that it was grid-middle. This vertically centered all of the columns like the display. But there is a quirk where you can't mix -equalHeight with -middle, so adding this to our site broke the full height images.

Instead we added -middle to the column class col-6_sm-12 so that it was col-6_sm-12-middle to the columns that contained text.

Responsive I also appended the column classes to be make the site responsive. The way that Gridlex works is that you append the existing class with your responsive size. Adding _sm-12 for example means that on small screens, that column will take up all 12 columns (full width).

Flipping the Order When the middle section stacks on top of each other on mobile, by default the layout becomes image-image-text-text rather than image-text-image-text. Prior to flexbox the main way to solve this was to have duplicate elements and show and hide them using media queries. With flexbox there is a property, flex-direction that allows you to change the order of the elements. As flexbox is so new, you need to add the vendor prefixes as well.

@media(max-width:48em) {
/* These classes flip the order of the columns on a mobile layout so that we don't have two images touching. Try commenting them out and see the difference */
    .mob-flip {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse; }
    .mob-flip div {
        width: 100%; }

Smooth Scroll I set the href for the link at the top of the page to #registerand then added an id="register" to the section containing the form. This creates an anchor link that scrolls down the page.

I wants it to smoothly scroll though, not just jump so I added the latest stable version of jquery (at time of writing 2.2.4) to the head

 <!--- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>

Then added this code to the bottom of the site just below the closing body tag:

<script>
$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') ==
    this.pathname.replace(/^\//,'') && location.hostname ==
    this.hostname) {         var target = $(this.hash);         target = target.length ? target : $('[name=' +
         this.hash.slice(1) +']');
         if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);         return false;       }     }  });});</script>

That's it! You can see and inspect the live site right here... http://crimson-newt.cloudvent.net/