SS 2020 Grammar

Style guides and design prefabs

The outer CMS wrapper should be .mgn-2020ss

<div class="mgn-2020ss"></div>

SxS L-pic

Side by Side

.mgn-side-by-side

H2, H3, p optional. This is 2 panel grid. On mobile the text CTA follows the picture. On desktop, the picture is on the left.

<div class="mgn-side-by-side">
    <div class="mgn-pic">
        <img />
    </div>
    <div class="mgn-blurb">
        <h1></h1>
        <h2></h2>
        <h3></h3>
        <p></p>
        <button class="action primary"><span></span></button>
    </div>
</div>

SxS R-pic

Side by Side Right

.mgn-side-by-side .mgn-r

H2, H3, p optional. This is 2 panel grid. On mobile the text CTA follows the picture. On desktop, the picture is on the right.

<div class="mgn-side-by-side mgn-r">
    <div class="mgn-pic">
        <img />
    </div>
    <div class="mgn-blurb">
        <h1></h1>
        <h2></h2>
        <h3></h3>
        <p></p>
        <button class="action primary"><span></span></button>
    </div>
</div>

SxS Home

.mgn-side-by-side .mgn-home

This SxS Home (above) is 2 panel grid. On mobile the text is centered in the bottom half of the picture. On desktop, the picture is on the left. There is background styling and a white border. Colors are inverted. Note the use of a ghost button.

<div class="mgn-side-by-side mgn-home">
    <div class="mgn-pic">
        <img />
    </div>
    <div class="mgn-blurb">
        <h1></h1>
        <h2></h2>
        <button class="action ghost"><span></span></button>
    </div>
</div>
        

For most home pages, a bit of customization on this type of panel is in order to place the text in the correct position. The example image has a ground plane 60% from the top. By placing a grid line on the ground plane, the text should be centered in the floor.

<style style="display: block; white-space: pre; text-align: left">
    @media screen and (max-width: 1023px) {
        .mgn-side-by-side.mgn-home.example-override {
            grid-template-rows: 60fr 40fr;
        }
    }
</style>
<div class="mgn-side-by-side mgn-home example-override">
...
        

You can see this in action is the full example section, below.

Card L

Left aligned card

.mgn-card

A card using standard typography. Cards are limited in width to prevent paragraphs from getting too wide.

<div class="mgn-card">
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <p></p>
    <button class="action primary"><span></span></button>
</div>

Card C

Centered card

.mgn-card .mgn-center

.mgn-center is a helper class that centers text and adds a small amount of padding to the left of headers. This is needed because letter-spacing is always added to the end of letters, making centered text slightly off.

Explore
<div class="mgn-card mgn-center">
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <p></p>
    <button class="action primary"><span></span></button>
</div>

H1 @375w (35px)

H2 Subheader (20px)

P (15px) Line heights for all headers are "normal". Extra padding is added to the bottom for separation. The p tag has a line height 1.2 times normal, with some extra bottom padding. Buttons use the sibling selector to apply margin-top to the next element.

H3 Another good point (15px)

The font sizes are slightly different in proportion to avoid fractional pixel sizes, which render inconsistently. They are rounded to the nearest pixel.

Blogging stuff

Cards have asymmetrical (4em, 5em) padding at the top and bottom. This lets them sit nicely against images or other cards.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, illo iure nemo possimus rem similique tempora ut vel voluptas voluptatibus! Assumenda, neque, sed! Aspernatur deserunt inventore iste labore perferendis! Tenetur.

H1 @1920w (37px)

H2 Subheader (21px)

P (16px) Line heights for all headers are "normal". Extra padding is added to the bottom for separation. The p tag has a line height 1.2 times normal, with some extra bottom padding. Buttons use the sibling selector to apply margin-top to the next element.

H3 Another good point (16px)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dicta dolor dolorem eius illo ipsam ipsum laudantium natus neque nisi non perferendis, quam ratione recusandae, repellendus soluta unde. Natus, voluptates.

Blogging stuff

Lorem ipsum dolor sit amet, consectetur adipisicingv elit. Autem dicta dolor dolorem eius illo ipsam ipsum laudantium natus neque nisi non perferendis, quam ratione recusandae, repellendus soluta unde. Natus, voluptates.

Spring 20

New Arrivals

An Emphasis of Emphatics

The Ondara Taupe and Pink is a sleek, two-toned double buckle monk strap with a stitched cap toe. The front buckle sweeps back to create a bold modern look. The toe and vamp, crafted in antiqued cuero leather, is accented by our handsome brown patina on the buckle strap and heel. The Ondara features our Artesano sole where the sole is wrapped onto the upper and then hand-stitched by our master artisans.

Loafers

Quesada Navy

Loafer shoe for feets

Ready to wear

Quesada Navy

mgn-card

Subheader

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut delectus deleniti dignissimos ipsum itaque, maiores maxime reiciendis repudiandae sit totam voluptatibus? Deserunt ex modi odit porro quisquam sint?

Another good point

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dicta dolor dolorem eius illo ipsam ipsum laudantium natus neque nisi non perferendis, quam ratione recusandae, repellendus soluta unde. Natus, voluptates.

Blogging stuff

Lorem ipsum dolor sit amet, consectetur adipisicingv elit. Autem dicta dolor dolorem eius illo ipsam ipsum laudantium natus neque nisi non perferendis, quam ratione recusandae, repellendus soluta unde. Natus, voluptates.

mgn-card
mgn-center

Subheader

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut delectus deleniti dignissimos ipsum itaque, maiores maxime reiciendis repudiandae sit totam voluptatibus? Deserunt ex modi odit porro quisquam sint?

Another good point

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dicta dolor dolorem eius illo ipsam ipsum laudantium natus neque nisi non perferendis, quam ratione recusandae, repellendus soluta unde. Natus, voluptates.

Blogging stuff

Lorem ipsum dolor sit amet, consectetur adipisicingv elit. Autem dicta dolor dolorem eius illo ipsam ipsum laudantium natus neque nisi non perferendis, quam ratione recusandae, repellendus soluta unde. Natus, voluptates.

Franklin

Cognac

Shoe Care

Nourish. Nourish. Nourish.

A proper shine is a key component of leather shoe conservation. Clean, nourish, and protect your recipient’s shoes with Magnanni products.

A Tradition

Painting by Hand

Desktop 1fr

Card is 60%, min 300px for mobile

Desktop 2fr

Painting by Hand

On desktop, default card width is a percentage of the screen.

Explore