Skip to content

Instantly share code, notes, and snippets.

@cballenar

cballenar/index.html

Last active December 13, 2015 22:18
Show Gist options
  • Save cballenar/4983263 to your computer and use it in GitHub Desktop.
Save cballenar/4983263 to your computer and use it in GitHub Desktop.
Download ZIP
Numbers & CSS - Looking for ways to improve how columns and objects work in CSS
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper body">
<div class="content">
<div class="row">
<div class="object span12"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span6"><div class="inner"></div></div>
<div class="object span6"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span8"><div class="inner"></div></div>
<div class="object span4"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span4"><div class="inner"></div></div>
<div class="object span4"><div class="inner"></div></div>
<div class="object span4"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span9"><div class="inner"></div></div>
<div class="object span3"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span3"><div class="inner"></div></div>
<div class="object span3"><div class="inner"></div></div>
<div class="object span3"><div class="inner"></div></div>
<div class="object span3"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span10"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
</div>
</div>
<div class="sidebar">SIDEBAR</div>
</div>
<div class="wrapper body">
<div class="row">
<div class="object span12"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span6"><div class="inner"></div></div>
<div class="object span6"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span8"><div class="inner"></div></div>
<div class="object span4"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span4"><div class="inner"></div></div>
<div class="object span4"><div class="inner"></div></div>
<div class="object span4"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span9"><div class="inner"></div></div>
<div class="object span3"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span3"><div class="inner"></div></div>
<div class="object span3"><div class="inner"></div></div>
<div class="object span3"><div class="inner"></div></div>
<div class="object span3"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span10"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
</div>
<div class="row">
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
<div class="object span2"><div class="inner"></div></div>
</div>
</div>
</body>
</html>
Raw
master.css
html,body{margin:0}
html {
background:#FCFCFC; color: #333;
font-size:75%; line-height:1.5em; font-family:sans-serif; }
.wrapper {
width:90%;
margin:2rem auto;
background:#FFF;
box-shadow:
0 2px 6px
rgba(0,0,0,.1); }
.body { padding:1rem; }
.content { margin: 0 0 1rem; }
.row { margin:0 -.5rem 1rem; }
.row:last-child { margin-bottom:0; }
.object {
position:relative; float:left;
overflow:hidden; }
.inner {
position:relative;
margin: 0 .5rem; padding: .5rem; }
.object.no-pad .inner { padding: 0; }
.span1 { width: 8.3333%; }
.span2 { width: 16.6666%; }
.span3 { width: 25.0000%; }
.span4 { width: 33.3333%; }
.span5 { width: 41.6666%; }
.span6 { width: 50.0000%; }
.span7 { width: 58.3333%; }
.span8 { width: 66.6666%; }
.span9 { width: 75.0000%; }
.span10 { width: 83.3333%; }
.span11 { width: 91.6666%; }
.span12 { width: 100.0000%; }
.span1 { width: 8.3333%; }
.span2 { width: 16.6666%; }
.span3 { width: 25.0000%; }
.span4 { width: 33.3333%; }
.span5 { width: 41.6666%; }
.span6 { width: 50.0000%; }
.span7 { width: 58.3333%; }
.span8 { width: 66.6666%; }
.span9 { width: 75.0000%; }
.span10 { width: 83.3333%; }
.span11 { width: 91.6666%; }
.span12 { width: 100.0000%; }
.wrapper:before, .wrapper:after, .group:before, .group:after, .row:before, .row:after { content: ""; display: table; }
.wrapper:after, .group:after, .row:after { clear: both; }
.wrapper, .group, .row { zoom: 1; }
/* Responsive */
@media only screen and (min-width: 35rem) {
/* ::360:: --> 360 ( 360 ) */
.wrapper { width:29rem; }
}
@media only screen and (min-width: 45rem) {
/* ::480:: --> 480 ( 480 ) */
.wrapper { width:39rem; }
}
@media only screen and (min-width: 55rem) {
/* ::600:: --> 600 ( 450 + 132 ) */
.wrapper { width:49rem; }
.content { width:37.5rem; margin-right:.5rem; }
.sidebar { width:11rem; }
.content, .sidebar { float:left; margin-bottom:0; }
}
@media only screen and (min-width: 65rem) {
/* ::720:: --> 720 ( 540 + 168 ) */
.wrapper { width:59rem; }
.content { width:44rem; margin-right:1rem; }
.sidebar { width:14rem; }
}
@media only screen and (min-width: 75rem) {
/* ::840:: --> 840 ( 630 + 180 ) */
.wrapper { width:69rem; }
.content { width:52.5rem; margin-right:1.5rem; }
.sidebar { width:15rem; }
}
@media only screen and (min-width: 85rem) {
/* ::960:: --> 960 ( 720 + 216 ) */
.body { padding: 2rem; }
.row { margin: 0 -1rem 2rem; }
.inner { margin: 0 1rem; padding:1rem; }
.wrapper { width:79rem; }
.content { width:59rem; margin-right:2rem; }
.sidebar { width:18rem; }
}
@media only screen and (min-width: 95rem) {
/* ::1140:: --> 1080 ( 810 + 234 ) */
.wrapper { width:89rem; }
.content { width:67.5rem; margin-right:2rem; }
.sidebar { width:19.5rem; }
}
@media only screen and (min-width: 115rem) {
/* ::1260:: --> 1440 ( 945 + 240 ) */
.wrapper { width:119rem; }
.content { width:89rem; margin-right:2rem; }
.sidebar { width:18rem; }
}
/* Testing */
.inner { background:rgba(0,0,0,.02); border:1px solid #EBEBEB; }
/* Overlay + Hover switch *
body{position:relative;}
body:before{width:100%;height:100%;display:block;content:"";position:absolute;z-index:9999;top:0;left:0;pointer-events:none;
background-origin:content-box;
background-attachment:local;
background-size:100% 2em,100% 1em,100% .5em;
background-image:
-webkit-linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px),
-webkit-linear-gradient(rgba(0,255,255,.25) 1px,transparent 1px),
-webkit-linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px);
background-image:
-moz-linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px),
-moz-linear-gradient(rgba(0,255,255,.25) 1px,transparent 1px),
-moz-linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px);
background-image:
linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px),
linear-gradient(rgba(0,255,255,.25) 1px,transparent 1px),
linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px);}
body:hover * *:hover{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)}
Raw
numbers-and-css.txt
/*
Numbers & CSS
widths: 1920 | 1680 | 1440 | 1200 | 1080 | 960 | 840 | 720 | 600 | 480 | 360 | 240 | 120
base12: 160 | 140 | 120 | 100 | 90 | 80 | 70 | 60 | 50 | 40 | 30 | 20 | 10
base16: 120 | 105 | 90 | 75 | 67.| 60 | 52.| 45 | 37.| 30 | 22.| 15 | 7.
base24: 80 | 70 | 60 | 50 | 45 | 40 | 35 | 30 | 25 | 20 | 15 | 10 | 5
////////////////////////////////////////////////////////////////////////////////////////////////////
Note that standard video numbers such as 1080, 720, and 480 appear - granted, at the momment I'm looking at these as widths, as opposed to heights.
1920 x 1080 - 16:9 - 160(12) - 80(24)
1280 x 720 - 16:9 - 106.666...
854 x 480 - 16:9 - 71.1666...
800 x 480 - 5:3 - 66.666...
720 x 480 - 3:2 - 60(12) - 30(24)
640 x 480 - 4:3 - 53.333...
640 x 360 - 16:9 - 53.333...
480 x 320 - 3:2 - 40x26.666...
// Perhaps a number divisible by 12 that keeps a ratio of 16:9 and is close to 720p is necessary.
12x16 = 192 >> 1280/192 = 6.666... >> 7x192 = 1344 >> 1344/16 = 84 >> 756
I was hoping for much cleaner numbers... (values in parenthesis are multiples of 12)
1344x756 (112x63) || 1248x702 (104x58.5) || 1152x648 (96x54)
////////////////////////////////////////////////////////////////////////////////////////////////////
// This all started as me trying to find a better way of sizing columns and objects in CSS...
// It all ties back to my original project of a baseline, just trying to find the missing pieces... so many, perhaps some of them don't even exist, yay ^^ T_T...
////////////////////////////////////////////////////////////////////////////////////////////////////
// Going over the table makes me wonder how it'd work out to use 12px as the em root.
// Similar to using 10px as the root, i.e. `font-size:62.5%`
// Resulting in ` body { font-size: 75%; } `
// This change would allow us to more easily calculate numbers divisible by 3, including 9, 15, 18, 21, 27, 30.
// 9/12 = .75em || 15/12 = 1.25em || 18/12 = 1.5em || 24/12 = 2em || etc...
// Now, we must keep in mind that if we wanna use multiples of 4, the numbers will end in .3333... and .6666... Granted this is not a big issue, I sometimes find necessary to include up to 4-6 if I want a whole number in Chrome. I doubt a .00321 would make a difference when rendering, but I can't say for sure it doesn't.
// With all this in mind I don't see a reason why this would be an issue, in a way it may help the developer stay within the frame of mind of using 12 as the base number. However, if we were to do this, why wouldn't we just use 10 as the root em. It makes it practically unnecessary to do any calculations.
////////////////////////////////////////////////////////////////////////////////////////////////////
// Seriously, I didn't think this would go on this long... Stop thinking, Carlos.
// Really digging Divine Fits, not my usual type of band...
////////////////////////////////////////////////////////////////////////////////////////////////////
Back to my original reason to be here. What is the best way to create columns and modular objects with the least amount of code.
The problem:
- To have modular objects and columns that can be nested.
- That follow a standard gutter and padding
- That use as little code as possible and therefore are easy to mantain
- Using ems would be a plus for the requirement above
Available solutions (workarounds):
- Use pixels for sizing - Unfortunately the code can get out of control specially if one tries to nest the items.
- Use percentages for widths - If the gutter is also done in percentages they won't be consistent when nesting.
- Box-sizing - It offers the perfect environment as one can use percentages for the width while using fixed values for the gutter and padding. However this would mean dropping support for IE8-
A possible solution I was looking into was using a combo of an .object div with an .inner wrapper; where the object would have a fluid width and the inner element would contain the fixed padding and gutter. Things went wrong when trying to combine it with a technique that used negative margins on the parent wrapper to avoid using something like ":last-child { margin-right:0; }" The problem was that the percentages would not give the most accurate results when used this way. however this isn't really an issue thanks to selectivzr. and I think I just figured out how it can be done with a technique I had looked into before but refused to use... let's look at it again.
As just mentioned, we don't need to use the negative margin on the .row. The layout would still rely on an .object and an .inner. The .inner element would set the margin and padding depending on its position.
If
object 1 + Object 2 + Object 3
The idea of this technique was to use equal margins in between items, the problem was that the items on the sides would often not need that margin.
In order for this to work the parent would need negative margins. Hmmmm this could easily go back to the issue mentioned earlier where the percentages would not give us whole numbers and would result in layouts that aren't fully aligned. I guess it's worth looking into it.
////////////////////////////////////////////////////////////////////////////////////////////////////
I think I'm onto something but I'll let future Carlos discover that... laundry is waiting and looks like I'm gonna be running in under 6hrs of sleep tomorrow...
////////////////////////////////////////////////////////////////////////////////////////////////////
Built and under evaluation: http://jsbin.com/ilohen/
This object model is built as follows:
- a row element that serves as a wrapper,
- an object element which define the width,
- and an inner element which define the style.
It is based on the concept of columns and takes advantage of negative margins and nested elements to create even gutters and paddings throughout the layout.
This layout is useful for sites with complex object models where there are variations of objects ranging from: width, height, color, border, backgrounds, etc.
While primarily designed for work I believe this model can be used in many different situations.
Flaws:
- This model is ENTIRELY built around the number 12. from the widths of containers, objects, elements to margins, paddings, gutter, etc. This limits us to use layouts compatible with 12, that is of 2, 3, 4, 6, 12 columns. (some outside of those numbers can still work but may not turn out very well)
- Because this model relies on percentages of the row element (which has negative margins to allow for even gutter/padding); it is possible for the widths to have decimals and therefore result in uneven widths. Most likely 1-2px off. This may not be a problem for sites without any obvious borders, however if objects are to have background colors and/or borders, this could be quite an issue. As seen in the example, when utilizing 20% width, the model breaks and the objects' widths alternate.
- I am bothered by the extra markup, I wish I didn't need to use an inner div, however the results outweight this issue.
Why 12?
- It is the most versatile number available. In my experience, it offers a lot of flexibility while still providing a template to stick to. We don't need to spend a lot of time thinking of what width to use for an image, or size for a padding. And if it happens to be too small/large we can always use a fraction of it, whether is 1/2, 1/3, or 1/4. Sure, numbers with a base 10 are easier to read but you can't always guarantee that they will be divisible by 3 or 4.
- Now, as mentioned, this model also limits the widths of your layout. In the example. the total width is 960px (12x80) while the content area has been restricted to 720px (12x60) If this wasn't the case, we could end up with some nasty numbers it is necessary that the primary widths are multiples of 12.
Why does this work?
- Fully compatible with any browser (haven't tested it but I don't see why it would fail, IE ... u better behave...)
- The .inner element gives great flexibility in terms of widths/heights while making it easy to have equal paddings/margins/borders, etc. Something that I found achievable only through `box-sizing:border-box`.
- Having 12 as the base number makes it easy to calculate the dimensions of other elements in the site. <3 THE 12tacle !!!
- Actually we are already finding some weird numbers, while most of the widths of the columns are close to be multiples of 12, they are off. Keep searching? idk...
////////////////////////////////////////////////////////////////////////////////////////////////////
Too tired. To be continued...
////////////////////////////////////////////////////////////////////////////////////////////////////
http://jsbin.com/ilohen/13/edit
Made quite some progress on the CSS code I was discussing. Perhaps it will work just fine. I will need to run some tests with real content and styles.
I also expanded the objects into a responsive design. It is in a controlled environment as I only allow it to resize to the widths mentioned earlier. However the code is fairly small. The core is only ~1700 chars, 30 lines of CSS ( single-lines, no comments ), under 100 if optimized for readability. And it could be slightly smaller as I've added some styles that don't belong in the core of the object.
I also wanna point out that this object model does not only work for objects but also for columns. I think I may need to specify different classes between an object and a column to avoid certain issues or perhaps to simplify the syntax of columns. However I have not looked into that yet. At the moment all .objects still need an .inner element. Perhaps this won't be needed in columns. I am still bothered by this element. If we want the amount of flexibility we get from this model, it is necessary to have it. But is it worth including all those ` <div class="inner"> </div> ` ???
Perhaps defining fixed width, padding and margin makes sense... sure the CSS ain't pretty but considering how much code we save in the long run, is it the obvious choice?
Note: I may be seeing the value in the 24-column layout. perhaps I'll add that as an extra...
////////////////////////////////////////////////////////////////////////////////////////////////////
Food for though... better get some rest now...
Never been afraid of something losing something that leaves in the cloud until now... I had to copy my code from jsbin to here. At least now it's in 2 places in the cloud...
////////////////////////////////////////////////////////////////////////////////////////////////////
*/
Raw
scripts.js
function containerWidth() {
$('.object').each( function() {
var objectW = $(this).width(),
innerW = $(this).children('.inner').width(),
rowW = $(this).parent('.row').width();
$(this).children('.inner').html('Row: '+rowW+'<br/>Object: '+objectW+'<br/>Inner: '+innerW);
});
}
$(function() {
containerWidth();
});
$(window).resize( function() {
containerWidth();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment