https://github.com/taystack/halvsies
The most simple half-div/split-div mixin
https://github.com/taystack/halvsies
Last synced: 3 months ago
JSON representation
The most simple half-div/split-div mixin
- Host: GitHub
- URL: https://github.com/taystack/halvsies
- Owner: taystack
- Created: 2013-06-25T06:28:58.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2013-07-02T21:43:55.000Z (almost 12 years ago)
- Last Synced: 2025-04-10T00:55:18.112Z (3 months ago)
- Language: Ruby
- Size: 113 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Halvsies
========
### The most simple half-div/split-div mixin
Create a div. Within your div, create two more divs
with class left and class right, respectfully.
##### Variables:
$WIDTH: The width of the parent div.
$MIN_WIDTH: The point at which the div displays over-under.
The simple half-div
-------------------
#### HTML
#### SCSS
$WIDTH: 100%;
$MIN_WIDTH: 400px;
.halvsies {
@include halvsies( $WIDTH, $MIN_WIDTH );
}
Nested halvsies
---------------
You can even nest halvsies inside other halvsies.
For best results when nesting, in the stylesheet make sure to set the
$MAX_WIDTH to 100% for all nested halvsies.
#### HTML
#### SCSS
#one {
.left {
background: green;
}
.right {
background: blue;
}
#two {
@include halvsies( $WIDTH, $MIN_WIDTH );
.left {
background: orange;
}
.right {
background: yellow;
}
}
}