
HTML is almost 100% responsive out of the box - sambeau
http://fluidity.sexy/
======
zimbatm
The 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-...](http://stackoverflow.com/questions/15605085/webkit-overflow-scrolling-touch-causing-vertical-scrolling-problems-on-mobil)

~~~
hashberry
The non-min version has a UTF-8 character in a comment. Rather silly.

~~~
gruntmaster9000
Sass by default sets UTF-8 encoding.

------
deedubaya
I don't think 'responsive' means what you think it means.

~~~
dreadsword
You mean, it doesn't mean scrollbars everywhere??

------
heydenberk
This 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
=== 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?

------
rwallace
Okay, I'll bite: what does the author mean by 'responsive'? It doesn't say
anywhere on the page.

~~~
Bill_Dimm
It 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
Right. 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
I 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
Your 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
Nah 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.

~~~
parktheredcar
I'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.

------
kevinmchugh
Off-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.

~~~
MrBuddyCasino
Funny 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.

------
bmmayer1
I think this is the first time I've seen a new generic tld in the wild. Took
me by surprise!

~~~
sheraz
the first one i saw was vim.sexy

~~~
vertex-four
Also to be found: [https://rms.sexy/](https://rms.sexy/)

------
sergiotapia
I 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?

~~~
jordanlev
This blew my mind when I first saw it -- a minimalist DIY grid system:
[http://jordanlev.github.io/grid/](http://jordanlev.github.io/grid/)

~~~
jordanlev
Edit: when I originally posted this, it was a fork of
[https://github.com/aekaplan/grid](https://github.com/aekaplan/grid) \-- which
I did not write (tried to express that via "when I first saw it", but in
hindsight was not clear). I've since changed it at the original author's
request. Apologies for any confusion!

------
h1fra
Responsive 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.

------
Kronopath
For those who actually want to see the code behind this:

[https://github.com/mrmrs/fluidity/blob/master/css/fluidity.c...](https://github.com/mrmrs/fluidity/blob/master/css/fluidity.css)

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
The 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.

------
camus2
.sexy blocked by most business firewalls, not a bright idea, might want to
find another extension.

~~~
peterkelly
If 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
Many 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
At workschool "proxy" is blocked, however you can just google for prxy and it
auto corrects

------
mattmanser
Regardless 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.

------
jamiesonbecker
This is really the true secret: max-width: 100% is usually the first and often
only change needed. Nice work.

~~~
nattaylor
Agreed. 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.

------
bane
I like the part where I don't have to wait 10-20 seconds for the page to load
and render.

------
dclowd9901
Reminds 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.

------
sadfnjksdf

      print "a = #{a} b = #{b}, c = #{c}, d = #{d}\n"
    
                     V
      print "a = #{a}, b = #{b}, c = #{c}, d = #{d}\n"

------
tiles
fluidity.min.css:

    
    
        @charset "UTF-8";
        img,canvas,iframe,video,svg{max-width:100%}
        .overflow-container{overflow-y:scroll;-webkit-overflow-scrolling:touch}

------
xytop
It'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 :(

------
pearjuice
It 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.

------
talles
I hate to be that guy but... isn't these examples of _fluidity_ and not
actually _responsiveness_?

ps: cool domain suffix :)

------
emersonrsantos
Scrollbars in MSIE 11 on the tables and preformatted text examples.

------
facepalm
Not for me on Firefox, according to that sample page.

------
mpalczew
I don't get it

~~~
kelvin0
The Emperor has no clothes ... pass it on

------
minor_nitwit
you 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.

------
general_failure
Heh, I didn't know about .sexy before this.

~~~
Jack000
there is going to be a flood of new tlds soon

[http://www.key-systems.net/english/news/new-gtlds/new-
gtld-l...](http://www.key-systems.net/english/news/new-gtlds/new-gtld-launch-
dates.html)

~~~
duskwuff
"Soon"? It's already happening. There's dozens already open to the public.

~~~
Jack000
Yes, but there will be almost 1000 released "soon"

------
elwell
scrollbars much?

