FiSS is a CSS library based on the Fibonacci sequence.
There are also some generic classes like text alignment, colors and responsive classes.
The .zip file contains a minified version and .less version.
Last update: 6 Nov 2021.
Fiss is released under Expat License.
To use it you have to load the library in your html page:
< link href="fiss.min.css" rel="stylesheet" >
Done, you can use it:
< div class="fiss-class-here" > your content here < /div >
A copy of the following user guide is available in the download file.
Fibonacci classes
Headers and paragraphs
Description:
All headers and paragraphs will have a default Fibonacci bottom space.
Details:
h1, h2, h3, h4, h5, h6 {margin:0 0 21px 0;}
p {margin:0 0 13px 0;}
Margin:
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
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
Description:
Provides predetermined font sizes. Every set of fonts (1,2,3) provides three dimensions title, big, normal, small.
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.
Details:
.f-size-1-title {font-size:42px;line-height:47px;}
.f-size-1-big {font-size:26px;line-height:31px;}
.f-size-1-normal {font-size:16px;line-height:21px;}
.f-size-1-small {font-size:13px;line-height:18px;}
.f-size-2-title {font-size:37;line-height:42px;}
.f-size-2-big {font-size:23px;line-height:28px;}
.f-size-2-normal {font-size:14px;line-height:19px;}
.f-size-2-small {font-size:12px;line-height:17px;}
.f-size-3-title {font-size:47;line-height:52px;}
.f-size-3-big {font-size:29px;line-height:34px;}
.f-size-3-normal {font-size:18px;line-height:23px;}
.f-size-3-small {font-size:15px;line-height:20px;}
.f-bold {font-weight:bold;}
.f-normal {font-weight:normal;}
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:
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:
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:
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:
Description:
Classes for using the float property.
Details:
.f-left {float:left;}
.f-right {float:right;}
Responsive an embed video:
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 input and textarea elements:
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" / >
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;}
}
V. 3.1
V. 3.0
V. 2.3
V. 2.2
FiSS - Copyright 2019-2021 Matteo Bersani
FiSS is under Expat License.