Fluidity

Fluidity

A Modern CSS3 & HTML5 Framework for Node.js & Stylus

What it is?

Fluidity is a CSS framework made for web designers
who would like a CSS framework simple enough to quickly express their ideas, smart enough to help with the mundane,
and lean enough to stay out of the way and let them write pure CSS3 syntax.

It's built using the awesome Stylesheet language Stylus and all the
super powers it has for working with CSS. Fluidity now includes normalize.css, some base-line
typography, a grid system that can be used semantically or with in-line classes to create both fluid-width and fixed-width
designs, a collection of transparent mixins that gracefully handle browser pre-fixes for CSS3 properties.

Who's it for?

Fluidity is for any web designer that knows how to use CSS and want to use CSS3 features now, a fluid semantic and responsive grid, and code their CSS in a clean and maintainable way using a powerful stylesheet language.
There is a slight learning curve for designers who have never used Stylus before, so it is highly recommended that
you familiarize yourself with the Stylus Stylesheet language and the Node.js enivironment.Both Node.js and Stylus are required to use Fluidity.

What it is not?

It is not a web design in a box. If you want a great looking design it's up to you to design it.

It is not a giant collection of classes to memorize. In fact, if you use HTML5 and the provided semantic grid, Fluidity will not require you to add any classes to your mark up.

It is not a library of widgets. While some designed UI elements like pills & tabs are provided in the optional modules there is no javascript provided for their functionality it's up to you to implement them.

It is not a collection of javascript plugins. In fact, no javascript is included with Fluidity at all, with the exception of some Node/Npm packaging stuff in the source which is not a part Fluidity itself.

It is not a series of shims, fixes, or browser hacks. Fluidity is targeted directly at HTML5. The CSS3 Mixins are transparent CSS3 syntax and cross-browser prefixes are handled with a vendors variable. If you have difficult browser compatibility requirements and need support for older browsers it is up to you to provide the shims and/or monkey patches.

Installation

With Node.js for Connect (Express) Based apps

You'll first need to install Node.js.
After you have Node installed you'll have access to 'npm'.

Stylus

Stylus

// Just use Normalize and the Grid
@import "fluidity/normalize"
@import "fluidity/semantic-grid"

Global Variables

There are a handful of global variables that you'll probably want to set in your .styl files before the @import statement for fluidity. These aren't required as there are some defaults, but you'll likely want to change at least some of them to suit your needs.

Variables

grid-width -This is the width of the grid in percentage for fluid-width or in pixels for fixed-width. Default is 100%

grid-min-width -This is the minimum width in pixels allowed by the grid. Default is 960px

base-font-size -This is the Base font size to use. Must be in ems Default is 1em

base-line-height -This is the default line-height to use. Must be in ems Default is 1.35em

base-color -This is the base color used for both the text of your site and is the basis for all other colors used throughout fluidity. The default is a very dark gray #111111

vendors -This variable is actually used by Stylus itself to determine browser prefixes to use for @keyframes among other things. Fluidity uses this variable for its own browser prefixes for its CSS3 mixins. The Default is webkit & moz.

Here is an example configuration that would be at the top of your .styl file making a fluid width grid down to mobile size, setting a base font-size and line-height, and allowing browser prefixes to be used for Webkit, Mozilla, and Opera.

Typography

Headings

Headings are in a standard typographic hierarchy and all other copy has sane font-sizes and line-heights.

Margins for headings are calculated based on base-font-size and base-line-height.

Headings Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Paragraphs have a readable line-height and clear margins. Other typography styles include strong & bold, emphasis & italic though they have been redefined in HTML5. Read about this redefining in the following quotedcitationWhat they're forW3C,2010 from Using <b> and <i> elements for more.

The Grid

Grid Configuration Variables

Stylus

Grid Configuration Variables

For example a grid-width of 100% and a grid-min-width of 320px would allow the layout to expand to the full width of any viewport and shrink down to the mobile friendly width of 320px, no smaller.

A Fixed Width
layout can be achieved by setting both grid-width and grid-min-width to the same width in px.

Creating a Grid

HTML

<!-- Semantic -->
<div id="your-container">
</div>

Stylus

#your-container
grid()

Stylus

#your-container
grid(50%,400px)

HTML

<!-- Non-Semantic -->
<div class="grid">
</div>

Stylus

@import "fluidity-non-semantic"

The Semantic Grid

The grid in Fluidity is highly versatile and easy to understand.
You apply the grid() mixin to which ever element you would like to contain the grid.
It can be done entirely in the Stylus/CSS and there's no need for an additional class in your HTML.

