Skip to content
This repository has been archived by the owner on Apr 16, 2018. It is now read-only.

kevinpeno/inline

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

inline

css grid component that doesn't use floats. Supports all browsers if taking a Progressive Enahancement approach (e.g. this code should not trigger nor break in those browsers; see #3)

Why? Because floats need to die in a fire! http://jsfiddle.net/4s7R6/29/

Example usage:

.test {
	.inline-grid(1em);

	> * {
		.inline-column(1/12);
	}
}

Will output:

.test {
  font-family: monospace, monospace;
  letter-spacing: -0.6em;
  letter-spacing: -1ch;
  box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.test > * {
  font-family: sans-serif;
  letter-spacing: normal;
  box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.test > * {
  width: 8.33333333%;
  display: inline-block;
}

About

css grid component that doesn't use floats

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages