background preloader

Awesome Media Queries in JavaScript - enquire.js

Awesome Media Queries in JavaScript - enquire.js
The Lowdown What is it? enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries. JavaScript callbacks for media queries matching and unmatching. Clean & intuitive API Absolutely tiny - around 0.8kb minified & gzipped! Why should I use it? In responsive design, CSS media queries can only take you so far. enquire.js allows you to harness media queries in JavaScript, giving you the tools to create advanced responsive sites. Dependencies? None! The most you will need to do is provide a matchMedia polyfill if you wish to support old/incapable browsers. Downloads & All That Jazz Latest Build Grab the latest code, ready to go, from one of the locations below: Development — unminified Production — minified If you wish to browse/fork the source, you can do so on GitHub. Install via Bower To install via bower, enter the following at the command line: bower install enquire Install via npm To install via npm, enter the following at the command line: npm install enquire.js Match Related:  MEDIA QUERIES

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 cross domain - Respond.js on Subdomain using Tumblr CSS3 Media Queries CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. CSS3 Media Queries (demo) Check my demo and resize your browser window to see it in action. Max Width The following CSS will apply if the viewing area is smaller than 600px. If you want to link to a separate stylesheet, put the following line of code in between the <head> tag. Min Width The following CSS will apply if the viewing area is greater than 900px. Multiple Media Queries You can combine multiple media queries. Device Width The following code will apply if the max-device-width is 480px (eg. iPhone display). For iPhone 4 The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier). For iPad Sample Sites Colly

SEO : l'importance des noms de domaine en chute libre ? Abondance > Actualités > SEO : l'importance des noms de domaine en chute libre ? Intéressante étude du site SEOMoz sur l'influence des intitulés de noms de domaines (ce que l'on appelles des EMD pour Exact-Match Domains) dans une stratégie de référencement naturel. En d'autres termes, si vous vendez des matelas en mousse, le fait d'acheter le domaine matelas-en-mousse.com sera-t-il déterminant pour votre SEO ? Selon SEOMoz, la corrélation entre le classement d'un site et son nom de domaine est en perte de vitesse constante depuis 2010, comme le montre ce schéma (pour les domaines en .com) : Depuis le mois d'avril de cette année, SEOMoz a également détecté une baisse, légère mais significative, notamment lors du lancement de Penguin en avril dernier (même si le mois de juin semble avoir inversé la tendance) : En revanche, si on ne prend en compte que la 1ère position des SERP, les courbes ont tendance à être progressives en 2012 :

TodoMVC MeanMenu The Main Features Hide or show menu childrenTarget navigation element to swap out with MeanMenuOrientation adjustment (centered menu will reposition when you tilt the device)Control screen width at which MeanMenu activatesExpanding/Collapsing sub navigationBundled with configurable CSSQuick to setup and configureMedia Query independent The Demo The dedicated demo page All of the boring “how to implement” stuff is over on… The WordPress Plugin Buy via PluginHero The jQuery Plugin Github or download it straight away: MeanMenu zip download The Small Print This jQuery plugin is free for you to use and implement, we do not offer any official support for the plugin, if you would like to ask any questions though, please do over on our contact page. Please note: This is not a menu system replacement. If you are looking for drop down functionality on the desktop, MeanMenu doesn’t do it.

The Top 25 Responsive Design Tools Note: this piece was originally published on Net Magazine, who recently nuked about 10,000 articles when they moved over to Creative Bloq. In an effort to preserve the writing I did for them, I’m republishing those articles here on my blog. This article is still alive over at Creative Bloq, so you can also read it there. As responsive web design evolves, Brad Frost looks at some of the best tools, resources and thinking for crafting exceptional responsive experiences This article first appeared in issue 241 of .net magazine – the world’s best-selling magazine for web designers and developers. Over the past few years we’ve seen an explosion of web-enabled devices with varying resolutions, capabilities, form factors, pixel densities, interaction methods and more. It’s futile to create a dedicated web experience for every single device class out there, and the need to create a smart, flexible, adaptable web experiences is becoming more apparent every day. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

