Difference between revisions of "Layout"

From Things and Stuff Wiki
Jump to navigation Jump to search
Line 274: Line 274:
 
== Video ==
 
== Video ==
 
* [http://webdesignerwall.com/tutorials/css-elastic-videos CSS: Elastic Videos]
 
* [http://webdesignerwall.com/tutorials/css-elastic-videos CSS: Elastic Videos]
 +
 
* [http://groups.drupal.org/node/233238 Responsive Media]
 
* [http://groups.drupal.org/node/233238 Responsive Media]
 +
  
 
* http://fitvidsjs.com/
 
* http://fitvidsjs.com/
 
** [http://drupal.org/node/1413558 FitVids: Which class selector to use with embed videos from youtube]
 
** [http://drupal.org/node/1413558 FitVids: Which class selector to use with embed videos from youtube]
 +
  
 
* [http://drupal.org/node/1535954 Media: YouTube - Responsive Embeds]
 
* [http://drupal.org/node/1535954 Media: YouTube - Responsive Embeds]
 +
 +
 +
* https://github.com/jeffehobbs/embedresponsively - Embed Responsively helps web content producers transform fixed width embedded content into fluid responsive embeds.
 +
  
 
* http://drupal.org/project/fitvids - js lib
 
* http://drupal.org/project/fitvids - js lib

Revision as of 23:54, 9 April 2019

#rwd

Basics

to review;

Examples

Templates

Viewport

Device sizes

Media Types and Queries


Examples

@media <media type (expressions)> {
  /* media-specific rules */
}

 @media screen and (min-width: 500px) and (max-width: 800px) { ... }

or 

<link rel="stylesheet" media="<media type (expressions)>" href="specific.css" />

Firefox needs spaces before and after "and"



newer

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />


Poly, etc.

  • Respond.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
  • device.js - a starting point for doing semantic, media query-based device detection without needing special server-side configuration, saving the time and effort required to do user agent string parsing.


Articles


320 and Up

@media only screen and (min-width: 480px) {
 /* 480 =================================================== */
}
@media only screen and (min-width: 600px) {
 /* 600 =================================================== */
}
@media only screen and (min-width: 768px) {
 /* 768 =================================================== */
}
@media only screen and (min-width: 992px) {
 /* 992 =================================================== */
}
@media only screen and (min-width: 1382px) {
 /* 1382 =================================================== */
 body {
   max-width: 1440px;
 }
}

Need to confirm 320andup Sass to multifile so mobile doesn't get desktop sized styles.


Other

/* Flexible iFrame */

.Flexible-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

 <!-- Responsive iFrame -->
 <div class="Flexible-container">
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&source=s_q&hl=de&geocode=&q=Bern&aq=&sll=46.813187,8.22421&sspn=3.379772,8.453979&ie=UTF8&hq=&hnear=Bern&t=m&z=12&ll=46.947922,7.444608&output=embed&iwloc=near"></iframe>
 </div>



Rearranging elements

text formatting; 

@media (max-width: 480px) {
   .your-particular-selector br { display:  none; }
}

text-content; responsive text

Navigation

select menu;

  • TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts ul and ol navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item. This isn't the first plugin to do this and it doesn't provide a lot of options, but it might be the smallest (file size).
  • http://css-tricks.com/blog/convert-menu-to-dropdown/


Images

  • Imager.js is an alternative solution to the issue of how to handle responsive image loading, created at the BBC [2]

scrset

Tables

JavaScript

See also JS_scripts#Responsive

Shim

  • css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.

Performance

Video





Tools

Responsive testing

  • ish. is yet another viewport resizer.

Mobile testing

Other

PhoneGap

Ionic

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Layout&oldid=50427"