| /* | |
| A userstyle for Google+ | |
| It removes the clutter around your Stream in windows smaller than 700px wide. | |
| I use it in a Fluid instance of Google+ | |
| */ | |
| @media (max-width: 700px){ | |
| .a-p-la-T, | |
| #gbz li, |
| // This script shows a badge with the number of new messages in the dock of your Fluid instance of Google+ | |
| // The count is reset when you click somewhere in the body | |
| // This version of the script is written by Mathias Bynens | |
| (function(window, document) { | |
| var nodeList = document.getElementsByClassName('a-b-f-i a-f-i'), // live NodeList | |
| fluid = window.fluid, | |
| length; |
| /* | |
| An adaptive user style for IRCCloud which hides options in smaller screens | |
| This is meant for browsers which can be resized | |
| It is not intended for devices with small screens. | |
| */ | |
| /* your source here */ | |
| @media (max-width: 900px) { | |
| #bufferView { |
| // ==UserScript== | |
| // @name Delicious - input | |
| // @namespace http://vasilis.nl/ | |
| // @description Embiggens the textarea on Delicious | |
| // @include http://www.delicious.com/save* | |
| // ==/UserScript== | |
| (function() { | |
| var el = document.createElement('style'); | |
| el.innerHTML = '#saveNotes{min-height:200px!important;min-width:600px;font-size:16px}.fieldMsg{width:594px!important}'; |
| <!doctype html> | |
| <!-- | |
| WARNING! | |
| You probably shouldn't use this technique since images never show up | |
| if the script isn't loaded for one reason or another. Some reasons: | |
| - The content is viewed using a RSS reader | |
| - The content is viewed with a read-it-later service | |
| - The user has a flaky connection (hotel wifi, Dutch train, etc) | |
| --> |
Some touch devices trigger the mouseover event on the first touch when something changes visibly. This happens even with simple changes like a new color or removal of an underline. The click-event only fires the second time you touch.
This is easy to solve, if modernizr is included, by adding the class .no-touch to each :hover rule.
.no-touch a:hover { color: #06e; }
The common way to use media queries is to group all styling for a specific query. Leenull, a colleague of mine, came with the idea to use media queries on a component level. This might make make complex stylesheets easier to maintain.
I wonder what you think of it. Please let me know in the comments. Here's a link to a working example.
.item1 {
I love using OOCSS grid names like .size1of2 or .size3of5, they are really handy. The problem I have with them though is that they make no sense in a responsive design where a grid of .size1of3 on a big screen might be a grid of .size1of2 on a slightly smaller screen.
Use the same classNames and don't care about the exact width. So a .size1of3 can actually be 33% wide on a big screen and 50% wide on a smaller screen and probably 100% on a very small screen. I have a problem with this, you might understand that.
| <?php | |
| // First check is the 'vimeo' cookie exists | |
| if(!isset($_COOKIE['vimeo'])) { | |
| // The cookie doesn't exists, we need JavaScript to feature detect soem things | |
| ?> | |