Mes liensShaared links2014-07-29T22:19:29+02:00https://xoofoo.org/paper/https://xoofoo.org/paper/https://xoofoo.org/paper/ShaarliThe Code Tap › PatternTaphttps://xoofoo.org/paper/?h1eXVw2014-07-29T22:19:29+02:002014-07-29T22:19:29+02:00— Permalink]]>Ridiculously Responsive Social Sharing Buttonshttps://xoofoo.org/paper/?jbhoOA2014-07-27T21:26:38+02:002014-07-27T21:26:38+02:00
RRSSB is built with SASS, so you can easily customize it by tweaking a few variables. SVGs allow for tiny file size and retina support. Add or remove icons as you see fit — the rest will fill in automagically in the container.
— Permalink]]>GitHub's CSS · @mdohttps://xoofoo.org/paper/?sBkE2w2014-07-27T21:23:58+02:002014-07-27T21:23:58+02:00— Permalink]]>12 Little-Known CSS Factshttps://xoofoo.org/paper/?dRQIbQ2014-04-16T23:47:52+02:002014-04-16T23:47:52+02:00
In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file some of these away for later use.
— Permalink]]>Understanding the Bootstrap 3 Grid System ♥ Scotchhttps://xoofoo.org/paper/?O0oLZA2014-03-11T13:02:16+01:002014-03-11T13:02:16+01:00— Permalink]]>Default Sizes for Twitter Bootstrap’s Media Queries ♥ Scotchhttps://xoofoo.org/paper/?9-5G9A2014-03-11T13:00:47+01:002014-03-11T13:00:47+01:00
Below you’ll find nicely formatted Media Queries for starting with either of the Bootstrap versions. You can use this as a starting point for your projects. It’s basically what I use when creating a new website or webapp. I’ve also provided links to Github for quick access.
— Permalink]]>How to optimize CSS deliveryhttps://xoofoo.org/paper/?msLTgA2014-02-02T13:18:48+01:002014-02-02T13:18:48+01:00
The way CSS is used on a webpage has overwhelmingly been determined by designers, not website owners. So the web designer is making lovely, well commented CSS code and has been placing it in several different files for clarity. They think, with merit, "I have done an amazing wonderful job". This is what they have been taught.
Unfortunately this practise and others ends up killing the performance of web pages.
As this realization gets out there, you will notice that web designers will start making code that helps their users by working as fast as possible, however, for the moment... You probably have CSS that is hurting your website rather than helping it.
— Permalink]]>CSS Zen Garden: The Beauty of CSS Designhttps://xoofoo.org/paper/?5Ubolw2014-01-19T13:43:50+01:002014-01-19T13:43:50+01:00
THE ROAD TO ENLIGHTENMENT
Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.
We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WASP, and the major browser creators.
The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.
SO WHAT IS THIS ABOUT?
There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.
CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.
— Permalink]]>Text Compression for Web Developershttps://xoofoo.org/paper/?2LJgDg2013-10-20T23:33:17+02:002013-10-20T23:33:17+02:00— Permalink]]>Automatic Numbering with CSS Counterhttps://xoofoo.org/paper/?ukSgaw2013-10-10T22:02:51+02:002013-10-10T22:02:51+02:00
As you may already knew, when we add lists with the <ol> element, the list is numbered automatically. By using CSS Counter, we can even number any element. So, let’s see how it is done.
— Permalink]]>Creative Loading Effectshttps://xoofoo.org/paper/?svIadQ2013-09-18T20:11:32+02:002013-09-18T20:11:32+02:00
Please note that the examples only serve as inspiration, they are dummies and not meant for production. You’ll have to use the transitions or animation together with a custom JavaScript solution.
— Permalink]]>Transitions for off-canvas navigationshttps://xoofoo.org/paper/?QYix7g2013-09-10T00:29:37+02:002013-09-10T00:29:37+02:00
The structure of our demo is very specific because we want to be able to show all effects in one page only. But in general, we need a sidebar element that will be either inside or outside of a push wrapper, depending on whether we want the sidebar to be on top of the push wrapper or under it.
— Permalink]]>Spriteboxhttps://xoofoo.org/paper/?mkIQHg2013-09-07T15:59:28+02:002013-09-07T15:59:28+02:00— Permalink]]>Master of the :nth-childhttps://xoofoo.org/paper/?78YYNw2013-09-05T19:29:35+02:002013-09-05T19:29:35+02:00— Permalink]]>Create CSS3 - Easy CSS3 Generatorhttps://xoofoo.org/paper/?KF5d_w2013-09-01T21:44:48+02:002013-09-01T21:44:48+02:00— Permalink]]>Device.jshttps://xoofoo.org/paper/?nNN-XQ2013-09-01T21:42:15+02:002013-09-01T21:42:15+02:00— Permalink]]>Responsive Web Page Layouthttps://xoofoo.org/paper/?o8wJ1g2013-08-29T21:54:09+02:002013-08-29T21:54:09+02:00— Permalink]]>extractCSShttps://xoofoo.org/paper/?kMOuGA2013-08-19T22:56:08+02:002013-08-19T22:56:08+02:00— Permalink]]>Crunch - The LESS editor and compiler that almost makes it too easy.https://xoofoo.org/paper/?wPQHtw2013-08-16T22:50:13+02:002013-08-16T22:50:13+02:00— Permalink]]>Rachethttps://xoofoo.org/paper/?UeISYg2013-08-15T23:05:02+02:002013-08-15T23:05:02+02:00— Permalink]]>Ink - Interface Kithttps://xoofoo.org/paper/?0TeUmQ2013-08-15T12:10:42+02:002013-08-15T12:10:42+02:00
It offers a fluid and responsive grid, common interface elements, interactive components, a design-first approach with ease of use and simplicity at its core. Start integrating Ink in your projects and remove the hassle of building the basics, staying free to focus on what's important.
— Permalink]]>Font Awesome Text-Decoration and Link Underlinehttps://xoofoo.org/paper/?gFGpEA2013-08-13T22:22:44+02:002013-08-13T22:22:44+02:00— Permalink]]>Absolute Horizontal And Vertical Centering In CSShttps://xoofoo.org/paper/?WT8Lrg2013-08-12T00:51:02+02:002013-08-12T00:51:02+02:00
There, Simon linked to this jsFiddle that blew every other method out of the water (the same method was also mentioned by Priit in the comments). Researching further, I had to use very specific keywords to find some other sources for this method.
Having never used this technique before, I put it to the test and discovered how incredible Absolute Centering really is.
— Permalink]]>General CSS notes, advice and guidelineshttps://xoofoo.org/paper/?miZEeA2013-08-05T20:59:51+02:002013-08-05T20:59:51+02:00
- Keep stylesheets maintainable
- Keep code transparent and readable
- Keep stylesheets scalable
There are a variety of techniques we must employ in order to satisfy these goals.
The first part of this document will deal with syntax, formatting and CSS anatomy, the second part will deal with approach, mindframe and attitude toward writing and architecting CSS. Exciting, huh?
— Permalink]]>The Minimum Code for a CSS Transitionhttps://xoofoo.org/paper/?MPdQwA2013-08-05T19:49:10+02:002013-08-05T19:49:10+02:00— Permalink]]>CSS3 layout workshophttps://xoofoo.org/paper/?aSUiUw2013-06-28T20:47:30+02:002013-06-28T20:47:30+02:00
Hello, and welcome. In this index file, I have provided links to all my final examples, so you can access them more easily, especially from mobile devices.
Thanks!
Chris Mills
— Permalink]]>The Semantic Grid Systemhttps://xoofoo.org/paper/?IQ67Bw2013-06-24T23:38:38+02:002013-06-24T23:38:38+02:00
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any .grid_x classes in your markup. Oh, and did we mention it's responsive?
Runs on LESS, SCSS, or Stylus.
— Permalink]]>Flat UI Free - PSD&HTML User Interface Kithttps://xoofoo.org/paper/?bcBsCQ2013-06-24T21:20:06+02:002013-06-24T21:20:06+02:00
Flat UI Free is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers.
We have considered your needs in developing the html version of our UI Kit, which contains the same elements as the PSD version and are perfect for creating great websites. With this UI Kit, you can spend even less time on routine work, saving that time for creativity.
Flat UI Free contains many basic and complex components which are great for designers to have at hand: buttons, inputs, button groups, selects, checkboxes and radio-buttons, tags, menus, progress bars and sliders, navigation elements and more.
— Permalink]]>Editr - HTML, CSS, JavaScript playgroundhttps://xoofoo.org/paper/?adrpjg2013-06-24T00:16:28+02:002013-06-24T00:16:28+02:00
- easy setup
- based on ACE Editor
- supports multiple instances on one page
- configuration via JS object or HTML attributes
— Permalink]]>Pingendo - web authoring with comforthttps://xoofoo.org/paper/?DF-AWw2013-06-24T00:14:39+02:002013-06-24T00:14:39+02:00
Quickly create rich layouts with a clear DOM tree-editor and dozens of ready-to-use snippets.
Inspect and edit all CSS rules visually, producing clean, standard CSS3.
Enjoy simplified input for complex values such as colors, gradients and 2D transformations.
— Permalink]]>Animate.css - a bunch of plug-and-play CSS animationshttps://xoofoo.org/paper/?FTdxZw2013-06-18T22:28:03+02:002013-06-18T22:28:03+02:00— Permalink]]>Using CSS attr and content for Tooltipshttps://xoofoo.org/paper/?dCDUlA2013-06-11T21:41:35+02:002013-06-11T21:41:35+02:00— Permalink]]>The Pastry Box Projecthttps://xoofoo.org/paper/?j4E3ZQ2013-06-03T20:56:41+02:002013-06-03T20:56:41+02:00— Permalink]]>Css Tv | Css Newshttps://xoofoo.org/paper/?2fKQ4Q2013-05-26T19:39:33+02:002013-05-26T19:39:33+02:00— Permalink]]>DocHub | Instant Documentation Searchhttps://xoofoo.org/paper/?rXhC9A2013-05-24T23:26:18+02:002013-05-24T23:26:18+02:00— Permalink]]>50 Useful CSS Snippets Every Designer Should Havehttps://xoofoo.org/paper/?PtWLmA2013-05-24T17:25:50+02:002013-05-24T17:25:50+02:00— Permalink]]>CSS Modalhttps://xoofoo.org/paper/?mNhoyA2013-05-22T21:57:53+02:002013-05-22T21:57:53+02:00
The modals are designed using responsive web design methods. They work on all screen sizes from a small mobile phone up to high resolution screens.
— Permalink]]>Responsive design. Ou comment faire entrer une girafe dans une Twingo en trois tempshttps://xoofoo.org/paper/?gbSvqQ2013-05-21T22:51:16+02:002013-05-21T22:51:16+02:00
Mais Internet s’invite maintenant dans la rue et devient mobile : netbooks, tablettes, smartphones… Les supports se multiplient, et sans la moindre norme. A chaque marque, chaque modèle, chaque support, correspondent des tailles d’écran et des formats spécifiques. On en arrive au final à ça : il existe actuellement plus de 4500 résolutions d’écran différentes sur le marché !
Or, si afficher un site web sur un écran 19 pouces est aisé, afficher le même site sur un écran 3,5 pouces représente un challenge de taille : c’est vouloir faire entrer une girafe dans une Twingo.
Les développeurs ont donc imaginé des techniques de sioux pour répondre à ce challenge.
— Permalink]]>Style your website with bluePenhttps://xoofoo.org/paper/?9qKNxA2013-04-21T20:51:25+02:002013-04-21T20:51:25+02:00
The power of styling is now in your hands. bluePen can be easily installed even on a dynamic website.
— Permalink]]>Pure CSS3 breadcrumb navigationhttps://xoofoo.org/paper/?4BU-FQ2013-04-21T20:48:59+02:002013-04-21T20:48:59+02:00
This tutorial also uses CSS Counters to number the breadcrumb links. The first breadcrumb displays the use of gradients for the links whereas the second demo uses flat colors along with transitioned hover effects for the navigation.
— Permalink]]>shame.csshttps://xoofoo.org/paper/?d5B65g2013-04-21T20:46:42+02:002013-04-21T20:46:42+02:00
The problem : We all know that, no matter how hard we may try, sometimes we do need to use quick fixes, hacks and questionable techniques in our code. It happens, whether we like to admit it or not.
— Permalink]]>LayoutIt! - Interface Builder for Bootstraphttps://xoofoo.org/paper/?F0VULQ2013-04-21T20:44:54+02:002013-04-21T20:44:54+02:00
using our Drag & Drop Interface Builder.
— Permalink]]>Introduction au responsive design : comment rendre son site responsive sans trop d’efforts ?https://xoofoo.org/paper/?Ndihsw2013-04-10T20:51:57+02:002013-04-10T20:51:57+02:00
Seulement au final, peu de sociétés ont le courage de se lancer dans cette voie, et de transformer leur site pour que celui-ci soit “100% responsive”. En effet, cela demande énormément de travail : il faut un design totalement adapté, une intégration quasi-parfaite, des choix marketing importants, une recette plus complète (définitions d’écran * navigateurs web = démultiplication du nombre de tests), etc.
Aujourd’hui, je vais donc vous présenter rapidement en quoi consiste la création d’un site responsive, et comment transformer, sans trop d’efforts, votre site classique en un site agréable à consulter sur tablettes et smartphones !
— Permalink]]>A Useful Collection Of CSS3 Generatorshttps://xoofoo.org/paper/?1QjoRg2013-04-09T10:09:29+02:002013-04-09T10:09:29+02:00
These are very interesting tools which can help you a lot when wanting to learn CSS3 faster. Although most people don’t use them like that, instead they use it just to… well, generate CSS code.
It’s not a crime to generate CSS code, a lot of people are also using CSS generators because time is really important and these tools save a lot of time. Imagine that there’s a CSS generator for almost everything: border generator, background generator, box generator, gradient generator, shadow generator and the most popular buttons or menu generators.
— Permalink]]>CSSDB: A Database Of CSS Librarieshttps://xoofoo.org/paper/?eoiK1g2013-03-29T06:19:02+01:002013-03-29T06:19:02+01:00— Permalink]]>15+ Fresh And Stunning CSS3 Tutorialshttps://xoofoo.org/paper/?7tVv2A2013-03-25T21:40:12+01:002013-03-25T21:40:12+01:00— Permalink]]>Working with flexboxhttps://xoofoo.org/paper/?rbE_Yg2013-03-24T22:10:41+01:002013-03-24T22:10:41+01:00
In this article I'll walk you through the latest flexbox specification and use a simple demo to show you how to create a layout that's flexible, and has equal height columns and elements that you can arrange in any order, regardless of their order in the HTML source.
— Permalink]]>Xoops Pi Enginehttps://xoofoo.org/paper/?tuR90w2013-03-24T12:51:20+01:002013-03-24T12:51:20+01:00
The Engine is released under a New BSD License and the project is intended to promote a sustainable ecosystem that benefits all contributors and users.
The Xoops/Pi Engine is a successor of the XOOPS Project led by Ono Kazumi (onokazu), skalpa and Taiwen Jiang (phppp). The Pi Team is inspired by them and benefits from their experiences and spirit. Pi Engine will continue to inherit and promote XOOPS brand.
— Permalink]]>Le contexte de formatage block en CSShttps://xoofoo.org/paper/?xCOK7g2013-03-13T22:04:29+01:002013-03-13T22:04:29+01:00
Qui n'a jamais pesté contre des éléments flottants qui ne se comportent pas comme espéré ?
Qui n'a pas été une fois au-moins dérouté par des marges verticales venues de nulle part ?
Ces comportements, comme d'autres, sont décrits et expliqués au sein d'une spécification concernant le “Visual Formatting Model”, qui décrit globalement le concept de flux d’affichage, de boîtes et de modes de rendu visuel.
Voyons comment déchiffrer cette ressource cruciale…
— Permalink]]>BOWERhttps://xoofoo.org/paper/?uVMZyg2013-03-11T22:15:17+01:002013-03-11T22:15:17+01:00— Permalink]]>