media queries for common device breakpoints | Responsive Web Design The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria. Before you start copying and pasting below, read why you don’t need device specific viewports. Le futur du journalisme passe par la compréhension du code, sur WIP cc @davanac @Pirhoo Crédit photo: Flickr/CC/dmitry-baranovskiy Le code, considéré comme la nouvelle langue vivante à afficher dans les CV, fait son apparition dans nombre de programmes scolaires. Aux Etats-Unis comme en France. Dans l’hexagone, la programmation algorithmique est désormais enseignée dans les classes de Terminales S – il y a même eu une question au BAC 2012 sur le sujet. >> Read this article in English >> Les Terminales S et les étudiants en journalisme… Via un enseignement intitulé «Langage et développement numérique», qui s’échelonne sur 12 semaines de cours, les étudiants vont s’attacher à comprendre – de l’intérieur – la structure des sites d’infos et des applications des éditeurs. Car le journaliste de demain, sans lui-même créer des interfaces, doit connaître quelques rudiments de code (HTML, PHP, CSS, Javascript). Un cours pas si imaginaire La paresse (que pourrais-je créer pour réussir à moins travailler?) Alice Antheaume

jQuery: Smooth Scrolling Internal Anchor Links | Sycha Web Design & Development November 13th, 2010Charlie Evans Here’s a neat little jQuery trick to fancy up your internal anchor links, by making them scroll smoothly to their target as opposed to jumping instantly. Internal anchor links are very common place, e.g. “back to top” links, or FAQ pages which list all the questions at the top. Making them visually scroll to their target not only looks a bit fancy, it also gives some visual feedback to the user as to their new position on the page. This is what it looks like in action, click the following link:Scroll to comments This technique is very simple. Set up your link as you normally would, e.g. href=”#comments” (where comments is the id of your target) Add a class=”scroll” attribute to the link element, so it now looks something like this: Finally add the following jQuery code wherever is most appropriate And that’s all there is to it

Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support. Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable. In addition to this update, Bootstrap now offers themes at themes.getbootstrap.com. Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3. You can read more here. Foundation 6 is a fairly major update which includes more grid flexibility, custom breakpoints, optional flexbox, and more. Like Bootstrap 4, Flexbox is now toggleable via Sass in Foundation 6. The Sass/CSS has been reworked and consolidated, and there are fewer default styles to override on common elements. Skeleton 2 was updated in December 2014 after remaining mostly unchanged for about three years.

Responsive design – harnessing the power of media queries Webmaster Level: Intermediate / Advanced We love data, and spend a lot of time monitoring the analytics on our websites. Any web developer doing the same will have noticed the increase in traffic from mobile devices of late. Over the past year we’ve seen many key sites garner a significant percentage of pageviews from smartphones and tablets. These represent large numbers of visitors, with sophisticated browsers which support the latest HTML, CSS, and JavaScript, but which also have limited screen space with widths as narrow as 320 pixels. Stacked content, tweaked navigation and rescaled images – Chromebooks Implementation As a starting point, simple, semantic markup gives us pages which are more flexible and easier to reflow if the layout needs to be changed. Liquid layout is a good start, but can lack a certain finesse. Viewports When is a pixel not a pixel? In reality you may find you need to use different breakpoints depending on how your site flows and looks on various devices.

@tactilize Wants To Make iPad Publishing Easy via @techcrunch The iPad is a great canvas for beautiful apps, but unless you are a pretty competent developer or designer, getting your own content onto the iPad isn’t exactly easy. Tactilize wants to make it significantly easier for writers, photographers, videographers and anybody else who produces interesting content to feature – and monetize – their works on the iPad. To do so, the company has developed an easy to use web interface for designing the layout around the content, and an iPad app for displaying it. The service, which describes itself as an “iPad content network,” is currently in private beta, but we got a chance to take it for a spin last week. Tactilize will also demo its service in Startup Alley during TechCrunch Disrupt in San Francisco next week. The iPad app should find its way into the App Store within the next two weeks and users can already reserve their usernames on the service here. For the time being, users are restricted to building their content one card at a time.

Multi-Level Push Menu An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. View demo Download source Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). Working with nested structures is quite tricky because when we, for example, move the parent then all children will of course move as well. Please note that we are using 3D Transforms which only work in modern browsers. We are using the following nested structure for the menu: …where each level is wrapped into a division with the class mp-level. Where we set the following styles for the elements: This is how the plugin can be called:

Related: