Contact

FiSS v. 2.1

FiSS is a CSS library that provides classes based on the Fibonacci sequence.
In the v.2.1 there are also some generic classes that can help you in fast development, like text alignment, colors and some responsive classes.
The package is provided with a minified version and .less version.
This library comes with the GNU GPL license (v.3)

To use it you have to load the library in your html page:

< link href="fiss.2.1.min.css" rel="stylesheet" >

Then, use the available classes where you want:

< div class="fiss-2.1-class-here" > your content here < /div >

Below there are the list of classes.
A copy of the following user guide is available with the library.

USER GUIDE

Fibonacci classes

Margin:

Classes: .mX, .mX-t, .mX-r, .mX-b, .mX-l, .mX-tb, .mX-rl
Sizes: Replace 'X' with all of this numebers: 0,1,2,3,5,8,13,21,34,55,89,144,233.

Description:

.mX : provide a margin of X px on every side (top,right,bottom,left) of the element.
.mX-t : provide a margin of X px on the top of the element.
.mX-r : provide a margin of X px on the right of the element.
.mX-b : provide a margin of X px on the bottom of the element.
.mX-l : provide a margin of X px on the left of the element.
.mX-tb : provide a margin of X px on top and bottom of the element.
.mX-rl : provide a margin of X px on the right and left of the element.

Details:

.m0 {margin:0px;}
.m0-t {margin-top:0px;}
.m0-r {margin-right:0px;}
.m0-b {margin-bottom:0px;}
.m0-l {margin-left:0px;}
.m0-tb {margin-top:0px;margin-bottom:0px;}
.m0-rl {margin-right:0px;margin-left:0px;}
.m1 {margin:1px;}
.m1-t {margin-top:1px;}
.m1-r {margin-right:1px;}
.m1-b {margin-bottom:1px;}
.m1-l {margin-left:1px;}
.m1-tb {margin-top:1px;margin-bottom:1px;}
.m1-rl {margin-right:1px;margin-left:1px;}
.m2 {margin:2px;}
.m2-t {margin-top:2px;}
.m2-r {margin-right:2px;}
.m2-b {margin-bottom:2px;}
.m2-l {margin-left:2px;}
.m2-tb {margin-top:2px;margin-bottom:2px;}
.m2-rl {margin-right:2px;margin-left:2px;}
.m3 {margin:3px;}
.m3-t {margin-top:3px;}
.m3-r {margin-right:3px;}
.m3-b {margin-bottom:3px;}
.m3-l {margin-left:3px;}
.m3-tb {margin-top:3px;margin-bottom:3px;}
.m3-rl {margin-right:3px;margin-left:3px;}
.m5 {margin:5px;}
.m5-t {margin-top:5px;}
.m5-r {margin-right:5px;}
.m5-b {margin-bottom:5px;}
.m5-l {margin-left:5px;}
.m5-tb {margin-top:5px;margin-bottom:5px;}
.m5-rl {margin-right:5px;margin-left:5px;}
.m8 {margin:8px;}
.m8-t {margin-top:8px;}
.m8-r {margin-right:8px;}
.m8-b {margin-bottom:8px;}
.m8-l {margin-left:8px;}
.m8-tb {margin-top:8px;margin-bottom:8px;}
.m8-rl {margin-right:8px;margin-left:8px;}
.m13 {margin:13px;}
.m13-t {margin-top:13px;}
.m13-r {margin-right:13px;}
.m13-b {margin-bottom:13px;}
.m13-l {margin-left:13px;}
.m13-tb {margin-top:13px;margin-bottom:13px;}
.m13-rl {margin-right:13px;margin-left:13px;}
.m21 {margin:21px;}
.m21-t {margin-top:21px;}
.m21-r {margin-right:21px;}
.m21-b {margin-bottom:21px;}
.m21-l {margin-left:21px;}
.m21-tb {margin-top:21px;margin-bottom:21px;}
.m21-rl {margin-right:21px;margin-left:21px;}
.m34 {margin:34px;}
.m34-t {margin-top:34px;}
.m34-r {margin-right:34px;}
.m34-b {margin-bottom:34px;}
.m34-l {margin-left:34px;}
.m34-tb {margin-top:34px;margin-bottom:34px;}
.m34-rl {margin-right:34px;margin-left:34px;}
.m55 {margin:55px;}
.m55-t {margin-top:55px;}
.m55-r {margin-right:55px;}
.m55-b {margin-bottom:55px;}
.m55-l {margin-left:55px;}
.m55-tb {margin-top:55px;margin-bottom:55px;}
.m55-rl {margin-right:55px;margin-left:55px;}
.m89 {margin:89px;}
.m89-t {margin-top:89px;}
.m89-r {margin-right:89px;}
.m89-b {margin-bottom:89px;}
.m89-l {margin-left:89px;}
.m89-tb {margin-top:89px;margin-bottom:89px;}
.m89-rl {margin-right:89px;margin-left:89px;}
.m144 {margin:144px;}
.m144-t {margin-top:144px;}
.m144-r {margin-right:144px;}
.m144-b {margin-bottom:144px;}
.m144-l {margin-left:144px;}
.m144-tb {margin-top:144px;margin-bottom:144px;}
.m144-rl {margin-right:144px;margin-left:144px;}
.m233 {margin:233px;}
.m233-t {margin-top:233px;}
.m233-r {margin-right:233px;}
.m233-b {margin-bottom:233px;}
.m233-l {margin-left:233px;}
.m233-tb {margin-top:233px;margin-bottom:233px;}
.m233-rl {margin-right:233px;margin-left:233px;}

