Frontend Style Demo Page

Hi guys!

I’m trying to help out our frontend guy by making a page a single page
that
contains every kind of situation our site uses. So there should be a
header, a nav in a few various states, a new form, a form with errors,
etc.

Then I also want to figure out some way to show what it will look like
in a
few different screen sizes (I’m thinking of starting with a pair of
iframes
that show the same content, one at 320px and the other taking the
remaining
width. Eventually it’d be configurable somehow).

Do you guys have any suggestions of how to implement this nicely, or
should
I just go about slapping out some Haml that emulates what my existing
site
does?

Thanks!

—☈king

I ended up doing this. It works better than I thought: Though it starts
on
the initial page, the individual

Note that I still need to tweak the dimensions to get it perfect. Right
now
the scrollbars take up some of the 320x480 window, so it’s not
completely
realistic. But it works well enough that I can see the results of all my
@media queries at once.

—☈

  • params = { src: '/my/starting/page }

%style
:sass
#test-boxes
text-align: center
iframe
border: thin dotted black
vertical-align: top

%iframe#mobile-portrait{params.merge({width: 320, height: 480})}
%iframe#mobile-landscape{params.merge({width: 480, height: 320})}
%iframe#desktop{params.merge({width: 960, height: 9999})}

May I have a little screenshot resuming your description? it’s difficult
to
answer :smiley:

Sorry :wink:

2012/7/6 ☈king [email protected]

“Ruby on Rails: Talk” group.
To view this discussion on the web visit
https://groups.google.com/d/msg/rubyonrails-talk/-/Ke5H_cHgLmsJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en-US.

lionel Bastian LONKAP TSAMBA
Étudiant 4e année Génie Informatique et Statistiques à Polytech-lille

Site: http://first-developer.fr

Email: [email protected]

Tel: +336 12 48 03 01

lionel Bastian LONKAP TSAMBA

Fourth year student in Software Engineering and Statistics

at the Lille University Graduate School of Engineers (Polytech-Lille)

Site: http://first-developer.fr

Email: [email protected]

Phone: +336 12 48 03 01