INTRO GETTING STARTED Setup BUILDING STUFF Page basics — THE GRID Responsiveness Helpers — TYPOGRAPHY Type sizing Code Helpers — COLOUR Base scheme All colours Using them — BUTTONS — FORMS — TABS — MODALS

F*ck I couldn't think of a name

DOWNLOAD v2.3.0

or, check it out on

Github.

FICTOAN is a simple HTML+CSS boilerplate that’s intuitive, modular, and responsive.

Most sites be like, “For devs, by devs”. So, in order to restore balance in the Universe, this framework is aimed at web newbies and designers starting to code.

But hey, don’t run away if you’re a pro dev. Try it, you might just fall in love.

The sell

It’s intuitive.

FICTOAN uses straight-forward and intuitive class names such as .horizontal-center-this, .no-margin-top, .center-on-mobile and so on. Simple and easy to recollect.

It’s modular.

Styling for elements are like a jigsaw puzzle— take a .button, simply add .bg-red, .shape-circular and .no-shadow to get a red, round button without a shadow. It’s like playing with Lego.

It’s responsive.

The grid is completely responsive, and uses the popular 12-column layout. It also has specific classes for tablet portrait, landscape and mobile breakpoints, which means you have complete control of the layout all the time.

It’s awesome.

FICTOAN is the path to nirvana, is capable of faster-than-light travel, and runs on nuclear fusion energy. But all that is for the next version. Right now it’s great for building web pages that look nice out of the box.


Getting started

Download

Hit that fancy button to get the zip file of the latest version. Comes with a nice empty template.html that’s just waiting for your content.

DOWNLOAD v2.3.0
Source

If you’re the nerdier type, head to Github, where you can look at the code and have a good laugh. Or contribute. Your call.

Do you even SASS, bro?

FICTOAN uses SCSS, which is basically CSS on steroids. It’s a preprocessor for regular CSS, and adds a lot of extra features such as variables, nested style rules, mixins and what not. But keep in mind, browsers can’t read SASS code, so we will need to transpile to CSS everytime we make changes.

No? Install it.

Worry not. Just head here and install the preprocessor on your machine. I recommend the command-line method, its painless, and it’s time we all started using CLI anyway. You’ll find everything you need on that site. We’ll be using SCSS, because it’s easier to understand than the SASS syntax.


Setup

The folder structure

This is the folder structure you should see after you extract the zip file locally. Inside the main folder, there’re separate folders for CSS/SCSS, icons, and images. The HTML files are all in the root folder itself. Inside the css folder, there are three folders— vendor, fictoan, and this-project.

/vendor

The vendor folder contains any third-party CSS files necessary for FICTOAN to work properly. Add all your externally-linked files in here. Right now, it’s got only one file—

normalize.scss is a nifty little file that has a bunch of rules to force elements to render consistently across different browsers and platforms. Think of it as a standardised baseline for elements to follow.

/fictoan

The fictoan folder is the core of the framework. It’s the engine under the hood.

_main-fictoan.scss is the single place where all the FICTOAN files are all brought together in a particular order for transpiling.

/fictoan/base

_reset-fictoan.scss basically builds on normalize.scss with a few custom rules to make our lives easier. Some of its rules are opinionated, though.

_variables-fictoan.scss contains all the styling variables used in FICTOAN. SCSS variables allow you to set attribute values globally, so that you don’t have to set them individually each time.

_layout-fictoan.scss has all the rules for grid and general layout behaviour. Also has media-queries for various screen sizes.

_utilities-fictoan.scss, as the name suggests, has classes for your margins, paddings, icon sizes, alignments and a few custom elements as well.

/fictoan/components

Elements within FICTOAN is broken down into meaningful groups, so that you can find what you’re looking for easily. Also, I’m OCD like that.

/this-project

styles-this-project.scss is for project-specific styling you might need. Having it on a separate file makes it easier to update FICTOAN (which you do by replacing old files with newer ones).

