foot.css logo

Documentation

Getting Started on the right foot

Installation

foot.css is available via CDN you just need to add this tag in your project head.

<link rel="stylesheet" href="https://unpkg.com/footcss">

foot.css is also available using npm to install it directly into your project.

$ npm i footcss

Layout

Container

The responsive .foot-container class allow you to center block-level elements on the page. Additionals fixed-width classes can be added to provide fixed width to containers .foot-xs 496px, .foot-sm 616px, .foot-md 856px, .foot-lg 976px, .foot-xl 1296px

<div class="foot-container foot-lg">
    <div class="foot-row">
        ...
    </div>
</div>
Simple Grid System

foot.css provides a fluid grid system that resize with the viewport. If you want to center your grid on the page, just warp it in a block-level elements using the .container class. The columns will break when the viewport width is smaller than 840px.

.foot-col
.foot-col
.foot-col
.foot-col
<div class="foot-row">
    <div class="foot-col"> .foot-col </div>
    <div class="foot-col"> .foot-col </div>
    <div class="foot-col"> .foot-col </div>
</div>
<div class="foot-row">
    <div class="foot-col"> .foot-col </div>
</div>

Elements

Typography

Heading h1 3.5rem (56px)

Heading h2 3rem (48px)

Heading h3 2.5rem (40px)

Heading h4 2rem (32px)

Heading h5 1.75rem (28px)
Heading h6 1.5rem (24px)
Optimized for Japanese language

foot.css is optimized for a better support of Japanese typography. Just add the <html lang="ja"> attribute to your pages, and optimizations will be automaticaly applied.

<html lang="ja">...</html>

Additionaly, you can use the .foot-ja class to style a specific element.

見出しタグ

狂人走れば不狂人も走る

<h6 class="foot-ja">見出しタグ</h6>
<p class="foot-ja">狂人走れば不狂人も走る</p>
Buttons

foot.css includes predefined button styles that can be used in different situations. The buttons support icons as well with the help of the Font Awesome library, that you will need to add to your document head.

<input type="submit" value="Input Submit">
<button>Button</button>                
<button type="submit"><i class="fas fa-user"></i>Submit Button</button>

Link Button Link Button 

<a href="#" class="button">Link Button</a>
<a href="#" class="button"><i class="fas fa-link"></i>Link Button</a>

<a href="#"><button>Button Link</button></a>
<a href="#"><button><i class="fas fa-link"></i>Button Link</button></a>
Outline Outline dark Outline light

To give an outlined look to your buttons, just add the .outline class with the optional style classes .dark or .light.

<a class="button outline">Outline</a>
<a class="button outline dark">Outline dark</a>
<a class="button outline light">Outline light</a>
Forms

foot.css applies styles to all common form elements with a clean and appealing aesthetic.

<div class="foot-form-grp">
    <label>Your Name</label>
    <input type="text" placeholder="Name">
</div>
<div class="foot-form-grp">
    <label>E-mail</label>
    <input type="email" placeholder="E-mail">
</div>    
<div class="foot-form-grp">
    <label>Your Message</label>
    <textarea placeholder="Message..."></textarea>
</div>
Icons

foot.css work well in combination with Font Awesome, you just need to add the library script to your document (library current version example bellow)

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

Components

You can easily create navigation bar by adding the .foot-nav class to a container element. Use the .foot-nav-logo, foot-nav-item classes to add childs elements, and additional utilities classes for positioning.

<nav class="foot-nav">
    <h1 class="foot-nav-logo foot-primary-color">Logo</h1>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
</nav>
<nav class="foot-nav foot-flex-justify-center">
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <h1 class="foot-nav-logo foot-primary-color">Logo</h1>                    
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
</nav> 
<nav class="foot-nav foot-flex-justify-between">
    <img src="img/foot-css.svg" alt="Logo">
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
</nav>
<nav class="foot-nav foot-flex-justify-between">
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <img src="img/foot-css.svg" alt="Logo">                
    <a class="foot-nav-item" href="#">foot-nav-item</a>
    <a class="foot-nav-item" href="#">foot-nav-item</a>
</nav>

Utilities

Customization

foot.css use CSS variables to give you an easy way of overriding some of the default settings

:root {
    --foot-primary-color: #434190;
    --foot-secondary-color: #EBF4FF;
    --foot-link-color: #0366d6;
    --foot-radius: .25rem;
}

