[{"data":1,"prerenderedAt":421},["ShallowReactive",2],{"project-4668508":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":46,"post_text":49,"what":50,"said":85,"maker_in_thread":208,"shape":217,"grid":221,"attempts":384,"same_week":385,"maker_shows":34,"maker_hidden":414,"reader_version":415,"card":416},"4668508","Simple-Grid","A simple lightweight CSS grid, not a bloated framework","title","Show HN: A simple lightweight CSS grid, not a bloated framework","http:\u002F\u002Fthisisdallas.github.com\u002FSimple-Grid\u002F","thisisdallas.github.com","thisisdallas",1350565160,2012,134,61,146,1677,9,"notable","dev_tools","css grid system","library",[24,25,26,27,28],"css grid","responsive grid","lightweight css","css layout","html grid","debated",-0.06,{"positive":32,"neutral":33,"mixed":34,"critical":35},10,11,2,12,35,{"design":38,"idea":41,"execution":42,"docs":45},{"positive":39,"critical":40},4,3,{"positive":34,"critical":40},{"positive":43,"critical":44},0,6,{"positive":43,"critical":43},[43,43,43,43,47,48,48,43,43,43,43,43,48,47,47,48,48,48,40,40,43,48,40,40,40,40,47,40,48,48,47,40,40,40,48,40,43,43,47,47],5,1,null,{"problem":51,"audience":58,"pricing":49,"motivation":70,"time_to_build":49,"stack":74,"openness":82,"stage":83,"team_size":84},{"value":52,"source":53,"evidence":54},"Building page column layouts with CSS without a heavy framework","maker",[55],{"id":56,"by":11,"text":57},"4668673","Hey thanks for the kind words! I completely agree with everything said. I also think in a lot of cases, there might be some projects that require a difference in a grid, if one…",{"value":59,"source":60,"evidence":61},"Front-end developers building quick sites or custom layouts","commenter",[62,66],{"id":63,"by":64,"text":65},"4669357","tharris0101","Cool! There are a lot of times I'm building a quick and dirty site and this will be really helpful",{"id":67,"by":68,"text":69},"4668617","sbarre","This is really nice (I love the subtle steam off the coffee on the page!), but I feel that basic grids like this are so straightforward to implement that anyone can whip one up…",{"value":71,"source":53,"evidence":72},"Maker wanted a grid that fit a specific project and could not find one they liked",[73],{"id":56,"by":11,"text":57},[75],{"value":76,"source":60,"evidence":77},"CSS",[78],{"id":79,"by":80,"text":81},"4668741","daigoba66","This is really useful as a template for building a CSS grid system. I love that it's not a \"framework\" and that the CSS itself is very simple and straight-forward to build upon:…","open_source","launched","solo",{"praise":86,"objections":106,"requests":138,"questions":157,"alternatives":178},[87,99],{"value":88,"source":60,"evidence":89},"Lightweight and simple, easy to build on",[90,94,95],{"id":91,"by":92,"text":93},"4668720","binarymax","I really like this. Very simple and lightweight, as advertised. Not perfect on IE8 but comparable with other frameworks that have too much going on. One suggestion - use HTML5…",{"id":79,"by":80,"text":81},{"id":96,"by":97,"text":98},"4669865","waynesutton","Thanks for posting, this is great, simple CSS grid.",{"value":100,"source":60,"evidence":101},"Columns stack on resize",[102],{"id":103,"by":104,"text":105},"4668995","genwin","Not all of us are skilled at the front-end. I love your grid, especially how columns stack on resize, and wouldn't be able to just whip one up myself. The steam is cool too.",[107,114,125,132],{"value":108,"source":60,"evidence":109},"Not responsive down to images",[110],{"id":111,"by":112,"text":113},"4672367","nshankar","It is not responsive down to the images, so nothing much of use now.",{"value":115,"source":60,"evidence":116},"overflow hidden clears floats and clips tooltips",[117,121],{"id":118,"by":119,"text":120},"4669076","pault","Nice, but I see you are using overflow: hidden on grid containers to clear the floats. This can be a pain when implementing absolutely and relatively positioned elements like…",{"id":122,"by":123,"text":124},"4670615","armageddon","Good catch. Edit any of the H3 elements in any of the gray rows and simulate a tooltip: \u003Ch3>col-1-1\u003C\u002Fh3> Replace it in Firebug with a basic tooltip: \u003Ch3…",{"value":126,"source":60,"evidence":127},"Breaks on older iPad and Chrome for iOS",[128],{"id":129,"by":130,"text":131},"4671593","JulianWasTaken","On Chrome for iOS latest on an iPad 1 this doesn't appear to render properly. There's a gutter of scrollable space on the right side and the headers in the 4 ad copy columns…",{"value":133,"source":53,"evidence":134},"Only works in IE8 and up",[135],{"id":136,"by":11,"text":137},"4668697","Hey thanks! Right now, it works in IE8 and up.",[139,143,150],{"value":140,"source":60,"evidence":141},"Use HTML5 semantic tags in examples",[142],{"id":91,"by":92,"text":93},{"value":144,"source":60,"evidence":145},"Clarify license",[146],{"id":147,"by":148,"text":149},"4669028","da_n","Very nice, fantastic work and thanks for putting it out there. Is there any license or usage info (WTFPL)? I read recently that if there is no license you shouldn't touch it…",{"value":151,"source":60,"evidence":152},"Document the column naming convention",[153],{"id":154,"by":155,"text":156},"4668714","envex","I just don't think I'm understanding when it comes to something like .col-2-12 & col-10-12",[158,165,172],{"value":159,"source":60,"evidence":160},"Why fluid instead of fixed widths",[161],{"id":162,"by":163,"text":164},"4669844","petewailes","Interesting. Have you thought about using the micro clearfix instead of overflow hidden to sort the columns? Also, what made you choose to go fluid instead of fixed? Also, would…",{"value":166,"source":60,"evidence":167},"Advantage over Bootstrap or Skeleton",[168],{"id":169,"by":170,"text":171},"4671851","andrewkkirk","What's the advantage of using this grid system, instead of a framework that contains this functionality and more (such as Twitter Bootstrap or Skeleton)?",{"value":173,"source":60,"evidence":174},"Why the col-x-y naming convention",[175],{"id":176,"by":155,"text":177},"4668648","Looks good, I'm just not a fan of the naming conventions on the columns. Why did you decide to go with \".col-1-2\" over something like (foundation's) \".one.column\"?",[179,186,193,197,201],{"value":180,"source":60,"evidence":181},"YUI3 Grids",[182],{"id":183,"by":184,"text":185},"4668993","bmuon","The same lightweight pattern has been used in YUI3 Grids for a number of years and it even works on IE6. User guide: http:\u002F\u002Fyuilibrary.com\u002Fyui\u002Fdocs\u002Fcssgrids\u002F Code:…",{"value":187,"source":60,"evidence":188},"1KB grid",[189],{"id":190,"by":191,"text":192},"4670501","firefoxman1","I love the goal of keeping it lightweight. This is very similar to my grid of choice, the 1KB grid[1] which I like because you can adjust the number of columns and width in px.…",{"value":194,"source":60,"evidence":195},"Twitter Bootstrap and Skeleton",[196],{"id":169,"by":170,"text":171},{"value":198,"source":60,"evidence":199},"Foundation",[200],{"id":176,"by":155,"text":177},{"value":202,"source":60,"evidence":203},"CSS-Tricks dont-overthink-it grids",[204],{"id":205,"by":206,"text":207},"4671448","corny","I've been using this grid technique for a little while. It's really great. I was disappointed that the original author wasn't credited though. Compare with:…",{"comments":47,"answered":34,"key":209},[210,211,214],{"id":56,"text":57},{"id":212,"text":213},"4668686","There really wasn't a specific reason for the naming convention. Although adding \"col-\" to all of the columns allowed me to easily select every column using [class*='col-'].",{"id":215,"text":216},"4669418","Oh man I wish I could claim that I wrote that steam script but I don't know js that well. I'll try to find the original version that I worked off of and post it here.",{"commenters":218,"max_depth":47,"maker_replies":47,"first_comment_mins":219,"lifespan_hours":220},46,29,24,[222,226,229,232,236,239,242,246,250,252,256,259,261,264,267,271,274,277,279,281,282,285,289,291,292,296,297,298,300,302,306,308,311,312,314,318,320,323,326,329,331,334,335,338,341,343,346,348,350,354,356,360,362,364,368,372,374,377,380],[223,43,43,224,225,43],"4670576","other\u002Fneutral\u002Fdesign","zaidf",[227,43,43,224,228,43],"4670613","tocomment",[230,43,43,224,231,43],"4670635","Goronmon",[233,43,43,234,235,43],"4671173","other\u002Fneutral\u002Fidea","pbhjpbhj",[237,43,43,224,238,43],"4670617","handzhiev",[240,43,43,224,241,43],"4670684","drhayes9",[243,43,47,244,245,43],"4670714","project\u002Fpositive\u002Fdesign","blauwbilgorgel",[247,43,48,248,249,43],"4671176","project\u002Fcritical\u002Fdesign","ville",[251,43,48,248,245,43],"4671691",[253,43,40,254,255,43],"4671705","project\u002Fneutral\u002Fdesign","lazerwalker",[257,43,43,224,258,43],"4671232","crucialfelix",[260,43,43,224,225,43],"4671280",[262,43,43,263,258,43],"4671317","other\u002Fneutral\u002Fnone",[265,43,43,224,266,43],"4671893","skyhook_mockups",[268,43,43,269,270,43],"4670745","other\u002Fneutral\u002Fperformance","aubergene",[272,43,43,224,273,43],"4672188","jakejake",[275,43,43,224,276,43],"4672446","minikomi",[67,48,48,278,68,43],"project\u002Fcritical\u002Fidea",[56,48,43,280,11,48],"maker\u002Fneutral\u002Fidea",[103,48,47,244,104,43],[283,48,47,284,68,43],"4669397","maker\u002Fpositive\u002Fnone",[286,48,47,287,288,43],"4669437","project\u002Fpositive\u002Fidea","bpatrianakos",[118,34,48,290,119,43],"project\u002Fcritical\u002Fexecution",[122,34,48,290,123,43],[293,34,40,294,295,43],"4672735","project\u002Fneutral\u002Fexecution","ncri",[183,40,48,278,184,43],[176,39,40,254,155,43],[212,39,43,299,11,48],"maker\u002Fneutral\u002Fdesign",[154,39,40,301,155,43],"project\u002Fneutral\u002Fdocs",[303,39,43,304,305,43],"4668824","commenter\u002Fneutral\u002Fdocs","talmand",[307,39,43,304,249,43],"4668866",[309,39,48,290,310,43],"4672345","bung",[162,47,40,294,163,43],[91,44,40,313,92,43],"project\u002Fmixed\u002Fdesign",[315,44,43,316,317,43],"4668841","commenter\u002Fneutral\u002Fexecution","kijin",[319,44,40,294,255,43],"4671649",[147,321,40,322,148,43],7,"project\u002Fneutral\u002Fnone",[190,324,40,325,191,43],8,"project\u002Fneutral\u002Fidea",[327,18,47,244,328,43],"4669338","artursapek",[215,18,43,330,11,48],"maker\u002Fneutral\u002Fnone",[332,18,40,254,333,43],"4670454","aawc",[129,32,48,290,130,43],[336,33,48,278,337,43],"4673333","exodust",[339,35,48,290,340,43],"4668858","emehrkay",[79,342,47,244,80,43],13,[205,344,40,345,206,43],14,"maker\u002Fmixed\u002Fnone",[347,344,43,330,11,48],"4671899",[169,349,40,325,170,43],15,[351,352,40,294,353,43],"4668625",16,"theallan",[136,352,43,355,11,48],"maker\u002Fneutral\u002Fexecution",[357,358,48,290,359,43],"4672423",17,"bicknergseng",[63,361,47,287,64,43],18,[111,363,48,248,112,43],19,[365,363,43,366,367,43],"4672395","commenter\u002Fneutral\u002Fdesign","fourstar",[369,363,43,370,371,43],"4672467","commenter\u002Fneutral\u002Fnone","Bootvis",[373,363,43,370,367,43],"4672782",[96,375,47,376,97,43],20,"project\u002Fpositive\u002Fnone",[378,379,47,376,367,43],"4670764",21,[381,382,47,376,383,43],"4668913",22,"thornofmight",[],[386,391,396,401,405,410],{"id":387,"name":388,"points":389,"category":390},"4684696","Subbania",515,"games",{"id":392,"name":393,"points":394,"category":395},"4683443","Quotably",142,"consumer_social",{"id":397,"name":398,"points":399,"category":400},"4674398","Copybar",113,"web_saas",{"id":402,"name":403,"points":404,"category":400},"4667584","swola",111,{"id":406,"name":407,"points":408,"category":409},"4669866","DailyCred",93,"infrastructure",{"id":411,"name":412,"points":413,"category":20},"4691072","Taurus.io",87,false,"v2",{"id":417,"name":5,"line":6,"ai":414,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":30,"top":18,"kw":418,"maker":11,"domain":10,"tier":19,"attempts":43,"strip":419,"url":9,"mix":420,"praise":88,"objection":108,"sub":21},4668508,[24,25,26,27,28],"0000511000001551113301333353115333130055",[32,33,34,35],1794036500525]