Padding

Classes: .pX, .pX-t, .pX-r, .pX-b, .pX-l, .pX-tb, .pX-rl
Sizes: Replace 'X' with all of this numebers: 0,1,2,3,5,8,13,21,34,55,89,144,233.

Description:

.pX : provide a padding of X px on every side (top,right,bottom,left) of the element.
.pX : provide a padding of X px on every side (top,right,bottom,left) of the element.
.pX-t : provide a padding of X px on the top of the element.
.pX-r : provide a padding of X px on the right of the element.
.pX-b : provide a padding of X px on the bottom of the element.
.pX-l : provide a padding of X px on the left of the element.
.pX-tb : provide a padding of X px on top and bottom of the element.
.pX-rl : provide a padding of X px on the right and left of the element.

Details:

.p0 {padding:0px;}
.p0-t {padding-top:0px;}
.p0-r {padding-right:0px;}
.p0-b {padding-bottom:0px;}
.p0-l {padding-left:0px;}
.p0-tb {padding-top:0px;padding-bottom:0px;}
.p0-rl {padding-right:0px;padding-left:0px;}
.p1 {padding:1px;}
.p1-t {padding-top:1px;}
.p1-r {padding-right:1px;}
.p1-b {padding-bottom:1px;}
.p1-l {padding-left:1px;}
.p1-tb {padding-top:1px;padding-bottom:1px;}
.p1-rl {padding-right:1px;padding-left:1px;}
.p2 {padding:2px;}
.p2-t {padding-top:2px;}
.p2-r {padding-right:2px;}
.p2-b {padding-bottom:2px;}
.p2-l {padding-left:2px;}
.p2-tb {padding-top:2px;padding-bottom:2px;}
.p2-rl {padding-right:2px;padding-left:2px;}
.p3 {padding:3px;}
.p3-t {padding-top:3px;}
.p3-r {padding-right:3px;}
.p3-b {padding-bottom:3px;}
.p3-l {padding-left:3px;}
.p3-tb {padding-top:3px;padding-bottom:3px;}
.p3-rl {padding-right:3px;padding-left:3px;}
.p5 {padding:5px;}
.p5-t {padding-top:5px;}
.p5-r {padding-right:5px;}
.p5-b {padding-bottom:5px;}
.p5-l {padding-left:5px;}
.p5-tb {padding-top:5px;padding-bottom:5px;}
.p5-rl {padding-right:5px;padding-left:5px;}
.p8 {padding:8px;}
.p8-t {padding-top:8px;}
.p8-r {padding-right:8px;}
.p8-b {padding-bottom:8px;}
.p8-l {padding-left:8px;}
.p8-tb {padding-top:8px;padding-bottom:8px;}
.p8-rl {padding-right:8px;padding-left:8px;}
.p13 {padding:13px;}
.p13-t {padding-top:13px;}
.p13-r {padding-right:13px;}
.p13-b {padding-bottom:13px;}
.p13-l {padding-left:13px;}
.p13-tb {padding-top:13px;padding-bottom:13px;}
.p13-rl {padding-right:13px;padding-left:13px;}
.p21 {padding:21px;}
.p21-t {padding-top:21px;}
.p21-r {padding-right:21px;}
.p21-b {padding-bottom:21px;}
.p21-l {padding-left:21px;}
.p21-tb {padding-top:21px;padding-bottom:21px;}
.p21-rl {padding-right:21px;padding-left:21px;}
.p34 {padding:34px;}
.p34-t {padding-top:34px;}
.p34-r {padding-right:34px;}
.p34-b {padding-bottom:34px;}
.p34-l {padding-left:34px;}
.p34-tb {padding-top:34px;padding-bottom:34px;}
.p34-rl {padding-right:34px;padding-left:34px;}
.p55 {padding:55px;}
.p55-t {padding-top:55px;}
.p55-r {padding-right:55px;}
.p55-b {padding-bottom:55px;}
.p55-l {padding-left:55px;}
.p55-tb {padding-top:55px;padding-bottom:55px;}
.p55-rl {padding-right:55px;padding-left:55px;}
.p89 {padding:89px;}
.p89-t {padding-top:89px;}
.p89-r {padding-right:89px;}
.p89-b {padding-bottom:89px;}
.p89-l {padding-left:89px;}
.p89-tb {padding-top:89px;padding-bottom:89px;}
.p89-rl {padding-right:89px;padding-left:89px;}
.p144 {padding:144px;}
.p144-t {padding-top:144px;}
.p144-r {padding-right:144px;}
.p144-b {padding-bottom:144px;}
.p144-l {padding-left:144px;}
.p144-tb {padding-top:144px;padding-bottom:144px;}
.p144-rl {padding-right:144px;padding-left:144px;}
.p233 {padding:233px;}
.p233-t {padding-top:233px;}
.p233-r {padding-right:233px;}
.p233-b {padding-bottom:233px;}
.p233-l {padding-left:233px;}
.p233-tb {padding-top:233px;padding-bottom:233px;}
.p233-rl {padding-right:233px;padding-left:233px;}

Fonts

Classes: .f-size-1a, .f-size-1b, .f-size-1c, .f-size-2a, .f-size-2b, .f-size-2c, .f-size-3a, .f-size-3b, .f-size-3c

Description:

Provides predetermined font sizes. Every set of fonts (1,2,3) provides three dimensions (a,b,c).
There are also two classes to set the font-weight property.
In these font classes I use the phi number (golden ratio) instead the Fibonacci numbers because it's not easy to apply that numbers to a readable size. The Golden Ratio is another tool I actually use in my development (i.e. http://goldenentry.com).

Details:

.f-size-1a {font-size:16px;line-height:21px;}
.f-size-1b {font-size:26px;line-height:31px;}
.f-size-1c {font-size:42px;line-height:47px;}
.f-size-2a {font-size:14px;line-height:19px;}
.f-size-2b {font-size:23px;line-height:28px;}
.f-size-2c {font-size:37;line-height:42px;}
.f-size-3a {font-size:18px;line-height:23px;}
.f-size-3b {font-size:29px;line-height:34px;}
.f-size-3c {font-size:47;line-height:52px;}

.f-bold {font-weight:bold;}
.f-normal {font-weight:normal;}

Headers and paragraphs

Tags: h1, h2 , h3, h4, h5, h6 and p

Description:

All headers and paragraphs will have a default Fibonacci bottom space.

Details:

h1, h2, h3, h4, h5, h6 {margin:0 0 34px 0;}
p {margin:0 0 13px 0;}

Generic classes

The following classes are not based on the Fibonacci Sequence but they can be useful on development.
You can remove them if you just need the Fibonacci classes.

Background:

Classes: .b-black, .b-blu, .b-fuxia, .b-gray, .b-green, .b-orange, .b-red, .b-white, .b-yellow

Description:

Common colors to use as a background.

Details:

.b-black {background:#000000;}
.b-blu {background:#0000cc;}
.b-fuxia {background:#cc00cc;}
.b-gray {background:#f0f0f0;}
.b-green {background:#55cc55;}
.b-orange {background:#ffc107;}
.b-red {background:#cc0000;}
.b-white {background:#ffffff;}
.b-yellow {background:#cccc00;}

Text alignment & colors:

Classes:
.t-center, .t-left, .t-right
.t-black, .t-blu, .t-fuxia, .t-gray, .t-green, .t-orange, .t-red, .t-white, .t-yellow

Description:

Classes for text alignment and color.

Details:

.t-center {text-align:center;}
.t-left {text-align:left !important;}
.t-right {text-align:right !important;}

.t-black {color:#000000;}
.t-blu {color:#0000cc;}
.t-fuxia {color:#cc00cc;}
.t-gray {color:#f0f0f0;}
.t-green {color:#55cc55;}
.t-orange {color:#ffc107;}
.t-red {color:#cc0000;}
.t-white {color:#ffffff;}
.t-yellow {color:#cccc00;}

Display property:

Classes: .d-block, .d-inline, .d-inline-block, .d-none

Description:

Classes for using the display property.

Details:

.d-block {display:block;}
.d-inline {display:inline;}
.d-inline-block {display:inline-block;}
.d-none {display:none;}

Float:

Classes: .f-left, .f-right

Description:

Classes for using the float property.

Details:

.f-left {float:left;}
.f-right {float:right;}

Make responsive an embed video:

Classes: .video-responsive

Description:

This class makes responsive an embed video (for example from youtube)
How to use it:
< div class="video-responsive" > your iframe embed code < / div >

Details:

.video-responsive {position: relative;width: 100%;height: 0;padding-bottom: 51%;}
.video-responsive iframe {position: absolute;width: 100%;height: 100%;left:0;top:0;}

Responsive textarea:

Classes: .form-control

Description:

This class make an element 100% width till 610px screen width and then the element will have 610px width.
How to use it:
< input type="text" class="form-control" / div >

Details:

@media(max-width:610px){
.form-control {max-width:100%;}
.form-control textarea {width:100%; height:144px;}
}
@media(min-width:610px){
.form-control {max-width:610px;}
.form-control textarea {width:100%; height:233px;}
}

FiSS - Copyright (C) 2019 Matteo Giuseppe Bersani
This program comes with the GNU GPL license (v.3).
Ask the author if you didn't have received a copy of the license with this program.