And finally, main-fictoan.scss loads all the other SCSS files in a particular order, so that styling properly cascades down the file order.


    fictoan
    |
    |—— css
    |    |—— main.scss
    |    |
    |    |—— vendor
    |    |    |—— _normalize.scss
    |    |    |—— _new-moon.scss
    |    |
    |    |
    |    |—— fictoan
    |    |    |—— _main-fictoan.scss
    |    |    |
    |    |    |—— base
    |    |    |   |—— _reset-fictoan.scss
    |    |    |   |—— _variables-fictoan.scss
    |    |    |   |—— _layout-fictoan.scss
    |    |    |   |—— _styles-fictoan.scss
    |    |    |
    |    |    |—— components
    |    |        |—— _ff-responsiveness.scss
    |    |        |—— _ff-colours.scss
    |    |        |—— _ff-typography.scss
    |    |        |—— _ff-header.scss
    |    |        |—— _ff-inputs.scss
    |    |        |—— _ff-buttons.scss
    |    |        |—— _ff-sidebar.scss
    |    |        |—— _ff-tab-bar.scss
    |    |
    |    |
    |    |—— this-project
    |        |—— _styles-this-project.scss
    |
    |
    |—— icons
    |    |—— all icon files in svg
    |
    |—— images
    |    |—— all image files
    |
    |
    |—— index.html
    |
    |—— template.html
    |
    |—— README.md
    |
    |—— LICENSE

HTML setup

Now, for the HTML setup. You can either jump right to the template.html, which is an empty file with the basic .row and .portion blocks already set up for you. All you have to do is fill in your content as you want it. Feel free to add and remove blocks as you see fit.

But if you’d like to start afresh, make sure you include the necessary files at the top of your HTML file. Note that we’re including a CSS file— the SCSS we write is transpiled into CSS, which is understood by the browser.

    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="images/favicon.png" type="image/png">

        <!--  This will import all the necessary files in one go  -->
        <link rel="stylesheet" href="css/main.css" type="text/css">

        <title>Your page name</title>
    </head>

That’s it! You’re good to go. But that was the easy part, now to get into the meat of the madness, but fear not, this document will be the shining light in your hour of darkness. FICTOAN is built in such a way that it’s extremely easy for newbies to pick up on, so it really shouldn’t be that much of a hassle.


Building stuff

Page basics

To begin with, FICTOAN has a .all-content class that places, well, all your content in the centre of the page, with equal padding on the left and right.

This padding automatically increases and decreases depending on the viewport width using media queries, so that your content doesn’t stick to the screen edges and looks good at any resolution. The padding is also set in vw units, meaning it takes into account viewport-width instead of static pixels.

Of course, if your prefer edge-to-edge content, you can just skip using this class.


    <head>
        ...
    </head>

    <body>
        <div class="all-content">
            All your content goes here
        </div>
    </body>

This is .all-content
 
 

The grid

A digital frontier...I tried to picture clusters of infor— oh. Right. Sorry.

FICTOAN uses a simple 12-column grid for layout. Each horizontal section on your page is a .row, containing .portion divs of various widths. The children of the .row all need to have a .portion class, along with a width class. These width classes range from .whole, whose width is 100% of the .row, to .one-twelfths, which is 8.33%.

Same-width columns

All the portion width classes have simple fraction-based names, such as .half, .three-fourths, .one-fifth, .seven-twelfths and the like. Pretty easy to remember. In this way, you can have multiple equal width .portion elements in a .row.

If you don’t specify a width class for a .portion, it reverts back to a full-width element.


    <!-- FULL WIDTH -->
    <div class="row">
        <div class="portion whole">
            ...
        </div>
    </div>

    <!-- EQUAL THIRDS -->
    <div class="row">
        <div class="portion one-third">
            ...
        </div>
        <div class="portion one-third">
            ...
        </div>
        <div class="portion one-third">
            ...
        </div>
    </div>
    .
    .
    .
    and so on. You get the gist, right?

.whole

.half

.half

.two-thirds

.one-fourth

.three-fourths

.one-fifth

.four-fifths

.one-sixth

.five-sixths

.one-seventh

.six-sevenths

.one-eighth

.seven-eighths

.one-ninth

.eight-ninths

.one-tenth

.nine-tenths

.one-eleventh

.ten-elevenths
 

.one-twelfth

.eleven-twelfths
 


Unequal-width columns

You can have unequal widths too, you know. Basically, the widths of the portions must add up to 1, in terms of fractions.

