siimple 3.2.0 siimple.xyz
Layout
A collection of CSS classes for laying your project.
Footer
A basic component for displaying content in the bottom of your page
To create a footer, simply add the class siimple-footer to a div:
<div class="siimple-footer" align="center">
    Made with love by <strong>siimple</strong>
</div>
Sizing
Change the size of the footer component adding the classg siimple-footer--[SIZE]
<div class="siimple-footer siimple-footer--medium" align="center">
    Made with love by <strong>siimple</strong>
</div>
Colored footer
Use siimple-footer--light or siimple-footer--dark to switch the footer to a light or dark theme.
<div class="siimple-footer siimple-footer--dark" align="center">
    Made with love by <strong>siimple</strong>
</div>
<div class="siimple-footer siimple-footer--light" align="center">
    Made with love by <strong>siimple</strong>
</div>
Footer title
Added in v3.2.0
You can turn an element inside your footer to a footer title adding a siimple-footer-title class.
<div class="siimple-footer siimple-footer--light" align="center">
    <div class="siimple-footer-title">My company</div>
</div>
Footer subtitle
Added in v3.2.0
Display a subtitle in your footer with siimple-footer-subtitle class.
<div class="siimple-footer siimple-footer--light" align="center">
    <div class="siimple-footer-title">My company</div>
    <div class="siimple-footer-subtitle">
        We make great things!
    </div>
</div>
Footer links
Added in v3.2.0
You can style your footer links using the class siimple-footer-link. By default, links will be displayed as a block, but you can display inline links adding the siimple-footer-link--inline modifier.
<div class="siimple-footer siimple-footer--light">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--8">
            <div class="siimple-footer-title">My company</div>
            <div class="siimple-footer-subtitle">We make great things!</div>
        </div>
        <div class="siimple-grid-col siimple-grid-col--4">
            <a href="#" class="siimple-footer-link">Link 1</a>
            <a href="#" class="siimple-footer-link">Link 2</a>
            <a href="#" class="siimple-footer-link">Link 3</a>
        </div>
    </div>
</div>
You can also display a small link description adding a div element inside the link with a siimple-footer-link-description.
<div class="siimple-footer siimple-footer--light">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--8">
            <div class="siimple-footer-title">My company</div>
            <div class="siimple-footer-subtitle">We make great things!</div>
        </div>
        <div class="siimple-grid-col siimple-grid-col--4">
            <a href="#" class="siimple-footer-link">
                Link 1
                <div class="siimple-footer-link-description">
                    Link 1 description
                </div>
            </a>
            <a href="#" class="siimple-footer-link">
                Link 2
                <div class="siimple-footer-link-description">
                    Link 2 description
                </div>
            </a>
            <a href="#" class="siimple-footer-link">
                Link 3
                <div class="siimple-footer-link-description">
                    Link 3 description
                </div>
            </a>
        </div>
    </div>
</div>
Footer group
Added in v3.2.0.
Use siimple-footer-group to style your links group title.
<div class="siimple-footer siimple-footer--light">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--6">
            <div class="siimple-footer-title">My company</div>
            <div class="siimple-footer-subtitle">We make great things!</div>
        </div>
        <div class="siimple-grid-col siimple-grid-col--3">
            <div class="siimple-footer-group">Group 1</div>
            ...
        </div>
        <div class="siimple-grid-col siimple-grid-col--3">
            <div class="siimple-footer-group">Group 2</div>
            ...
        </div>
    </div>
</div>
Footer rule
Added in v3.2.0.
Add siimple-footer-rule to an element to display an horizontal rule.
Found a mistake or want to help improve this documentation? Suggest changes.