Fluidity

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

Solid Typography, A Fluid and Semantic Grid, and Transparent Mixins for Pure CSS3 Syntax.

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'.

Commandline

### Install Stylus globally
### to use the 'stylus' command
npm install stylus -g
 
### In your working directory
npm install fluidity

Example Using Connect-Assets

Javascript

var fluidity = require('fluidity');

That's it! You should now be able to use @import in your .styl files. You may also want to add Fluidity to your package.json file.

Note:There is no official support for Fluidity within connect-assets at this time. So, for the time being you can use this fork or look here at the diff to make the minor changes on your own.

Example usage with Stylus Connect Middleware

Javascript

var connect = require('connect'),
    stylus = require('stylus'),
    fluidity = require('fluidity');
 
var server = connect();
 
function compile(str, path) {
  return stylus(str)
  .set('filename', path)
  .use(fluidity());
}
 
server.use(stylus.middleware({
  src: __dirname,
  compile: compile
}));

Standalone Just Using Stylus

You'll first need to install Node.js. Afterwards, you will have access to the new command npm. You can then install Stylus and Fluidity with npm.

Commandline

### Install Stylus globally
### to use the 'stylus' command
npm install stylus -g
 
### In your working directory
npm install fluidity

To begin using Fluidity within your stylus files use the @import rule provided by Stylus

Stylus

@import "fluidity"

You should now be able to process .styl files into CSS at the commandline with the stylus command. In order for stylus to find Fluidity you can use the "--use" switch.

Commandline

stylus file.styl --use ../fluidity/lib/fluidity
 
// You may also want to -w (watch) switch
// to watch the file for changes and
// recompile the CSS when your developing.

For more information about all the commandline options for Stylus visit the Stylus docs or type 'stylus --help'

Usage

All

To begin using Fluidity in your .styl files you simply use the @import rule provided by Stylus. That's it! You know can start using the fluidity in your Stylus code.

A Single Piece

If you'd like to use just a single piece of Fluidity those are also be available by name. Again you can Just use @import but, you'll also have to include "fluidity/" as the path.

Stylus

@import "fluidity"
// For Non-Semantic Grid classes use.
@import "fluidity-non-semantic"

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.

Stylus

grid-width = 100%
grid-min-width = 320px
base-font-size = 1em
base-line-height = 1.25em
base-color = #000000
vendors = webkit moz o official
@import "fluidity"
@import "fluidity/forms"
@import "fluidity/elements"

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 quoted citation What they're for W3C,2010 from Using <b> and <i> elements for more.

And much, much, more... see below.

Lists, Lists, & Lists

Description Lists

Description Term: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Unordered

Lorem ipsum dolor sit amet
Facilisis in pretium nisl aliquet

Nulla volutpat aliquam velit
Phasellus iaculis neque

Consectetur adipiscing elit

Ac tristique libero volutpat at
Eget porttitor lorem

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

Lorem ipsum dolor sit amet
Consectetur adipiscing elit

Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Blockquotes

Blockquote Example

Dream in a pragmatic way.
Aldous Huxley

Inside the <blockquote> wrap your quote in a <p> tag to get nice quotes and use the <cite> tag for the source or author.

jade

blockquote
  p Dream in a pragmatic way.
  cite Aldous Huxley

Pre & Code Blocks

What can be said here, you've been looking at these all throughout this page.

Both pre and code tags produce example blocks like the one below.

A Stylus Code Example

// Border-Radius
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  -o-border-radius n
  border-radius n

Address Blocks

This first line in an address block is highlighted you just need to include the line-breaks where they belong as usual.

Address Example

Inkspeck Design
2012 E. Developer Ave.
Columbus, Ohio

The Grid

Grid Configuration Variables

Stylus

// Fluid-layout down to mobile size
grid-width = 100%
grid-min-width = 320px
 
// Fixed-layout
grid-width = 960px
grid-min-width = 960px

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

<!-- Semantic -->
<header>
</header>
 
<section>
</section>
 
<footer>
</footer>

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 <footer> 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?

HTML

