Femto.css Documentation ("Wiki")

The purpose of this file is to explain how to use the Femto.css CSS framework for people who doesn't know how to use it for creating their websites.

This file assumes that you have basic knowledge of HTML5, CSS and maybe a bit of javascript.

Downloading / Getting Started

See the README.md file, it explains step by step how to download the femto.css framework for using it.

Understanding the framework

Femto.css is a grid-based framework, it uses the CSS grids to order some "mandatory" page elements, these elements are:

<nav> - the top navigation bar, it's responsive and its only purpose is to help the user browse the website
<header> - the website header, it's supposed to contain a title, a motd/slogan and/or a brief description about your website.
<main> the website body/main content, full of useful information and/or important stuff.
<footer> - the footer, it may contain links, your website license and other secondary stuff.

Starting to write your website HTML

Considering the basic structure of a femto.css website (the elements listed above), your initial "index.html" file should look like this:

<!doctype html>
<html>
<head>
    <title>My awesome website</title>
    <link rel="stylesheet" href="femto.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="femto.js"></script>
</head>
<body>

<!-- this is the top navigation bar, the only class required is femto-nav-logo, so femto.js will know which links not to hide on mobile phones -->
<nav>
    <a class="femto-nav-logo" href="index.html">My awesome website</a>
    <a href="https://notabug.org/nokoru/femtocss">Femto.css</a>
    <a href="https://notabug.org">NotABug</a>
    <a href="https://wikipedia.org/">Wikipedia</a>
</nav>

<!-- this is the header, appears below the nav bar -->
<header>
    <h1>My awesome website!</h1>
    <strong>My website is awesome</strong>
</header>

<!-- this is the main content of your website -->
<main>
    <p>
    I'm a human and my website is such an awesome website! Oh yeah!
    lorem ipsum, quia dolor sit amet consectetur adipisci[ng]velit, sed quia non-numquam [do] eius modi tempora,
    utlabore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum[d] exercitationem
    ullam corporis suscipitlaboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
    reprehenderit, qui inea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat,
    quo voluptas nulla pariatur
    </p>
    
    <p>
    <img src="my_awesome_image.png">
    </p>
    
    <h2>A List
    <ul>
        <li>this is just a list
        <li>there's nothing special about it
        <li>this is the third element of the list
        <li>pls stop reading this, i have no more elements to show u!
    </ul>
</main>

<!-- this is the footer (aka "the bottom of your page") -->
<footer>
    Thank you mom, I made an awesome website!
    <br>
    This page is CC0 (public domain)
</footer>

</body>
</html>

YOU DID IT! OH, YEAH! YOU. DID. IT! YOU JUST CREATED A WEBSITE USING FEMTO.CSS!

IMPORTANT

Always include the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag inside the <head>, so mobile phones will be properly detected by the CSS stylesheet.

Now what?

Well, you can learn some other things you can do using by using some CSS classes or just adding elements.

Femto.css extra features

Forms

I assume that everyone who's reading this document knows how to insert a <form> in HTML, well, Femto.css automatically styles your forms to look nice.

Colored buttons

Need a "Get Started" or a "Cancel" button? Use the Femto's colored buttons!

<a class="femto-btn-1" href="javascript:;">Get Started</a>
<a class="femto-btn-2" href="javascript:;">Home</a>
<a class="femto-btn-3" href="javascript:;">Buy now</a>

There are 5 different colors, you can customize them by modifying your website theme file or by adding more colored buttons.

"On hover zoom" elements

This is useful for things like SVG buttons or for an image gallery.

<img class="femto-zoom-on-hover" src="my_website_icon.svg" alt="visit my website!">

Development

Did I miss something?

You can implement it! Or you can create an issue if you have suggestions and you don't want to implement anything to Femto.css

If you want to send a pull request, my only appeal is: please keep the source code clean!

Something's wrong? (bugs)

You can open an issue and I'll try to solve your problem.