public marks

PUBLIC MARKS from decembre with tag design

This year

JQUERY / CSS - EQCSS • Element Query CSS | Scoped CSS, Meta-Selectors, Element Queries

by 1 other
What are Element Queries? Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser. Unlike CSS @media queries, @element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains. Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they contain.

SCROLL - Responsive YouTube Player with Scrolling Thumbnail Playlist - Wooster Web Design

Responsive YouTube Player with Scrolling Thumbnail Playlist In this post we will work with an embedded YouTube video player using YouTube’s iframe embed code. Below the iframe we’ll add a horizontal playlist that includes a thumbnail image and title for each video. The playlist will scroll or slide left and right on click or tap. The player we are building in this is based on the MyList Video Player, but instead of automatically populating with a YouTube playlist, we are manually building our own playlist of selected YouTube videos.



FLICKT - mars 2015 - Introducing the New! Shiny ! Photolist framework -

Some photolist pages on Flickr use infinite scrolling, and some display results one page at a time. Regardless of how a page shows its photos, it starts to feel messy when there is an incomplete row of photos hanging off the end of the page. If there is more content in the set, the last row should be full. However, since we fetch photos from the API in fixed batch sizes, things don’t always work out so nicely, leaving “leftovers” in the bottom row. Borrowing from typesetting terminology, we call these leftover photos orphans. (We can also paginate backwards; leftovers at the top are technically widows but we’ll just keep using the term orphans for simplicity.)

SVG - Using SVG (witth Online TOOLS) | CSS-Tricks

Why use SVG at all?: Small file sizes that compress well__ Scales to any size without losing clarity (except very tiny)__ Looks great on retina displays__ Design control like interactivity and filters__

INFINITE SCROLLING - To Infinite Scroll or Not to Infinite Scroll: Where We’ve Come So Far | Design Shack

In fact, infinite scrolling was removed from the site after the number of clicks on favorites decreased and the search function was not used anymore.


Intelligence Artificielle : Marlowe blogue Automatique

Christopher Marlowe est un personnage virtuel, ayant accès au langage grâce à des scripts assez compliqués qu'il manie avec un certain talent littéraire... Le blog utilise jekyll avec textile et le design s'inspire de celui de überduper.

GITHUB - Un blog statique sur github avec Jekyll et Octopress

Les avantages d'un blog statique Voici ce que j'apprécie particulièrement dans un blog statique : Ultra light : Juste des fichiers .html et .js à déposer sur le serveur. La sécurité : On élimine les failles applicatives (sqli, exec(), file upload et cie...) même si la configuration du serveur n'est pas à négliger (bruteforce, SSI, webdav, etc.) Zero maintenance : Adieu MySQL, configuration PHP et surtout, plus besoin de penser aux mises à jour... La performance : Quoi de plus rapide à délivrer qu'un simple fichier statique qui va être mis en cache ? Hosting : Comme on a plus besoin de PHP+MySQL, on trouve plus facilement de l'hosting gratuit, notamment github. Le coté leet : Allo, t'es leet t'as pas de blog statique ? Allo ? Bien entendu un site statique a ses limites, mais javascript et les plugins/services third party sont là pour ça. Jekyll est généré par Jekyll et hosté sur github. C'est sûr, niveau design on peut mieux faire (normal je l'ai fait avec twitter bootstrap et le web design c'est pas ma tasse de thé), mais je vous rassure y a un max de site qui rendent bien avec Jekyll et Octopress a un bon thème par défaut. Clairement Octopress est beaucoup plus simple à utiliser que Jekyll : site créé en 2/3 lignes commandes avec un super design, avec Jekyll on part presque de zero. D'ailleurs si vous n'êtes pas très technique, je vous conseille de skipper les 3/4 de cet article que je me suis fait chier à rédiger, et voir directement comment Octopress est juste awesome et super fast à mettre en place : go TL;DR. Mais comme Octopress utilise Jekyll, mieux vaut comprendre comment Jekyll fonctionne sinon vous louperez pas mal de trucs pratiques. Je trouve la doc de Jekyll plutôt mal faite et mal organisée, d'où cet article (qui lui aussi sera mal fait et mal organisé).

CSS SPRITE - creaTTor - Set

creaTTor is the fastest way to find free assets for your design projects. We provide thousands of templates, vectors & other great resources

CSS ICON - ✿ Our favorite set —

by 12 others
What is A web and iPhone application for copying the ‘hidden’ characters that comes with the computer’s typefaces, to be pasted into emails, tweets, text documents, forums and whatever else you might need to spice up with an extra ♔, ฿ or, ❒.

CSS ICON - One div - Icons in pure css - The single element HTML/CSS icon database

by 1 other
All icons displayed on the website are realised in pure css with only one html div. The challenge is also to provide an alternative to SVG. Indeed icons allow precise borders preserved even resized (As vector format). Then we can see a clear interest in responsive design.

CSS - 2013 - Adaptive Images et Responsive Web Design |

