About FLOZz Common

FLOZz common is just a simple collection of CSS I use on my websites, and yes, it is responsive.

This CSS collection is licensed under the WTFPL 2.0 license. You are free to modify and to use it on your own website, even for commercial use.

Download (.tar.gz) Development page

Examples

Subtext - link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper arcu a dui porta, vel congue nibh dapibus. Mauris congue ornare elit, nec feugiat est commodo at. Aliquam leo eros, congue nec felis id, porta facilisis nunc. Maecenas aliquet id elit nec cursus. Suspendisse fermentum magna sit amet metus aliquet ultricies. Aliquam condimentum odio vitae magna molestie interdum. Nam commodo nisi a sapien accumsan, a eleifend felis commodo. Suspendisse potenti. Morbi semper id arcu ut placerat. Suspendisse varius, justo venenatis consequat euismod, ante urna ullamcorper dolor, ut suscipit ante urna et diam. Cras libero magna, egestas at neque ut, lacinia tincidunt velit. Cras ac ullamcorper dolor, vitae vehicula urna.

hyperlink - italic - bold - strike - inline code - inline quote

  • This is a list
  • This is a second item...
  • ... and a third one

Blocs

Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper arcu a dui porta, vel congue nibh dapibus. Mauris congue ornare elit, nec feugiat est commodo at. Aliquam leo eros, congue nec felis id, porta facilisis nunc. Maecenas aliquet id elit nec cursus. Suspendisse fermentum magna sit amet metus aliquet ultricies. Aliquam condimentum odio vitae magna molestie interdum.

Confirmation: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper arcu a dui porta, vel congue nibh dapibus. Mauris congue ornare elit, nec feugiat est commodo at. Aliquam leo eros, congue nec felis id, porta facilisis nunc. Maecenas aliquet id elit nec cursus. Suspendisse fermentum magna sit amet metus aliquet ultricies. Aliquam condimentum odio vitae magna molestie interdum.

Warning: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper arcu a dui porta, vel congue nibh dapibus. Mauris congue ornare elit, nec feugiat est commodo at. Aliquam leo eros, congue nec felis id, porta facilisis nunc. Maecenas aliquet id elit nec cursus. Suspendisse fermentum magna sit amet metus aliquet ultricies. Aliquam condimentum odio vitae magna molestie interdum.

Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper arcu a dui porta, vel congue nibh dapibus. Mauris congue ornare elit, nec feugiat est commodo at. Aliquam leo eros, congue nec felis id, porta facilisis nunc. Maecenas aliquet id elit nec cursus. Suspendisse fermentum magna sit amet metus aliquet ultricies. Aliquam condimentum odio vitae magna molestie interdum.

This is a blockquote... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper arcu a dui porta, vel congue nibh dapibus. Mauris congue ornare elit, nec feugiat est commodo at. Aliquam leo eros, congue nec felis id, porta facilisis nunc. Maecenas aliquet id elit nec cursus. Suspendisse fermentum magna sit amet metus aliquet ultricies. Aliquam condimentum odio vitae magna molestie interdum.
// This is some code

var menuIsHidden = true;
var e_toggleMenu = document.getElementById("toggle-menu");
var e_header = document.getElementById("header");

e_toggleMenu.onclick = function(event) {
	if (menuIsHidden) {
		e_header.className = "openned";
		e_toggleMenu.className = "active";
	}
	else {
		e_header.className = "";
		e_toggleMenu.className = "";
	}
	menuIsHidden = !menuIsHidden;
};

Forms

Link

Buttons

Normal Normal w/icon .btn-med .btn-med w/icon .btn-big .btn-big w/icon
Default
.btn-gray

Heading 2

Heading 3

Heading 4