Rankesh Design

View Rankesh Design

This site is a great little portfolio site that has a really interesting grid stucture.

The site uses http://meyerweb.com/eric/tools/css/reset/ to reset a few items cross browser (I wonder if we’ll ever get to a time when we don’t need this).

Strangely (maybe not) Rankesh drops in his CSS preprocessed variables as comments

/* Layout */
/* Typography */
/* Colors */
/*red blue yellow
$background-primary: #dbdbdb;
$background-secondary: #cacaca;
$background-tertiary: #111111;
$background-quaternary: #111111;
$body-text: #40382d;
$body-text-on-dark: rgba(255,255,255, .7);
$heading-text: #111111;
$selection-background: rgba(255,103,89, .99);
$secondary-text: rgba(0,0,0, .6);
$secondary-text-on-dark: rgba(255,255,255, .4);
$link: #111111;
$visited-link: #111111;
$background-button: #111111;
$button-text: #ffffff;
$decorative: #dc6561;
$quote: #dc6561;
$decorative-text: #ffffff;
$rule: #111111;
$background-home-page-title: #87a5d9;

Grid Structure

The grid/layout is built ontop of flexbox to start with and all the mobile styles (up to a max-width of 640px) sets flex-direction:column

.row, .column {
    display: flex;
    flex-direction: column; }

Anything above 641px wide gets the .row class updated to be a row rather than a column.

.row {
    display: flex;
    flex-direction: row; }

  .row-wrap {
    flex-wrap: wrap; } }

As for the column sizes when it gets to the rows it goes away from allowing Flex to do it’s thing and fit everything together, but instead makes a use of calc to define the width of the columns. For example for a 12 column grid we have

.span3of12 {
width: calc(100% / 12 * 3); }

.span4of12 {
width: calc(100% / 12 * 4); }

.span6of12 {
width: calc(100% / 12 * 6); }

.span8of12 {
width: calc(100% / 12 * 8); }

Whereas if we wanted a 15 column grid there is also

.span10of15 {
width: calc(100% / 15 * 10); }

.span11of15 {
width: calc(100% / 15 * 11); }

.span12of15 {
width: calc(100% / 15 * 12); }

.span13of15 {
width: calc(100% / 15 * 13); }

.span14of15 {
width: calc(100% / 15 * 14); }

.span15of15 {
width: 100%; }

I’m not sure why there are so many iterations of different grid sizes… but the site looks pretty awesome I like the way the content is positioned so let’s say it’s needed and works a treat.

Typography

The font-size is done using my favourite repsonsive typography technique

html {
    font-size: calc(18px + ((100vw - 1025px) * (22 - 18) / (1920 - 1024)));
    }

When it comes to the headings there is an interesting approach in determining the font-size. Everything is being declared within calc() (not that interesting) but rather than setting the size to 3rem or 2.2rem it is all set to 1rem with a series of * 1.1 following. For example, check out the H1 and H2 declarations. The h1 is set to 1rem times 1.1 twelve times making 3.138428377rem. On the otherhand, h2 is done seven times making 1.9487171rem.

h1 {
    font-size: calc(1rem * 1.1 * 1.1 * 1.1 * 1.1 * 1.1 * 1.1 * 1.1 * 1.1 * 1.1 * 1.1 * 1.1 * 1.1); }
h2 {
        font-size: calc(1rem * 1.1 * 1.1 * 1.1 * 1.1 * 1.1 * 1.1 * 1.1); }

Combine this with a root font-size, the html font-size, that is also responsive and you get quite a nice little responsive typography set. I’ve never seen this approach before so I’m quite interested to understand why this is preferred over letting a CSS preprocessor like Sass or Less do those calculations for you and just spit out the final result in the markup (please let me know if you know why).

Responsive Images

I’m super happy with the implementation of the images, however we could go a little further if we wanted to. At the moment the site is using picture to render the responsive images and I’m happy to see that the fallback image is the mobile version.

<figure class="">
                <a class="linked-image" href="dittory.html">
                <picture>
                  <source class="with-bg" srcset="images/work/dittory/lead-image_desktop.png" media="(min-width: 1440px)">
                  <source class="with-bg" srcset="images/work/dittory/lead-image_tablet.png" media="(min-width: 641px)">
                  <img class="with-bg" src="images/work/dittory/lead-image_mobile.png"></picture>
                </a>
              </figure>

There’s a few things that I would change about this approach though including:

1. picture is usually used when you want to control Art Direction on the images, however in this case it’s the same exact image but smaller. For this I’d recommend going with the src-set approach with sizes
2. because picture is being used it’s the perfect opportunity to introduce webp images for supporting browsers. By including additional source options at the same media query and including type="image/webp" any browser, like Chrome, would serve up the webp version of the image. This would allow us to create the transparency required, which is why these images are PNG instead of JPG, but also allow the image bytes size to be much lower and thus improving loadtime, saving some bandwidth & costs as well.

For example, this WebP image is a full 1MB smaller than this PNG one with no additional compression on quality done when I converted the file from PNG to WebP.

One other thing I’ll put on the image side of things is because there is some large sized images to showoff the amazing work Rakesh does, and let’s not forget how awesome this work is, it could introduce a lazy loading mechanism so only images that are going to be viewed are loaded.

Rankesh Design Technical Details

Site Meta Tag

<meta name="viewport" content="initial-scale=1.0, width=device-width"/>

Media Queries

@media only screen and (max-width: 640px) { }
@media only screen and (min-width: 641px) { }
@media only screen and (min-width: 641px) and (max-width: 1024px) { }
@media only screen and (min-width: 1025px) { }
@media only screen and (min-width: 641px) { }
@media only screen and (min-width: 1025px) { }
@media only screen and (max-width: 1024px) { }