Package Exports

slatecss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (slatecss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Slate V2

Column Sizes

class=“xs-12 md-5” This class is telling the column to be full-width on extra-small screen devices and 5/12 width on medium screen devices.

Columns are the foundation of a grid framework. These columns simply add up to 12 and can take up different widths for different screen sizes (of desired.)

In case you haven’t used the Bootstrap or Foundation framework before, ‘xs’ is referring to extra-small screen sizes, whereas the ‘md’ is referring to medium sized screen sizes.

Screen Sizes

xs = extra-small sm = small md = medium lg = large xl = extra-large

This is also the hierarchy of column widths. If an xs size is defined, it will be used up until there is a md size defined and then until a lg size is defined.

Like other mobile-first frameworks, Slate will take the first rule of column size and apply it to the larger screen sizes as well; until a larger screen size’s column size is defined in the class list.

Here is a basic example of a navigation menu using Slate V2.

<header class="navbar">
    <div class="brand">
        <img alt="logo" src="https://image.ibb.co/gV2s15/e_logo.png" width="50px"> <a href="#">Brand</a>
    </div>
    <nav>
        <a class="dropdown-toggle" href="#"><i class="fa fa-bars"></i></a>
        <ul>
            <li><a href="#">More Information</a></li>
            <li>
                <a href="#">About Us <i class="fa fa-caret-down"></i></a>
                <ul>
                    <li><a href="#">dropdown menu</a></li>
                    <li><a href="#">dropdown menu item 2</a></li>
                    <li><a href="#">dropdown menu item 3</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Our Clients</a></li>
        </ul>
    </nav>
</header>

Let’s Break That Down…

We instantiate a new Navbar by giving an element the class “navbar”. We are using a header tag for the example above.

Branding

Inside the Navbar, we have an immediately defined brand using the “brand” class on a standard div. This brand element can hold text and images. In the example above, we have the brand logo followed by the brand name.

It’s important to note that it’s best to keep images and text to a minimum for branding

Nav Menus

Nav elements are defined inside the Navbar, following the brand in the example above.

According to the official HTML5 nav element documentation, nav menus should only contain list items and all links for the navigation menu should be contained inside list items <li><a href="#">Example</a></li>.

Sub-menus

<ul>
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">About Us <i class="fa fa-caret-down"></i></a>
        <ul>
            <li><a href="#">dropdown menu</a></li>
            <li><a href="#">dropdown menu item 2</a></li>
            <li><a href="#">dropdown menu item 3</a></li>
        </ul>
    </li>
</ul>

Sub-menus are created by placing an <ul> tag following a link. That link will be the trigger for the sub-menu. Without a trigger, the sub-menu will have not way of being rendered.

Currently sub-menus are limited to a single level, meaning that a sub-sub-menu is not currently possible in V2.

In order for navigation menus to be displayed on mobile devices, a toggle link must be defined. This trigger is what must be pressed/ clicked in order to have that particular nav menu display.

<nav>
    <a class="dropdown-toggle" href="#"><i class="fa fa-bars"></i></a>
    <ul>
        <li><a href="#">More Information</a></li>
        <li>
            <a href="#">About Us <i class="fa fa-caret-down"></i></a>
            <ul>
                <li><a href="#">dropdown menu</a></li>
                <li><a href="#">dropdown menu item 2</a></li>
                <li><a href="#">dropdown menu item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Our Clients</a></li>
    </ul>
</nav>

It’s important to always include the “dropdown-toggle” link for menus you want to display on mobile devices.

slatecss