Using just the grid() mixin as it is, will instantiate a grid with the defaults set by the grid-width and grid-min-width variables but,
those variables can easily be overridden when you instantiate the grid by simply including them as arguments when you call the mixin.

The grid mixin takes two arguments the first for the grid-width and the second for grid-min-width.

The Non-Semantic Grid

The grid can also be instantiated in a non-semantic way by using the @import "fluidity-non-semantic" in your .styl files and the ".grid" class in your HTML.
This will instantiate a grid with the defaults set by the grid-width and grid-min-width variables.

Note:
Overriding the grid-width and grid-min-width variables with just the HTML class
is not possible in a non-semantic grid. You'll have to just use these variables in your Stylus code.

Sections & Spaces

A Different Kind of Grid.

Unlike other CSS grids, Fluidity does not use the same table-like concept of rows & columns.
Instead of the usual print inspired multi-column style grid where the designer has to think about how wide a column is, what
margins exist between them, and the usual "wait... how many columns wide is 315px?" Fluidity focuses on the screen and the varying
screensizes in our world by describing things in terms of percentage of screen size or exact pixels
which is much easier to visualize, plan around, and ultimately understand.

The grid in Fluidity is made up of Sections & Spaces. A Section is like a row in that it delineates a horizontal
area, but a Space is much different than a column in that it doesn't necessarily fill the entire vertical space of the Section
it's in. This means that a Section can contain Spaces in a floated manner as well as, in a rigid row and that means more freedom.

Sections

HTML

HTML

IMPORTANT! The following will only work if you are using @import "fluidity-non-semantic"
<!-- Non-Semantic -->
<div class="header">
</div>
<div class="section">
</div>
<div class="footer">
</div>

Semantic Sections

Sections are something that you shouldn't have to think too much about so long as, you are using the HTML5 <header>, <section>, and &ltfooter> element to divy up your content on screen.

Sections are automatically attached to several HTML5 elements, those elements are:

header

footer

section

You may also use the section() mixin in your stylus to define a section out of any other div tag.

Non-Semantic Sections

There is a set of classes that can be given to div elements to create sections in a Non-Semantic way if your document isn't using HTML5 elements or if you are shimming older markup.

.header

.footer

.section

Spaces

Semantic Spaces

Here we can see that we've instantiated a grid onto <div id="#some-container"> and we have a Section created by using a section element. We have also introduced two Spaces "#some-article" and "#some-sidebar" into the grid.
These two Spaces are created by using the grid-space() mixin. This mixin takes one argument the width in percentage or pixels if your using a fixed-layout. So what we have created is a two-column layout with an article which is 70% of
the grid-width wide and a sidebar on the right that is 30% of the grid-width wide. You can probably picture that in your head, right?

A Three Column Fixed-Width Layout

Here's an example of a three column fixed-width layout with a header and footer. In order to make our three-column-layout fixed-width, you'll notice all we had to do was change the grid-width and grid-min-width variables to the same number in pixels by passing them as arguments to the grid() mixin. You can view this example filed in with lipsum here.

Note:For brevity in the following example we're using the jade markup language instead of HTML.

CSS3

Transparent Mixins

Fluidity has transparent mixins for all the latest CSS3 properties. This means that you can just use the official CSS3 syntax in the purest way and Fluidity will include all of the prefixed versions for you. These mixins provide all of the cross browser prefixes for you based on the "vendors" variable. By default fluidity includes prefixes for webkit (webkit) and mozilla (moz). You can set this variable to include opera (o), Internet Explorer (ms), or you could set it to not use any prefixes and only output true CSS3 with the just the "official" keyword. When setting this variable be sure to include official last in the order to ensure it gets included and not overridden.

Basically, a transparent mixin lets you right your code. Once. The right way.
Here's An example of a transparent mixin. Given a vendors variable of "webkit moz o ms official".

Stylus

#item
border-radius 10px

The following CSS3 Properties have transparent mixins:

appearance

opacity

border-radius

box-shadow

box-sizing

border-image

background-size

background-origin

background-clip

transform

backface-visibilty

perspective

animation

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-play-state

animation-fill-mode

transition

columns

column-count

column-gap

column-rule

filter

Fluidity Will Export the folowing CSS.

CSS3 Gradients

Linear Gradients

The linear gradient function uses the latest and recently finalized official CSS3 Syntax and generates the currently implemented but deprecated syntax in the browsers that support the feature this includes the even older syntax of "-webkit-gradient(linear,...)" for legacy webkit browsers.