Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add centering and clearfix

  • Loading branch information...
commit c56959dac4a8895c80ebf1d12f9ca11fd2d35aa4 1 parent d74da44
@ndp authored
View
7 README.markdown
@@ -127,10 +127,17 @@ There are a host of pre-made macros that may be useful:
* <code>roundedCorners(corner, radius)</code> -- add rounded corners to a specified corner: <code>'tl'</code>, <code>'tr'</code>, <code>'bl'</code> or <code>'br'</code>
* <code>phark(width, height, img, imgXPosition=0, imgYPosition=0)</code> -- standard phark image replacement with optional background image offset.
* <code>boxShadow([xoffset, yoffset], radius, color)</code>
+* <code>verticalCentering(height)</code> and <code>horizontalCentering(width)</code> -- center using the top 50% / margin-top -width/2 technique. See http://stackoverflow.com/questions/148251/css-centering-tricks
+* (code>clearfix()</code> -- iE7 and beyond clearfix
## Todo
+* decompile existing stylesheets
+* support comma in rules
+* different way to concatenate selectors
+* jQuery rules
+* naming stylesheets so they can be updated.
* Fix license
* Better name
View
55 csster.js
@@ -501,8 +501,8 @@ function boxShadow(offsetOrDirection, radius, color) {
'-moz-box-shadow': '' + xOffset + 'px ' + yOffset + 'px ' + radius + 'px ' + color,
'-webkit-box-shadow': '' + xOffset + 'px ' + yOffset + 'px ' + radius + 'px ' + color,
boxShadow: '' + xOffset + 'px ' + yOffset + 'px ' + radius + 'px ' + color,
- '-ms-filter': "progid:DXImageTransform.Microsoft.Shadow(Strength="+strength+", Direction="+direction+", Color='" + color + "')",// IE 8
- filter: "progid:DXImageTransform.Microsoft.Shadow(Strength="+strength+", Direction="+direction+", Color='" + color + "')" // IE 5.5 - 7
+ '-ms-filter': "progid:DXImageTransform.Microsoft.Shadow(Strength=" + strength + ", Direction=" + direction + ", Color='" + color + "')",// IE 8
+ filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=" + strength + ", Direction=" + direction + ", Color='" + color + "')" // IE 5.5 - 7
};
}
@@ -533,6 +533,57 @@ function phark(width, height, img, imgXPosition, imgYPosition) {
overflow: 'hidden'
};
}
+
+
+function clearfix() {
+ return {
+ display: 'inline-block',
+ '&:after': {
+ content: ' ',
+ display: 'block',
+ width: 0,
+ height: 0,
+ lineHeight: 0,
+ fontSize: 0,
+ clear: 'both',
+ visibility: 'hidden'
+ }
+ };
+
+
+//.clearfix {display: inline-block;} /* for IE/Mac */
+//
+//<!--[if IE]>
+//<style type="text/css">
+// .clearfix {
+// zoom: 1; /* triggers hasLayout */
+//} /* Only IE can see inside the conditional comment
+//and read this CSS rule. Don't ever use a normal HTML
+//comment inside the CC or it will close prematurely. */
+//</style>
+//<![endif]-->
+}
+
+
+// http://stackoverflow.com/questions/148251/css-centering-tricks
+function horizontalCentering(width) {
+ return {
+ width: width,
+ position: 'absolute',
+ left: '50%',
+ marginLeft: -(width / 2)
+ }
+}
+
+// http://stackoverflow.com/questions/148251/css-centering-tricks
+function verticalCentering(height) {
+ return {
+ height: height,
+ position: 'absolute',
+ top: '50%',
+ marginTop: -(height / 2)
+ }
+}
(function() {
View
59 spec/macros_spec.js
@@ -44,5 +44,64 @@ describe('macros', function() {
});
+ describe('vertical centering', function() {
+ var rules;
+ beforeEach(function() {
+ rules = verticalCentering(10)
+ });
+ it('should set the height', function() {
+ expect(rules.height).toEqual(10);
+ });
+ it('should set top to 50%', function() {
+ expect(rules.top).toEqual('50%');
+ });
+ it('should set margin top to compensate for half of the height', function() {
+ expect(rules.marginTop).toEqual(-5);
+ });
+ });
+
+ describe('horizontal centering', function() {
+ var rules;
+ beforeEach(function() {
+ rules = horizontalCentering(100)
+ });
+ it('should set the width', function() {
+ expect(rules.width).toEqual(100);
+ });
+ it('should set top to 50%', function() {
+ expect(rules.left).toEqual('50%');
+ });
+ it('should set margin left to compensate for half of the width', function() {
+ expect(rules.marginLeft).toEqual(-50);
+ });
+ });
+
+ describe('clearfix', function() {
+ var rules;
+ beforeEach(function() {
+ rules = clearfix()
+ });
+ it('should set :after element to clear (which is why we are here)', function() {
+ expect(rules['&:after'].clear).toEqual('both');
+ });
+ it('should set content', function() {
+ expect(rules['&:after'].content).toEqual(' ');
+ });
+ it('should set visibility', function() {
+ expect(rules['&:after'].visibility).toEqual('hidden');
+ });
+ it('should set sizes to 0', function() {
+ expect(rules['&:after'].width).toEqual(0);
+ expect(rules['&:after'].height).toEqual(0);
+ expect(rules['&:after'].lineHeight).toEqual(0);
+ expect(rules['&:after'].fontSize).toEqual(0);
+ });
+ it('should set the element to inline-block (for IE?)', function() {
+ expect(rules.display).toEqual('inline-block');
+ });
+ });
+
+
+
});
View
55 src/macros/macros.js
@@ -76,8 +76,8 @@ function boxShadow(offsetOrDirection, radius, color) {
'-moz-box-shadow': '' + xOffset + 'px ' + yOffset + 'px ' + radius + 'px ' + color,
'-webkit-box-shadow': '' + xOffset + 'px ' + yOffset + 'px ' + radius + 'px ' + color,
boxShadow: '' + xOffset + 'px ' + yOffset + 'px ' + radius + 'px ' + color,
- '-ms-filter': "progid:DXImageTransform.Microsoft.Shadow(Strength="+strength+", Direction="+direction+", Color='" + color + "')",// IE 8
- filter: "progid:DXImageTransform.Microsoft.Shadow(Strength="+strength+", Direction="+direction+", Color='" + color + "')" // IE 5.5 - 7
+ '-ms-filter': "progid:DXImageTransform.Microsoft.Shadow(Strength=" + strength + ", Direction=" + direction + ", Color='" + color + "')",// IE 8
+ filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=" + strength + ", Direction=" + direction + ", Color='" + color + "')" // IE 5.5 - 7
};
}
@@ -108,3 +108,54 @@ function phark(width, height, img, imgXPosition, imgYPosition) {
overflow: 'hidden'
};
}
+
+
+function clearfix() {
+ return {
+ display: 'inline-block',
+ '&:after': {
+ content: ' ',
+ display: 'block',
+ width: 0,
+ height: 0,
+ lineHeight: 0,
+ fontSize: 0,
+ clear: 'both',
+ visibility: 'hidden'
+ }
+ };
+
+
+//.clearfix {display: inline-block;} /* for IE/Mac */
+//
+//<!--[if IE]>
+//<style type="text/css">
+// .clearfix {
+// zoom: 1; /* triggers hasLayout */
+//} /* Only IE can see inside the conditional comment
+//and read this CSS rule. Don't ever use a normal HTML
+//comment inside the CC or it will close prematurely. */
+//</style>
+//<![endif]-->
+}
+
+
+// http://stackoverflow.com/questions/148251/css-centering-tricks
+function horizontalCentering(width) {
+ return {
+ width: width,
+ position: 'absolute',
+ left: '50%',
+ marginLeft: -(width / 2)
+ }
+}
+
+// http://stackoverflow.com/questions/148251/css-centering-tricks
+function verticalCentering(height) {
+ return {
+ height: height,
+ position: 'absolute',
+ top: '50%',
+ marginTop: -(height / 2)
+ }
+}

0 comments on commit c56959d

Please sign in to comment.
Something went wrong with that request. Please try again.