Code Monkey home page Code Monkey logo

fluidity's Introduction

Fluidity CSS

A Modern CSS3 & HTML5 Framework for Node.js & Stylus Provides A Fluid and Semantic Grid System, Transparent Mixins for CSS3 Syntax, and Base Typography and UI element styles.

What it is?

Fluidity is an extremely lightweight CSS framework made for web designers who want a framework simple enough to quickly express their ideas, smart enough to help with the mundane, and lean enough to stay out of the way when the time comes to do some serious design.

It's built using the awesome Stylesheet language Stylus and all the super powers it has for working with CSS. Fluidity contains a complete CSS reset, some base-line typography, a grid system that can be used semantically or with inline classes to create both fluid-width and fixed-width designs, a collection of transparent mixins that gracefully handle browser pre-fixes for CSS3 properties, and it also has some optional modules for forms and common UI elements.

Install ( Quickstart )

For Complete Documentation visit FluidityCSS.com

Assumes you already have an up-to-date and working Node.js environment.

Make sure you have stylus installed.

npm install stylus -g

Install Fluidity in your Project

npm install fluidity

If you are using Connect Assets you can begin using Fluidity within your stylus files use the @import rule provided by Stylus

@import "fluidity"

You should also 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.

 stylus file.styl --use ../fluidity/lib/fluidity

fluidity's People

Contributors

jameswyse avatar jerico avatar krishedges avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

fluidity's Issues

The variable named 'color'

A small issue I noticed today, there is a variable declared in color.styl as color = #111111 which interferes with some CSS rules. The one I noticed it on today was:

transition color .5s ease-in-out

which would then translate to:

-webkit-transition: #111111 0.5s ease-in-out;
-moz-transition: #111111 0.5s ease-in-out;
-o-transition: #111111 0.5s ease-in-out;
-ms-transition: #111111 0.5s ease-in-out;
transition: #111111 0.5s ease-in-out;

I think another variable name would be a good choice! :)

Input type text, Firefox, value invisible

The text box control looks consistent with other browser but the value and cursor do not show up.

Here's what I did as a temporary workaround:

input[type=text]
    height 100%
    padding 0.4em

With the workaround input type text does not have a consistent appearance but the text and cursor become visible.

I tested this in Firefox v29 & v30.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.