10 Excellent Tools for Responsive Web Design By Jason Gross So, you’ve decided to venture into the creation of responsive web designs. Wonderful! With the browsing landscape diversifying into mobile devices, netbooks, desktops and so forth, responsive web designs allow web designers to provide different layouts for specific devices (based on screen size and browser features) giving site visitors an optimal user experience. So now, you’ve determined that it would be beneficial to create responsive web designs. Tools have started to spring up to provide us with shortcuts and helpers for common responsive web design tasks. I divided the tools in this list into four categories: Responsive typographyFlexible imagesResponsive web page layoutsTesting and cross-browser support Responsive Typography First, let’s look at two tools (out of the many out there) that allow us to create beautiful, adaptive typography. 1. 2. Another jQuery plugin, FitText helps you make your headlines responsive. Flexible Images 3. imgSizer.js 4. 5. 6. 7. 8. 9. 10.
Help! I Don’t Know JavaScript! For all the interested MooToolers in the making out there, I have compiled a list of resources which should give you everything you need to know to get started in client-side development. Tools of the Trade These are the prerequisites of Web development. Firefox: You’ll want to use Firefox for development. But you’ll also need to have all the browsers you can manage to install on your machine (and other machines) in order to check cross browser support. Essential Extensions Firebug: The best plugin ever, Firebug is the difference between bashing your head against the keyboard and knowing what’s going on with the browser.Web Developer Toolbar: Gives you awesome power over websites. Learning The Basics Don’t let not knowing HTML put you off Web development! How to Create This place is pretty nice. Mozilla Developer Center Probably the most inclusive information available on the Web, especially for developing for Firefox or Mozilla. W3 Schools Microsoft’s Developer Network Other Places Bonus Points
Sass - Syntactically Awesome Stylesheets Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup. Craftyslide, un slideshow jQuery simple et léger - Megaptery Les plugins jQuery qui génèrent un diaporama sont nombreux, mais ils sont souvent lourds à charger du fait des nombreuses options qui ne sont pas forcément utilisées. Avec Craftyslide, on va à l’essentiel : un slideshow simple, léger et efficace ! Pourquoi Craftyslide ? Craftyslide est né d’une raison assez originale. En s’inspirant du plugin jQuery Slides qui a été conçu avec le même objectif, Craftyslide permet de mettre en place un diaporama simple, avec seulement cinq options de base. Utilisation de Craftyslide Utiliser Craftyslide sur votre site est facile ! Puis définissez la structure HTML du slideshow. Et pour une initialisation basique du plugin : C’est fini. Quelques options Vous avez à disposition cinq options de base pour personnaliser au mieux votre diaporama : Pour utiliser les options, on procède de la manière suivante : Vous cherchez un plugin jQuery pour mettre en place un slideshow simple et léger sans vous embêter et qui réponde à vos besoins ?
10 Randomly Good jQuery Plugins jQuery has been continuously giving its share in developing sites. Check out this list of random jQuery plugins that we’ve collected from awesome jQuery developer Addy Osmani. Very nice plugins and I’m sure you haven’t seen most of these. Have fun! 1. In this tutorial you will learn how to build a single-page application (SPA) supporting graceful degradation using some of jQuery’s Best friends; DocumentCloud’s Backbone.js, Underscore.js, LAB.js and jQuery templating to name but a few. Source 2. Learn how you can use CSS3 transitions to power your application’s animations with jQuery’s .animate() method as a fallback where transitions aren’t supported. Source 3. Learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Source 4. RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up. Source 5. Source 6. Source 7. Source Source 9. Source 10. Source
Responsive Measure: A jQuery plugin for responsive typography Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text. It also has the ability to generate a resolution independent font-scale based on the ideal font-size. $(document).on('responsiveMeasureUpdated', function(e, data) { $('.giga').css('fontSize', data.fontRatios[9] + 'px'); $('h1').css('fontSize', data.fontRatios[8] + 'px'); $('h2').css('fontSize', data.fontRatios[7] + 'px'); $('h3').css('fontSize', data.fontRatios[6] + 'px'); $('p').css('fontSize', data.fontRatios[5] + 'px'); $('.sm').css('fontSize', data.fontRatios[4] + 'px'); }); Check out the examples to see the plugin in action.
Portfolio Image Navigation with jQuery Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate. View demo Download source The beautiful photography is by Angelo González. The Markup For the markup, we’ll have a main wrapper div with the background, the arrows and the gallery containers inside: Now, let’s take a look at the style. The CSS First, let’s define the style for the main container. The background will also be fixed and we’ll add a background image that creates the spotlight effect: The gallery will be positioned absolutely, just like it’s inner div: The gallery will also occupy all the space of the portfolio: We’ll fix the z-index of the inside div in order for keeping the stacking right: Now, we’ll style the arrows. And then we’ll style all the single arrows: Each image will be centered.
How to create a timeline slider with JQuery | KCLARK Web Design Many website has a long company history and they want to show their history. I will show you how to create a timeline slider with JQuery. You can follow me by reading the comments in the codes. First, start by loading in the necessary libraries and external files in the head. I have chosen Google API and JQuery UI for this slider. I set up to holde the content, to contained the content items, to hold timeline slider year 2002 and , , to set up the columns in the slide. The HTML header and slider Structure <! You will set up the navigation bar in this section. The HTML header and timeline navigation bar Structure <div style="clear: both;"></div> <! I set up the reset CSS code to remove the browsers default and style for the slider. The CSS slider Structure /*CSS reset*/ Style for the navigation bar. The CSS navigation bar Structure
Flat UI Header 3The Vatican transitions to a Header 4Great American Bites: Telluride's Oak, The Header 5Author Diane Alberts loves her some good Header 6With the success of young-adult book-to-movie Paragraph Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Image Lead Text Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quote Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Small Font Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
RSS Feeds Reader Plugin for jQuery - Zazar Website Builder This plugin will read RSS feeds from website URL using the Google Feeds API. It produces structured HTML with in-built CSS classes for styling. Simple and easy to use. Features Supports Atom 1.0, RSS 2.0, RSS 1.0 & RSS 0.9x. For jQuery versions 1.4, 1.5, 1.6 and 1.7. Specify the number of feeds to return. Choose to include header, date and description. Specify the title HTML tag. Choose to use either a brief or full description (when available). Produces all HTML code and style classes. Customised error message. Support for SSL requests. Specify the target for feed links. Supports media attachments using the enclosure tag. User callback function. Sort by title or date. Demonstrations Basic RSS feed example Animating RSS feeds with zFramework RSS feed with media attachments Multiple RSS feeds with ticker animation Selecting RSS feeds from a menu RSS feed with images and ticker animation RSS feed with custom fonts using Cufon Displaying RSS feeds with jQuery Mobile How to sort feeds by title and date Download No