background preloader

A grid system for fixed and fluid layouts

A grid system for fixed and fluid layouts

Une taille de police en fonction de la largeur d’écran J’ai souvent eu l’occasion à travers mes divers projets Web mobile (responsive), d’avoir à réduire la taille des polices de titre car même un simple mot ne passait pas en largeur. Pour éviter d’avoir une césure sur chaque mot du titre, le plus simple était de s’autoriser une réduction approximative du corps. (approximative… façon de parler). Je vous propose des solutions relative. CSS3 à la rescousse Il existe une unité encore peu connue car prise en charge par nos navigateurs depuis peu de temps, il s’agit des unités relative au viewport. Pour résumer, nous allons proposer un corps de texte qui dépend de la largeur de la fenêtre du navigateur. Très bien, mais que représente une unité de vw, par exemple ? Prenons un exemple plus parlant. Mon corps de texte aura un équivalent de 10% de la largeur de mon viewport, à savoir la largeur de la fenêtre de votre navigateur. Il vous faudra donc recharger la page sur la page de démonstration à chaque redimensionnement de la fenêtre du navigateur.

The Goldilocks Approach to Responsive Web Design Workless - A classy HTML5, CSS3 framework 960 Grid System Separation, Abstraction, and Cascading in CSS | LispCast TLDR: LESS and Sass (and similar solutions) have saved CSS for three reasons: separation, abstraction, and cascading. While I welcome them, CSS still has other problems which I believe can be solved. I propose some solutions. Introduction A lot is said about LESS and Sass, and for good reason. But when people talk about why they are so great, they miss the main point. In this essay, I will try to put into words (and some pictures) what my intuition tells me as a developer and programming language enthusiast to clarify why CSS is innately unmaintainable, does not satisfy its own design goals, and why LESS and Sass make a bad language more bearable. Zero Degrees of Separation Way back when, people used HTML tables to style their pages. Those were the days of font tags and tables. Then CSS came along, and people talked a lot about separation of content from presentation. Your styles were still tied to the structure of the document they were styling. HTML and CSS are separate but not equal.

Susy All Susy3 API functions draw on the same shorthand syntax, which consists of two parts, seperated by the word of. The first part describes a grid-spanwidth, location (if needed), and spread (in any order): // <width> at <location><spread> $span: span(2);$span-spread: span(3 wide); // location is only needed with asymmetrical grids $span-location-spread: span(3 at 2 narrow); The second half describes the grid-contextcolumns, container-spread, and gutters in any order: // of <columns><container-spread> set-gutters <gutters> $of-columns: of 6;$of-columns-spread: of 12 wide;$of-columns-gutters: of 12 set-gutters 2em; There are two primary functions, span and gutter, which can be used anywhere you need to calculate grid math. span accepts the full shorthand syntaxgutter only uses the second half (with or without of) Except for span-width and location, all of those settings have global defaults, which can be set in the $susy configuration map:

kit scaffolding All headers from h1 to h6 are available. h3 Header h4 Header h5 Header h6 Header <h1>h1. Text elements You can use tags i or b, but they often use for icons or other stuff, so it is better to avoid them. StrongItalicSmall text Paragraph text <strong>Strong</strong><em>Italic</em><small>Small text</small>This is<abbr title="Abbr">Abbr</abbr><p>Paragraph text</p> Code Use it if you have any code you want to show to user. Address If you want to separate parts of an address, use several address tags. <address> <strong>Vetrenko Maxim</strong> <div>Gagaryinskiy 27 <br/>Moscow <br/> <abbr title="Cell phone">p:</abbr> <span>+7 960 628 6999</span> </div></address><address> <strong>Email</strong> <div> <a></a> </div></address> Blockquotes Quoted blocks used when you have some text cited from another source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Marked lists Numbered lists Descriptions Description lists

The Semantic Grid System