Skip to content

Instantly share code, notes, and snippets.

@caneruguz
caneruguz / media_queries.css
Last active August 29, 2015 14:27 — forked from staydecent/media_queries.css
Example of various media queries for responsive web design.
/* Media queries used on blog.staydecent.ca by Adrian Unger
check my full source at:
http://blog.staydecent.ca/static/css/style-0.1.6.css */
@media only screen and (min-width:768px) and (max-width:1269px) {
/* In my particular design, I used a fluid grid limited to a
max-width of 1140px, while (if there is enough room)
pushing the menu outside of layout, requiring a total
limit of at least 1270px.
So, this first query applies to any screen-width less
  • set up sauce labs/browserstack account (remote tests)
  • download selenium server (not selenium IDE) & install Java (for local tests)
  • install phantomjs (brew install phantomjs) (probably doesn't work with intern-geezer)
  • to structure a directory: git clone https://github.com/theintern/intern-tutorial
    • we don't care about the application, so you can
      • rm -r app
      • rm index.html
  • step through steps 1 and 2 of the intern tutorial
    • but! don't install the main intern package on npm. you'll use npm install intern-geezer --save-dev. the geezer branch is capable of driving
    • you also don't need to worry about changing the packages attribute in loader (that's for dealing with the local app)