https://github.com/mattstauffer/fluix

Semantic scss fixed / fluid grid
https://github.com/mattstauffer/fluix

Last synced: about 1 month ago
JSON representation

Semantic scss fixed / fluid grid

• Host: GitHub
• URL: https://github.com/mattstauffer/fluix
• Owner: mattstauffer
• Created: 2014-02-19T19:35:20.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2014-02-25T22:16:52.000Z (almost 11 years ago)
• Last Synced: 2024-12-16T02:07:27.622Z (about 1 month ago)
• Language: CSS
• Size: 226 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fluix

A Sass/SCSS mixin for quickly and simply generating mixed fluid/fixed grids. Under active development.

Issues: https://github.com/jeroengerits/fluix/issues

## General Usage

```scss

// Wrap columns with the split; the number of arguments to split should be

// the same as the number of columns.

@include split(10em, 100%) {

	.fixed-width-left-column {

	}

	.fluid-width-right-column {

	}

}

```

## Usage Options

```scss

// Only fluid columns

@include split(50%, 50%){}

// Only fixed columns

@include split(10em, 10em){}

// Mixed columns

@include split(100%, 1em){}

// Many columns

@include split(100%, 1em, 1em, 1em, 1em, 1em, 1em, 1em){}

// Multiple fluid and fixed column sizes

@include split(30%, 70%, 1em, 5em){}

```

## Example

Will result in a 3 column _fixed | fluid | fixed_ grid.

**HTML**

```html



    
1

    
2

    
3



```


**SCSS**

```scss

.whatever-wrapper {

	@include split(10em, 100%, 10em) {

		// Fixed column of 10em

		.whatever {

			// add scss

		}

		// Fluid column of 100% (fills remaining space)

		.whatever-foo {

			// add scss

		}

		// Fixed column of 10em

		.whatever-bar {

			// add scss

		}

	}	

}

```

## Real live Example

```html



	


		

	

	


		John Doe

	



```


```scss

.author {

	@include split(5em, 100%) {

		.avatar {

			// do stuff

		}

		.name {

			// do stuff

		}

	}

}

```

## Compatibility note

Combining fluid and fixed widths requires CSS calc(), which is unavailable on IE < 9.