To overide the default foot.css variables in your project, just import foot.css in your stylesheet, then add your :root selector with your variables values after.

@import url("https://unpkg.com/footcss");

:root {
    --foot-primary-color: red; /* your primary color */
    --foot-radius: 0; /* no border radius */
}

Example: Change the--foot-primary-color variable value to red, and set the --foot-radius variable value to 0 to get rid of the border-radius aesthetic throughout all the classes.

Colors

foot.css give you access to color utilities easily customizable via CSS variables, for changing text, background and link colors.

.foot-txt-primary

.foot-txt-secondary

.foot-bg-link

.foot-txt-light

.foot-txt-mid

.foot-txt-dark

.foot-txt-error

.foot-txt-success

<p class="foot-txt-primary">...</p>
<p class="foot-txt-secondary">...</p>
<p class="foot-txt-link">...k</p>
<p class="foot-txt-light">...</p>
<p class="foot-txt-mid">...</p>
<p class="foot-txt-dark">...</p>
<p class="foot-txt-error">...</p>
<p class="foot-txt-success">...</p>

.foot-bg-primary

.foot-bg-secondary

.foot-bg-link

.foot-bg-light

.foot-bg-mid

.foot-bg-dark

.foot-bg-error

.foot-bg-success

<p class="foot-bg-primary">...</p>
<p class="foot-bg-secondary">...</p>
<p class="foot-bg-link">...k</p>
<p class="foot-bg-light">...</p>
<p class="foot-bg-mid">...</p>
<p class="foot-bg-dark">...</p>
<p class="foot-bg-error">...</p>
<p class="foot-bg-success">...</p>

The foot.css default colors CSS variables are the following:

--foot-primary-color: #434190;
--foot-secondary-color: #EBF4FF;
--foot-link-color: #0366d6;
--foot-light: #f7f7f9;
--foot-mid: #A0AEC0;
--foot-dark: #1A202C;
--foot-error: #E53E3E;
--foot-success: #48BB78;
Positioning classes

The positioning classes allow you to position elements on your pages.

Text positioning classes

.foot-txt-left

.foot-txt-right

.foot-txt-center

Full height / width classes

.foot-full-height-size

.foot-full-hwidth-size

Flex classes

.foot-flex

.foot-flex-justify-start

.foot-flex-justify-center

.foot-flex-justify-end

.foot-flex-justify-between

.foot-flex-justify-around

.foot-flex-align-start

.foot-flex-align-center

.foot-flex-align-end

.foot-flex-vertical-dir

.foot-flex-horizontal-dir

.foot-flex-centered

Padding / Margin classes

.foot-pa-1 all-around padding of 1em

.foot-pa-2 all-around padding of 2em

.foot-pa-y vertical padding of 1em

.foot-pa-y vertical padding of 2em

.foot-pa-x horizontal padding of 1em

.foot-pa-x horizontal padding of 2em

.foot-pt-1 top padding of 1em

.foot-pt-2 top padding of 2em

.foot-pb-1 bottom padding of 1em

.foot-pb-2 bottom padding of 2em

.foot-pl-1 left padding of 1em

.foot-pl-2 left padding of 2em

.foot-pr-1 right padding of 1em

.foot-pr-2 right padding of 2em

.foot-ma-1 all-around margin of 1em

.foot-ma-2 all-around margin of 2em

.foot-ma-y vertical margin of 1em

.foot-ma-y vertical margin of 2em

.foot-ma-x horizontal margin of 1em

.foot-ma-x horizontal marging of 2em

.foot-mt-1 top margin of 1em

.foot-mt-2 top margin of 2em

.foot-mb-1 bottom margin of 1em

.foot-mb-2 bottom margin of 2em

.foot-ml-1 left margin of 1em

.foot-ml-2 left margin of 2em

.foot-mr-1 right margin of 1em

.foot-mr-2 right margin of 2em

Display utility classes

Hide

The display utility classes allow you to display or hide certain elements.

.foot-hidden will apply display: none; to your element.

Responsive show / hide

.foot-[xs, sm, md, lg, xl]-hide and .foot-[xs, sm, md, lg, xl]-show will hides or shows elements according to a specific viewport sizes.

xs viewport width is smaller or equal to 480px

sm viewport width is smaller or equal to 600px

md viewport width is smaller or equal to 840px

lg viewport width is smaller or equal to 960px

xl viewport width is smaller or equal to 1280px