16 ms·
HTML is almost 100% responsive out of the box
- kevinmchugh 13y agoOff-topic, but: I love the feeling of seeing a new TLD for the first time. I immediately start thinking about possibilities and everything seems golden for a while.
- thunderbong 13y agoYes! The web will conquer the world. We're at the beginning of a new revolution. Just a few simple tweaks and everything will fall in place! I agree. The feeling is indeed golden! Cheers.
- MrBuddyCasino 13y agoFunny that you mention it, I get what you mean. Its a bit like the sequence from "once upon a time in the west", where the camera goes over a hill, showing all the unclaimed land, the workers building the new railway etc. Epic scenery of a land of opportunity, golden afternoon sun rays, with a grand Ennio Morricone soundtrack playing. Stupid really, after all its just a TLD.
- Kronopath 13y agoFor those who actually want to see the code behind this: https://github.com/mrmrs/fluidity/blob/master/css/fluidity.css https://github.com/mrmrs/fluidity/blob/master/css/fluidity.c... It's a good start to getting properly responsive websites. A lot of times this really is all that's needed. But sometimes more complex solutions are needed for certain elements.
- hashberry 13y agoThe CSS file could be more minimal if "@charset "UTF-8";" were removed. The only reason this is required is because of the UTF-8 character in the comment.
- jamiesonbecker 13y agoThis is really the true secret: max-width: 100% is usually the first and often only change needed. Nice work.
- nattaylor 13y agoAgreed. For me the most important this is load time -- if it takes more than a few seconds, I move on well before even the best of current responsive solutions have a chance to load and do their magic. This doesn't address that entirely, especially in the case of large images or heavy iFrames, but at least I can start reading almost immediately. Also, navigation would still be a struggle with this solution, though just a list with display:inline would be functional.
- sergiotapia 13y agoI love this idea - I no longer like using Twitter Bootstrap because it's just so huge! And 90% of the time I find myself creating an override file to style it to my websites feel. I do love their grid system though, does anyone know of a great lightweight grid system that's robust like Bootstrap's?
- misframer 13y agoTry this out: http://unsemantic.com/ http://unsemantic.com/
- jcomis 13y agohttp://neat.bourbon.io/ http://neat.bourbon.io/ is decent
- elithrar 13y ago> I do love their grid system though, does anyone know of a great lightweight grid system that's robust like Bootstrap's? If you use the LESS or SASS versions of Bootstrap, you can pick and choose what to import (grid, navbar, pills, buttons, etc.) Otherwise take a look at Bourbon (http://neat.bourbon.io/ http://neat.bourbon.io/) or Susy (http://susy.oddbird.net/ http://susy.oddbird.net/).
- sergiotapia 13y agoLooks good but doesn't give you fine control over when to vertically stack columns at xsmall, small, medium and large.
- will_work4tears 13y agoCheckout PureCSS[0], it's Yahoo's minimal framework. Something like 4k gzipped. Also you can pick and choose what you want. No SaSS/LeSS built in support, but it's small, you can just port it yourself pretty easy... it is called pure CSS for a reason I guess. [0]- http://purecss.io/ http://purecss.io/
- jordanlev 13y agoThis blew my mind when I first saw it -- a minimalist DIY grid system: http://jordanlev.github.io/grid/ http://jordanlev.github.io/grid/
- deleted 13y ago[deleted]
- deedubaya 13y agoI don't think 'responsive' means what you think it means.
- deleted 13y ago[deleted]
- dmix 13y agofluid
- dreadsword 13y agoYou mean, it doesn't mean scrollbars everywhere??
- camus2 13y ago.sexy blocked by most business firewalls, not a bright idea, might want to find another extension.
- deedubaya 13y agoNot if he hacks it with a Visual Basic GUI to trace the IP Address!
- nawitus 13y agoWhile that's a pragmatic solution, the problem is of course with these ridiculous business firewalls which only prevent working.
- peterkelly 13y agoIf you're working for the sort of company that would go out of it's way to block all URLs which have the string "sex" in them, you've got bigger problems than not being able to view website.
- jbinto 13y agoMany years ago when I was doing .NET programming, a helpful resource was http://systemwebmail.com/ http://systemwebmail.com/. Predictably, the firewall at $CORP blocked /webmail/. I had to print it at home and bring it into work.
- mavhc 13y agoAt workschool "proxy" is blocked, however you can just google for prxy and it auto corrects
- deleted 13y ago[deleted]
- mpalczew 13y agoI don't get it
- kelvin0 13y agoThe Emperor has no clothes ... pass it on
- rwallace 13y agoOkay, I'll bite: what does the author mean by 'responsive'? It doesn't say anywhere on the page.
- Bill_Dimm 13y agoIt responds well to being resized (e.g. to fit on a mobile phone screen instead of a large monitor). Although, I think it is normally used to mean considerably more than the simple scaling being done here (e.g. I've seen designs where the text goes from two columns to one if the display is narrow). http://en.wikipedia.org/wiki/Responsive_web_design http://en.wikipedia.org/wiki/Responsive_web_design
- slipperyp 13y agoRight. His first example puts a scale factor on a 2400x700px image to make it "not too big" for smaller screens. That's responsive design the same way that the NES emulator on my old WinCE phone in 2003 (which had a touch display that only supported a single input touch at a time) was NES on WinCE.
- chadillac 13y agoI post a 1 line solution that lets you manage complex application state changes in responsive layouts and deal with gui conflicts across responsive designs using pure CSS/LESS and don't get a single upvote. This guy posts that HTML is fluid by default with a couple lines of CSS and gets 20 votes. HN, I really don't understand what the hell is going on here anymore.
- aparadja 13y agoYour post probably wasn't noticed by the right eyes. There's a lot of content being posted to HN these days. It's not a personal attack. HN doesn't have a campaign against you (or if there is one, I wasn't invited).
- chadillac 13y agoNah I don't assume anyone is avoiding upvoting out of spite or anything, but I just thought HN as a whole was technically more advanced than most other communities because of the user base and niche ... so it leaves me scratching my head.
- elliottcarlson 13y agoI've actually been surprised by this assumption - while the community in general sways to the heavily technical side of things; there are plenty of entrepreneurs, idea men, new developers etc - which is great, but definitely something to keep in mind with regard to what the community might find interesting.
- parktheredcar 13y agoI've noticed a definite upswing in nontechnical (management, strategy, gossip/politics, worldnews) articles during weekdays in the last couple of years. There are also many more 'redditlike' comments in the last 6 months to 1 year- jokers, puns, easily googlable questions etc. HN community is just changing in that direction as the audience grows.
- deleted 13y ago[deleted]
- mattmanser 13y agoRegardless of whether he's misinterpreted what responsive is or not, try putting "Boy, tables in HTML really do suck ass" into one of the table cells.
- zimbatm 13y agoThe 108 bytes in question: @charset "UTF-8"; img,canvas,iframe,video,svg{max-width:100%} .overflow-container{overflow-y:scroll; -webkit-overflow-scrolling:touch} Analysis (EDIT): I'm not sure why the CSS needs to be declared as containing UTF-8 since all the characters of the file are part of the US-ASCII range. Use the .overflow-container on tables and pre/code blocks. "-webkit-overflow-scrolling" seems to be useful to allow horizontal scrolling on overflow elements on iOS [1]. * [1]: http://stackoverflow.com/questions/15605085/webkit-overflow-scrolling-touch-causing-vertical-scrolling-problems-on-mobil http://stackoverflow.com/questions/15605085/webkit-overflow-...
- hashberry 13y agoThe non-min version has a UTF-8 character in a comment. Rather silly.
- gruntmaster9000 13y agoSass by default sets UTF-8 encoding.
- tiles 13y agofluidity.min.css: @charset "UTF-8"; img,canvas,iframe,video,svg{max-width:100%} .overflow-container{overflow-y:scroll;-webkit-overflow-scrolling:touch}
- general_failure 13y agoHeh, I didn't know about .sexy before this.
- Jack000 13y agothere is going to be a flood of new tlds soon http://www.key-systems.net/english/news/new-gtlds/new-gtld-launch-dates.html http://www.key-systems.net/english/news/new-gtlds/new-gtld-l...
- bmmayer1 13y agoI think this is the first time I've seen a new generic tld in the wild. Took me by surprise!
- sheraz 13y agothe first one i saw was vim.sexy
- Sprint 13y agoSomeone should register hey.sexy for those spicy voip calls via webrtc.
- vertex-four 13y agoAlso to be found: https://rms.sexy/ https://rms.sexy/
- mitchty 13y agoI'm not shocked that imtoo.sexy exists to be honest.
- heydenberk 13y agoThis is not in any way useful as a library. Charitably, it's a useful reminder to set max-width to 100% on embedded media. Less charitably, it's an artifact of the hype du jour on one of those terrible new-fangled TLDs.
- alexschleber 13y ago=== Just FYI... after opening this link, === and in short succession this nearby one: news.ycombinator.com/item?id=7404218 ("Bootflat"), something sent my Firefox browser and then my entire Galaxy Tab 8.9 (which has been functioning pretty flawlessly for 3+ years) into an unstable state. I may have to root/wipe it now... :( I can't prove that it was caused by either this or the other link, but the coincidence is troubling... who checks these HN submissions for malware anyway?
- minor_nitwit 13y agoyou still end up loading the gigantic image to go on a tiny screen, so you consume a lot of memory on a mobile device for no-gain.
- emersonrsantos 13y agoScrollbars in MSIE 11 on the tables and preformatted text examples.
- h1fra 13y agoResponsive is different than fluidity. Many designer/integrator seems to forget that there is no need to css3 to give fluidity. But responsivness is not what you think it is. Your design is in now way responsiv, it merely adapt screen size, but content is became less and less readable as screen size lessen.
- pearjuice 13y agoIt is obvious the browsers will try to stick all content into the view port by default. Too bad the web doesn't consist of vertical pages with no alignment whatsoever.
- deleted 13y ago[deleted]
- sadfnjksdf 13y agoprint "a = #{a} b = #{b}, c = #{c}, d = #{d}\n" V print "a = #{a}, b = #{b}, c = #{c}, d = #{d}\n"
- facepalm 13y agoNot for me on Firefox, according to that sample page.
- bane 13y agoI like the part where I don't have to wait 10-20 seconds for the page to load and render.
- elwell 13y agoscrollbars much?
- xytop 13y agoIt's shame that HN, a technical community, still doesn't have a good responsive design.. and even design at all.. I'm always bit confused when viewing the site :(
- dclowd9901 13y agoReminds me of that annoyingly pious vanilla-js site from a while back. Yes, HTML is 100% responsive out of the box, something so well understood, it nary even warrants mention. We are so far past that part of understanding that our conversations surround polishing appearance to the nth level. We don't fiddle with CSS because we don't need to; we do it for the 1% of cases HTML alone isn't enough. So congrats on writing your first reset, something literally every web developer has already done in their lifetime.
- talles 13y agoI hate to be that guy but... isn't these examples of fluidity and not actually responsiveness? ps: cool domain suffix :)