GithubHelp home page GithubHelp logo

eleven40-compass's Introduction

eleven40-compass extension

This is a Compass-CSS extension to enable the 1140px fluid layout style, originally described at http://cssgrid.net/

The main problem with the styles provided is that is makes your markup and style non-semantic. Compass and SASS fixes that.

This extension is not quite in line with the original, but will be soon. It currently only has screen and mobile support.

Usage

Mixins

This extension provides mixins to do what the classes in the original did. In general, you can follow this format:

@include eleven40-classname

For example:

@include eleven40-container

replaces the

.container

css class.

The same applies for the row class all the col classes. Make sure you use the eleven40-last mixin for the last column, just like in the css class version.

Mobile

To make a mobile stylesheet, simply:

@import "eleven40/mobile";

This will include the mobile styles that will overload the default screen styles.

Install

gem install eleven40

eleven40-compass's People

Contributors

zombor 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

Watchers

 avatar  avatar

Forkers

diago devton

eleven40-compass's Issues

Installation & 1140s

Hi, i installed your gem but it doesn't load the SCSS.
I've a working Rails3 + SASS project

I added --> gem "eleven40" and it is installed via "bundle install", but when i try to load
@import "eleven40/mobile"; it seems it doesn't exist.

Anyway I did a more SCSS-y version of 1140px Grid. You can customize the number of colums and the pixel width.
Have a look here:
https://github.com/grigio/1140s/blob/master/1140s.scss

Ciao
Luigi

Typo in reset/_utilities.scss

There's a typo on line 15, I believe:

article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,
    video,object {
        display:block
    }

It misses a ; after display:block. This makes the PhamlP parser blow up (it's the PHP port of Sass/Haml).

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.