But technically, you can have total width that doesn’t approach 1, but it’s generally not advisable— Don’t leave the rows hangin’, they don’t like that...it’s bad form, you know.


    <!-- UNEQUAL WIDTHS  -->
    <div class="row">
        <div class="portion one-tenth">
            ...
        </div>
        <div class="portion two-sevenths">
            ...
        </div>
        <div class="portion one-twelfth">
            ...
        </div>
        <div class="portion four-elevenths">
            ...
        </div>
        <div class="portion one-sixth">
            ...
        </div>
    </div>

.row

.one-tenth
 

.two-sevenths
 

.one-twelfth

.four-elevenths
 

.one-sixth
 


Many multi-width columns

Ok, now, if you need to stack divs of such unequal widths all into a container, you can use the .box class instead of the .row. Now you can dump as many .portion elements inside as you like. You’d need help for your psychosis, but your divs won’t break.


    <!-- UNEQUAL WIDTHS, MORE THAN PAGE WIDTH  -->
    <div class="box">
        <div class="portion three-elevenths">
            ...
        </div>
        <div class="portion one-eighth">
            ...
        </div>
        <div class="portion three-twelfths">
            ...
        </div>
        <div class="portion three-sevenths">
            ...
        </div>
        <div class="portion four-ninths">
            ...
        </div>
        <div class="portion four-sevenths">
            ...
        </div>
        <div class="portion one-sixth">
            ...
        </div>
    </div>

.box

.three-elevenths

.one-eighth

.three-twelfths

.three-sevenths

.four-ninths

.four-sevenths

.one-sixth


Nested grids

You can nest your .row divs inside of more .row divs, as many times as you want. But be wary— it’s a slippery slope, you might never find your way out.

.row

.half

.row

.half

.half

.half


Responsive classes

FICTOAN has four width-range buckets to segregate responsiveness behaviour. They are desktop (default), tablet landscape, tablet portrait, and mobile.

Mobile

Up to 599px

Tablet portrait

From 600px to 899px

Tablet landscape

From 900px to 1199px

Desktop

From 1200px


Content padding

FICTOAN is completely responsive, maintaining a coherent page layout across various resolutions. The .all-content class’ padding resizes with screen width, allowing for easy readability.

Currently, for managing this padding, there are six breakpoints, each with progressively increasing padding, both left and right. You can over-ride this though, with specific padding classes.


    @media all and (max-width: 599px) {
        .all-content { padding: 0 2vw; }
    }

    @media all and (min-width: 600px) {
        .all-content { padding: 0 4vw; }
    }

    @media all and (min-width: 900px) {
        .all-content { padding: 0 8vw; }
    }

    @media all and (min-width: 1200px) {
        .all-content { padding: 0 10vw; }
    }

    @media all and (min-width: 1800px) {
        .all-content { padding: 0 12vw; }
    }

    @media all and (min-width: 2400px) {
        .all-content { padding: 0 16vw; }
    }


For other devices

Apart from the overall content padding, there are a quite a few other classes you can use. FICTOAN breaks down responsive behaviour into three main buckets— mobile, tablet portrait, and tablet landscape. Everything else is considered as desktop.

These classes are all suffix classes, meant to be used along with the portion divs. As shown below, you can use them to force a particular layout for a row, on a particular width range. You can even set different width on different devices.


    <div class="row">
        <div class="portion  one-sixth  one-fourth-on-tab-ls  one-third-on-tab-pt  half-on-mobile"></div>
    </div>

The above .portion does exactly what its classes dictate— it is one-sixth of the parent width by default (on desktops), quarter-width on tablet landscape, a third on tablet portrait, and finally, half-width on mobile.

In this manner, you can use any combination of widths to control your layout on different resolutions. As you can see, the class names are all plain english, not cryptic abbreviations and numerals.


Forcing layouts

On the other hand, suppose you want a layout to remain the same across all devices, and force that behaviour always, FICTOAN’s got you covered.

Depending on the breakpoint, you can apply any of the following classes. Just add these to the .row div where you want to force the layout.


    <div class="row  retain-layout-on-tab-ls  retain-layout-on-tab-pt  retain-layout-on-mobile">
        <div class="portion one-third">...</div>
        <div class="portion one-third">...</div>
        <div class="portion one-third">...</div>
    </div>

The .row here will have three .portion divs, each one-third of the width. Because the retain classes are applied to the parent .row, the portions will remain one-third always, no matter the device or resolution.

You can also remove any of the classes to revert the row back to the default behaviour. So removing .retain-layout-on-tab-pt means the portions won’t stay 1/3 on tablet portrait— 600px to 899px.