<div id="some-container">
  <section>
    <article id="some-article">
      <p>
        Some Content ...
      </p>
    </article>
    <aside id="some-sidebar">
      <p>
        Some Content ...
      </aside>
    </div>
  </section>
</div>

Stylus

@import "fluidity"
#some-container
  grid()
  #some-article
    grid-space(70%)
  #some-sidebar
    grid-space(30%)

Non-Semantic Spaces

IMPORTANT! Non-Seamntic classes are only included if you are using @import "fluidity-non-semantic"

For non-semantic spaces you can use the grid-space-(n) classes, where (n) is the number representing the width percentage. These classes exist for the numbers 1-100.

HTML

<div class="grid">
  <div class="section">
    <article class="grid-space-70">
      <p>
        Some Content ...
      </p>
    </article>
    <aside class="grid-space-30">
      <p>
        Some Content ...
      </p>
    </aside>
  </div>
</div>

Stylus

@import "fluidity-non-semantic"

Some Grid Examples

A Two Column Layout

Here's an example of a two column layout with a header and footer. 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. You can get more info about jade here.

Jade

!!! 5
html
  head
    .... include your css!
  body
    #examplepage
      header
        h1 Content...
      section#content
        sidebar
          p Content...
        article
          p Content...
      footer
        p Content...

Stylus

 @import "fluidity"
  
 #examplepage
   grid(80%,960px)
  
 header
   background-color darkgray2
   color white
  
 #content
   sidebar
     grid-space(30%)
   article
     grid-space(70%)
  
 footer
   background-color lightgray2
   text-align center

A Three Column Layout

New! By request this example has been updated to demonstrate a responsive layout down to mobile sizes, as well.

Here's an example of a three column layout with a header and footer. 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.

Jade

!!! 5
html
  head
    .... include your css!
  body
    #examplepage
      header
        h1 Content...
      section
        sidebar#left-menu
          p Content...
        #content
          p Content...
        sidebar#right-menu
      footer
        h6 Content...

Stylus

 @import "fluidity"
  
 #examplepage
   grid(90%,800px)
 header
   background-color darkgray2
   color white
 #left-menu
   grid-space(25%)
 #content
   grid-space(50%)
 #right-menu
   grid-space(25%)
 footer
   background-color lightgray2
   text-align center
  
 // Below is the responsive bit
  
 @media screen and (max-width: 800px)
   #examplepage
     grid(90%,475px)
   #left-menu
     grid-space(45%)
   #content
     grid-space(55%)
   #right-menu
     grid-space(100%)
  
 @media screen and (max-width: 500px)
   #examplepage
     grid(90%,320px)
   header
     font-size 0.8em
   #left-menu
     grid-space(100%)
   #content
     grid-space(100%)
   #right-menu
     grid-space(100%)

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.

Jade

!!! 5
html
  head
    .... include your css!
  body
    #examplepage
      header
        h1 Content...
      section
        sidebar#left-menu
          p Content...
        #content
          p Content...
        sidebar#right-menu
      footer
        h6 Content...

Stylus

 @import "fluidity"
  
 #examplepage
   grid(960px,960px)
  
 header
   background-color darkgray2
   color white
  
 #left-menu
   grid-space(25%)
 #content
   grid-space(50%)
 #right-menu
   grid-space(25%)
  
 footer
   background-color lightgray2
   text-align center

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.

#item {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

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.

Stylus

#sample-1
  background-image linear-gradient(65deg, #fff, #353535)
#sample-2
  background-image linear-gradient(
    to bottom left, #dadada 40%, #353535 70%, #fafafa 100%
  )

Sample 1

Sample 2

Radial Gradients

The radial 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.

Sadly, due to the vast differences in the syntaxes this does not include the legacy webkit syntax of "-webkit-gradient(radial,...)"

Stylus

#sample-1
  background radial-gradient(at top right, #fff, #353535)
#sample-2
  background radial-gradient(
    ellipse farthest-corner at 0% 100%, #fff 10%, #353535 50%, #dadada 70%
  )
#sample-3
  background radial-gradient(circle closest-side at 40px 30px, #fff, #353535)