Create An Interactive Metro Style Grid Dashboard. Since Windows 8 released it's first pictures of the new design, people have been going crazy over the metro style. People love it, it's modern, it's clean, it's simple and makes it really easy to use on mobile devices, especially on tablet devices. In 2013 it is going to be a trend that you will start seeing more websites applying this metro style to their designs. But for websites is this a good idea, does this styling work for different website designs. In this tutorial we are going to create a metro style dashboard, to do this we are going to use a very useful . will allow you to create a drag and drop multi-column grid.
The best thing about this jQuery plugin is the of the grid boxes, it allows your visitors full customisation on the layout of the different grid boxes. The first thing you need to do to create the metro style grid you need to download from the link below. Gridster With the gridster Javascript attached to the list we can now create the HTML to use the Javascript. Créer un tableau de bord interactif en jQuery. Depuis que Windows 8 a publié les premières images de sa nouvelle interface, beaucoup de gens sont devenus fous autour du style Metro.
En 2013 la tendance va faire que vous allez voir de plus en plus de sites Web utiliser le style Metro pour leur design. Mais est-ce vraiment une bonne idée de design pour des sites ? C'est ce que nous allons voir dans ce tutoriel en utilisant un plugin jQuery très utile : Gridster. Gridster vous permet de créer des grilles multicolonnes dans lesquelles vous pouvez utiliser le drag and drop. Le layout de la grille ainsi créée est entièrement géré par le plugin, tout ce que vous avez à faire c'est définir le nombre de lignes et de colonnes de chaque boite. La meilleure fonctionnalité de ce plugin est la possibilité d'utiliser le drag and drop sur les boites, ce qui permet à vos visiteurs une personnalisation totale de l'apparence de la grille.
La première chose à faire pour créer une interface ressemblant à Metro est donc de télécharger ce plugin. Web technology for developers. DevDocs. CSS3 . Info - All you ever needed to know about CSS3. CSS Tutorials. CSS Beginner Tutorial A step-by-step guide to CSS basics.
Go here if you’re comfortable with basic HTML. Applying CSS - The different ways you can apply CSS to HTML.Selectors, Properties, and Values - The bits that make up CSS.Colors - How to use color.Text - How to manipulate the size and shape of text.Margins and Padding - How to space things out.Borders - Erm. Borders. Things that go around things.Putting It All Together - Throwing all of the above ingredients into one spicy hotpot. CSS Intermediate Tutorial Various odds-and-sods building on the basics of CSS. Class and ID Selectors: Make your own selectors without the need for sticky-backed plastic! CSS Advanced Tutorial Exploiting the versatile depths of CSS. Rounded Corners: Corners. Des formations vidéo de video2brain, leader européen sur le marché du e-learning.
Using jQuery Core. Design lessons for everyone, curated by top designers - Hack Design.