Nifty helpers

Default behaviour

.portion

Content goes here

.portion

Content goes here

.lesser-gaps

.portion

Content goes here

.portion

Content goes here

.no-gaps

.portion

Content goes here

.portion

Content goes here


Typography

The typefaces

Typography is an important part of FICTOAN, and there are myriad classes focused just on typography. To keep things free, the framework uses fonts from Google Fonts, handpicked beauties just for you.

There are three typefaces, each for one category commonly used on web pages— one sans for body, one serif for fancy occasions, and one geometric monospace for displaying code.


Typescale

FICTOAN uses a minor-third scale-factor to fix the font-sizing ratio for headings. First, we set the base font size as 1em, or 16px. This is the default font size for our HTML body.

Then, we do a fancy power function calculation, and bam! We can now get all heading sizes from a single value. This means that each heading size is 1.2 times larger than the previous, like so—

h1

You’re just my type.

h2

You’re just my type.

h3

You’re just my type.

h4

You’re just my type.

h5

You’re just my type.

h6

You’re just my type.

    $baseFontSize : 1em; // =16px
    $scaleFactor  : 1.2;

    // Power function — for scaleFactor usage
    @function pow($number, $exponent) {
        $value : 1;

        @if $exponent > 0 {
            @for $i from 1 through $exponent {
                $value: $value * $number;
            }
            } @else if $exponent < 0 {
                @for $i from 1 through -$exponent {
                $value: $value / $number;
            }
        }

    @return $value;
    }

    //  Using that value to set heading sizes
    h1 { font-size : $baseFontSize*pow($scaleFactor, 8); }  // 4.29982em
    h2 { font-size : $baseFontSize*pow($scaleFactor, 6); }  // 2.98598em
    h3 { font-size : $baseFontSize*pow($scaleFactor, 4); }  // 2.0736em
    h4 { font-size : $baseFontSize*pow($scaleFactor, 3); }  // 1.728em
    h5 { font-size : $baseFontSize*pow($scaleFactor, 2); }  // 1.44em
    h6 { font-size : $baseFontSize*pow($scaleFactor, 1); }  // 1.2em


Code

FICTOAN also has a pretty extensive syntax highlighting system. Although it uses prismJS for the syntax identification, the colours are all based off of FICTOAN’s colour scheme.

To offer a consistent, reliable performance, the prismJS is included locally, inside the js folder. By default, it offers highlighting for Markup, CSS, SCSS JS, JSON and C-like languages, but you can add for as many as you want.

    <pre>
        <code class="language-html">
            <p>Wow, this is some meta shit!</p>
        </code>
    </pre>

That’s all you need for making your code colourful and readable. Just add the language- prefix and the name of the language, in the code class, and you’re good to go.

You can even make your own colour scheme, just edit the values in the fictoan-code-colours.scss file.


Nifty helpers

Text sizing

There’s also very convenient text-sizing classes that you can use in your inline span elements. Simply add the appropriate class.

These too are sized using the scaleFactor calculation, so they too will resize when if you change $baseFontSize.

Your text can be huge, large, normal, small, and tiny.


    .text-tiny   { font-size : $baseFontSize*pow($scaleFactor,-2); }
    .text-small  { font-size : $baseFontSize*pow($scaleFactor,-1); }
    .text-normal { font-size : $baseFontSize*pow($scaleFactor, 0); }
    .text-large  { font-size : $baseFontSize*pow($scaleFactor, 4); }
    .text-huge   { font-size : $baseFontSize*pow($scaleFactor, 8); }
                

Colour

Colour is another integral part of FICTOAN. The framework has a simple complementary scheme set up to provide a basic out-of-the-box usage, and a general spectrum for more nuanced control.

You’ll also notice that the colour format used here is hsl and hsla. HSL is an intuitive system, unlike abstract formats like RGB and Hex. You can read more about why, here.

Complements of FICTOAN

Primary hue + white

 
$colorTint
lighten($colorHue, 25%);

PRIMARY HUE

 
$colorHue
hsl(10, 90%, 70%);

Primary hue + black

 
$colorShade
darken($colorHue, 25%);

Primary hue + more black

 
$colorShade-2
darken($colorHue, 60%);

Complement of primary hue

 
$colorAccent
complement($colorHue);
How this works

The colour scheme in FICTOAN is complementary, as you can see. The system is built using simple SASS functions, allowing more nuanced user control over the scheme. Only the primary colour is set with a hard-coded value, rest are all derived using that value.

This means that if you change the $colorHue variable, the rest of the four colours will also change accordingly. You can over-ride the SASS functions as you like, and you can find a full list of what’s possible here. Play around and create your own custom schemes with these functions.

The many colours of FICTOAN

There’s also a whole bunch of preset colours you can use, each with one lighter and one darker variant. The lightening and darkening value is again controlled by SASS functions, mostly in the 10% to 30% range.

Because we’re using SASS functions, we don’t have to come up with individual values of the light and dark colours, instead, we just have to specify the hue, and variants are calculated automatically.


Using these colours

SASS also makes it very easy to use the same values over and over again without repetition. Because we’ve set the colour value as a variable, it becomes very easy to reuse these for other purposes too.

We can now use these colours for backgrounds, text and even icons. Just add the appropriate class to the appropriate element. The colours remains the same, only the prefix differs from element to element.


Buttons

Buttons come a variety of shapes and sizes in FICTOAN, and like all other components in here, they are modular, and the class names fit together like a jig-saw puzzle.

Ideally, you’ll be using the a tag with specific classes to give the appearance of a button. Each class comes with its own particular styling rules, add and remove as you please.

<a class="ff-button shape-rounded bg-blue shadow-hard">CLICK ME</a>
<a class="ff-button shape-curved bordered">CLICK ME</a>
<!-- bg-gradient uses color-hue and color-shade classes -->
<a class="ff-button shape-circular bg-gradient shadow-soft">
    <img class="icon-small" src="icons/icon-book.svg">
</a>
<a class="ff-button bg-none">CLICK ME</a>
<a class="ff-button bg-yellow shape-curved disabled">CAN’T CLICK ME</a>

Forms

Input fields are pretty straight-forward, with a simple grey line at the bottom by default, which turns into the $colorHue variable on focus.

Other elements like the checkbox and radio button also use the same principle, using the same variable when selected.

<!-- Text fields -->
<input class="ff-input" placeholder="Username">
<input class="ff-input input-success">
<input class="ff-input input-error">

<!-- Checkbox -->
<div class="ff-checkbox">
    <input type="checkbox" id="toggle-1" />
    <label class="ff-checkbox-label" for="toggle-1"></label>
    <label class="ff-checkbox-label" for="toggle-1">Default</label>
</div>

<!-- Radio button -->
<div class="ff-radio">
    <input type="radio" id="radio-1" name="radioset-1" />
    <label class="ff-radio-label" for="toggle-1"></label>
    <label class="ff-radio-label" for="toggle-1">Default</label>
</div>

Tabs

Tabs in FICTOAN are CSS-only, and use the radio-button hack for displaying the corresponding content. In desktop view, they’re placed left to right.

And in mobile view, they’re stacked vertically, to behave like an accordion menu, expanding and collapsing on select.


    <div class="ff-tabs">
        <input class="ff-tab-select" type="radio" name="tabs" id="tab-1" checked>
        <label class="ff-tab-label" for="tab-1">Tab One</label>

        <div class="ff-tab-content">
            <p>Lorem ipsum dolor</p>
        </div>

        <input class="ff-tab-select" type="radio" name="tabs" id="tab-2">
        <label class="ff-tab-label" for="tab-2">Tab Two</label>

        <div class="ff-tab-content">
            <p>Lorem ipsum dolor</p>
        </div>
    </div>

                

Lorem ipsum dolor

Lorem ipsum

Lorem


Modals

Modals are CSS-only, and again uses the :target selector. Modals basically use a full-page overlay with a row and portion element inside.

The modal box itself is a simple .card element, with customisable background colour, shape and so on.


    <a href="#modal01">Open Modal</a>

    <div id="modal01" class="ff-modal">
        <div class="row margin-top-small">
            <div class="portion one-third"></div>

            <div class="portion one-third">
                <div class="ff-modal-box card bg-white shape-rounded shadow-soft">
                    <h5 class="margin-bottom-tiny">Something</h5>
                    <a href="#close">OK, Fine</a>
                </div>
            </div>

            <div class="portion one-third"></div>
        </div>
    </div>

                
Open Modal