Cédric Morin étudie une solution prête à l’emploi pour résoudre le casse-tête des Adaptive Images, adaptée aux sites dynamiques (une de plus, oui). Cette solution est complexe, mais est prévue pour être complètement automatisable (comprenez industrialisable).

CSS - EDITOR - plugin - With Emmet Turbo-Charge Your CSS - Tuts+ Web Design Article

Emmet is a collection of abbreviations that expand into html/xml/css, taking the idea of text snippets further. Visit the download page and install Emmet for your editor of choice. When working with Emmet, type in the appropriate abbreviation and hit the action key. In Sublime Text this is the TAB key. The syntax of the file you are working on will determine which abbreviations to use

CSS - Responsive Design - Break-points come from content

To me, it seems more realistic to check our layouts through viewports of arbitrary dimensions and shapes. We don't need anything fancy, we can simply drag the bottom right corner of our favorite desktop browser to enter... "Device Agnostic Mode".

E4X - Vjeux » JSX: E4X The Good Parts

E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I'm going to go over all the features of E4X and explain the design decisions behind JSX.


by 3 others
Responsive design bookmarklet : Viewport resizer is a browser-based tool to test any website’s responsiveness.


CSS - FONT - ONLINE TOOL - FontDropper 1000 - Play with Web Fonts

Play with Web Fonts: This is the easiest way to test or design with web fonts from WebINK. Just open FontDropper 1000 on any web page and start dropping fonts. See your changes instantly. Adjust font size, color, spacing and more

FIREFOX - Australis dans Nightly : testez la refonte de l'interface de Firefox - BlogZiNet

Australis ? : C’est l’itération de design visuel de Firefox la plus belle et obsédée par les détails jusqu’à maintenant : moderne, propre et confortable. Plus fondamentalement, c’est une rationalisation et une simplification de l’interface par défaut, pour désencombrer et mieux se concentrer sur la façon dont les gens utilisent un navigateur aujourd’hui. Enfin, il inclut un nouveau moyen facile de personnaliser le navigateur et de le faire vôtre. Il y a aussi beaucoup d’avantages supplémentaires : un meilleur modèle d’interface plus extensible qui accueillera les futures fonctionnalités et additions ; une présentation plus simple des modules complémentaires comme des égaux aux fonctionnalités intégrées du navigateur ; et un aspect et des comportements familiers sur toutes nos plateformes pour que Firefox ressemble à Firefox partout. N


Customiser IKEA - Mykea : Photos + Ikea = Custom Furniture Art - Customize your IKEA furniture | Mykea

This clever collective lets you design custom photo decals (or any artwork) to cover up your bland, standard-issue Swedish furniture. Upload a photo, use their template to make it fit your Ikea furniture from the Malm to the Billy bookcase and they’ll send you the decals to transform “meh” into “meee-yow!” It’s a radically new way of displaying your photos. Think of all the photographic splendor that has yet to grace your room and/or office — the gorgeous snap from your trip to Maui, the badass pic of you and your BFFs, or the sweet mural you shot the other day. And as a bonus, there’s no more need to be embarrassed when you watch that scene in Fight Club.

Créer un favicon: 8 sites pour les créer et mode d'emploi

Un favicon, c’est une photo iconisée avec une extension en .ico que vous trouvez la plupart du temps devant un url. Tous les blogs ne possèdent pas de favicon et c’est bien dommage car quand on a une bonne dizaine d’onglets ouverts, on aime bien se repérer grâce au favicon. (De loin le plus complet )

Icon Generator Pro – Pour faire de jolies icônes façon Adobe - Korben

Créer des jolies icônes façon Adobe (Photoshop, Dreamweaver, Indesign..etc.) : petite application Air (donc fonctionnant sous Windows, Linux et Mac) baptisée Icon Generator Pro. Grâce à cette appli, vous pourrez générer des icônes façon CS5 : Sans oublier le mythique macaron « en promo », « beta » ou « 2.0″. L’application est même capable d’uploader directement cette icône sur votre compte twitter pour en faire votre image de profil (le truc trop inutile). Icon Generator Pro est téléchargeable ici gratuitement.

Posterazor - Freeware - Un autre outil simple pour faire vos propres affiches - MakeUseOf

Tout ce que vous avez besoin est une idée, le freeware posterazor et une imprimante couleur. Posterazor est open source et un téléchargement très petit à 484KB. extrême portabilité, l'interface très simple, et Windows, Mac OSX et Linux. Grand nombre de formats.. Consultez le "HowTo MakeUseOf : Gratuit & énormes affiches personnalisées pour votre mur , article qui montre comment imprimer des sections d'une grande image sur du papier de format standard, et assembler le tout comme une immense affiche. L'assistant est simples : juste 5 étapes à partir de l'image de départ à l'affiche fini. Des zones de chevauchement de marge sont nécessaires pour le collage des pièces ensemble. Dans la dernière étape, l'affiche est enregistrée dans un fichier PDF multi-pages. Tout ce qui reste maintenant, c'est le travail d'impression des feuilles et de les assembler sur avec de la colle sur les bords chevauchants.