flov + tutorial   281

Animate a Container on Mouse Over Using Perspective and Transform | CSS-Tricks
»I’ve been working on a website in which large pictures are displayed to the user. Instead of creating a typical lightbox effect (a zoom-in animation with a black overlay) for these large pictures, I decided to try and make something more interactive and fun. I ended up coding an image container that tilts as the user moves the mouse cursor above it.«
webdesign  css  javascript  fx  tutorial 
march 2018 by flov
Understanding Web Fonts and Getting the Most Out of Them | CSS-Tricks
»Using your own fonts instead of system fonts is getting easier, but it’s still an evolving field. We’ll go over the different types of font formats and cover tips and best practices for them in this post. We’ll also dive into more in-depth features for those of you who want to level up and aim to perfect the craft with advanced concepts and considerations when using web fonts. In the end, you’ll hopefully feel equipped not only to put web fonts to use but to get the most out of them.«
webdesign  typography  font  bestPractices  tutorial  reference 
february 2018 by flov
Direction Aware Hover Effects | CSS-Tricks
»This is a particular design trick that never fails to catch people's eye! I don't know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I'd round a few of them up here.«
css  webdesign  fx  tutorial  javascript 
february 2018 by flov
Font-display playground
»With the new font-display attribute, you can control the length of each of these periods, and what happens when one of them fails. There are 4 different values: block, swap, fallback and optional. There's also auto, which usually ends up being the same as block.«
webdesign  webdev  typography  font  css  tutorial  reference 
january 2018 by flov
Flexbox and Grids, your layout’s best friends
»We decided to debunk the myths around Flexbox & Grids in order to show you the power of these two technologies working together.«
webdesign  css  grid  tutorial  reference 
november 2017 by flov
Sketch symbols best practices (now that nested overrides are a thing)
»At Tradeshift, we’re beginning to maintain a central Sketch document with all our symbols. In order to be added to this document, a symbol needs to be of a certain quality. Everyone designing for us (and potentially our partners) will make use of this document, so we don’t want to be distributing anything but the most solid symbols.«
bestPractices  sketchApp  tutorial 
august 2017 by flov
Exploring Dynamic Layout in Sketch – Facebook Design – Medium
»As I found myself working with table layout in Sketch again and re-aligning every individual cell in a table for the umpteenth time, I started wondering whether there’s something I can do that would combine the WYSIWYG nature of Sketch with the power of prototyping with HTML and CSS.«
sketchApp  layout  responsive  plugin/addon/extension  tutorial  reference 
july 2017 by flov
NeoGAF - View Single Post - Deadly Premonition PC port locked to 720p, no gfx options (nm, Durante fixed it)
»Like Twin Peaks, Deadly Premonition is a wonderful, bizarre and unique experience. Unfortunately, every single version of this game has serious problems. The original 360 has the horrible over the shoulder camera and the PS3 version has an horrifically bad framerate. While the PC version suffers from a locked 720p resolution and no graphics options! However, thanks to modder Durante and some other dedicated fans, once you know how to make it work it is by far the best version. There are a few excellent guides that help with this, but many are out of date and some are incomplete. So I have put together this guide to help everyone new and old get this game up and running at its absolute best. Be warned though, even at it's best the game is pretty clunky. But we can at least get you running Deadly Premonition the best it can be.«
pc  game  info  reference  tutorial 
july 2017 by flov
Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API | CSS-Tricks
»Staggered animation, also known as "follow through" or "overlapping action" is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book "The Illusion of Life". At its core, the concept deals with animating objects in delayed succession to produce fluid motion. The technique doesn't only apply to cute character animations though. The Motion design aspect of a digital interface has significant implications on UX, user perception and "feel”.«
webdesign  animation  fx  tutorial 
july 2017 by flov
Handling Long and Unexpected Content in CSS | CSS-Tricks
»When we write CSS, sometimes we forget about some edge cases in the designs. For example, when the content is longer than we expected and we didn't account for that possibility, our design could break. We can't guarantee that our CSS will always work as expected, but at least we can reduce that by testing different types of content. In this article, we will go through different UI bugs from real-world websites so we can account for them from the beginning. Ready? Let's go!«
webdesign  css  tutorial  bestPractices  reference 
june 2017 by flov
Building Production-Ready CSS Grid Layouts Today – Smashing Magazine
»Today, we are in the early stages of a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.«
webdesign  css  grid  info  tutorial  reference 
june 2017 by flov
Some Extremely Handy `:nth-child` Recipes as Sass Mixins | CSS-Tricks
»There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twelve. There are some cool tricks that you can use to add some number-based logic to your CSS! Using :nth-child and :nth-last-child, you can get some surprisingly complex information without ever leaving your stylesheet.«
css  webdesign  tutorial  reference 
may 2017 by flov
Shared controller - Solutions - Kirby Forum
»A controller is always attached to a template. I needed to have the same code in three different controllers. I felt bad about duplicating the code. It also felt strange to create a plugin and jump between the controller and the plugin.«
kirby  info  tutorial  reference 
april 2017 by flov
transform | CSS-Tricks
»The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling.«
webdesign  css  info  reference  tutorial 
april 2017 by flov
Debugging Tips and Tricks | CSS-Tricks
»Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging.«
webdesign  webdev  css  javascript  debug  tutorial  reference 
april 2017 by flov
Unleashing The Full Potential Of Symbols In Sketch – Smashing Magazine
»No matter whether you are designing a whole design system or just a couple of screens, symbols in Sketch will help you keep your file organized and will save you a lot of time in the long run. In this article, I’ll share with you a few best practices and tricks to help you unleash symbols’ full potential.«
design  graphics  sketchApp  tutorial 
april 2017 by flov
Design + Sketch – Medium
»The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond.«
sketchApp  design  graphics  info  tutorial  resource 
april 2017 by flov
Getting Started with CSS Grid | CSS-Tricks
»But why is CSS Grid a big deal and why should we care? Well, CSS Grid is the first real layout system for the web. It's designed for organizing content both into columns and rows and it finally gives developers almost God-like control of the screens before us.«
webdesign  css  grid  reference  tutorial 
march 2017 by flov
Using CSS Transitions on Auto Dimensions | CSS-Tricks
»We've all been there. You've got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent.«
webdesign  css  tutorial 
march 2017 by flov
Creating Non-Rectangular Headers | CSS-Tricks
»Over at Medium, Jon Moore recently identified "non-rectangular headers" as a tiny trend. A la: it's not crazy popular yet, but just you wait, kiddo. […] So let's beat the crowd, and talk about a few ways of coding these up. Because let's face it: they do look pretty awesome.«
webdesign  css  tutorial 
february 2017 by flov
Get Started with Debugging JavaScript in Chrome DevTools  |  Web  |  Google Developers
»This step-by-step, interactive tutorial teaches you the basic workflow for debugging JavaScript in Chrome DevTools. The tutorial shows you how to debug one specific issue, but the general workflow you learn is helpful for debugging all types of JavaScript bugs. If you're using console.log() to find and fix bugs in your code, consider using the workflow outlined in this tutorial instead. It's often much faster and more effective.«
javascript  jquery  debug  tutorial  bestPractices  google  chrome/chromium 
january 2017 by flov
Grid by Example
»The CSS Grid Layout specification is one of a few new specifications that are redefining how we approach layout for the web. Alongside Flexbox and the Box Alignment Module it will become part of a modern layout system for websites and web applications. This site is growing collection of examples and video, with the aim of helping people understand how Grid Layout works.«
webdesign  css  grid  tutorial  reference 
january 2017 by flov
Tools And Resources For Editing, Converting And Optimizing SVGs – Smashing Magazine
»To help you make best use of this potential and tackle SVGs the right way, this article will provide you with tools and resources to simplify editing, converting, optimizing, and delivering SVGs. We’ll take a look at what you can do to make your SVG code lean and performant, dive deeper into dealing with browser bugs, and provide tips for designing an icon system.«
webdesign  svg  graphics  info  tutorial  bestPractices 
april 2016 by flov
The New Favicon • The Breakroom
»The recent release of Safari 9.0 brought a great new feature: pinned tabs. These tabs are locked to the lefthand side of your tab bar and stay in place, even when you open a new window or relaunch the browser. […] Anthony Piraino and I have been working on one for the Iconfactory and would like to share some of the things we learned.«
webdesign  icon  favicon  safari  tutorial  bestPractices 
december 2015 by flov
CSS Almanac | CSS-Tricks
Great CSS reference on Chris Coyier’s CSS-Tricks.
webdesign  css  reference  tutorial 
december 2015 by flov
Understanding and Manually Improving SVG Optimization | CSS-Tricks
»Three factors determine the optimized file size of an SVG: physical dimension, viewBox, and decimal precision. Arbitrarily setting any one of them can cost you valuable bytes—even kilobytes.«
webdesign  graphics  svg  bestPractices  tutorial 
june 2015 by flov
Getting Dicey With Flexbox
»What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake.«
webdesign  css  tutorial 
june 2015 by flov
The Making Of "In Pieces"
»Web-based interactive experiences are widely used in the modern age for a variety of reasons, predominantly for the advertising of premium high-street products and services. After discovering the little-known clip-path property of CSS, I embarked upon a five-month interactive production journey of my own with a different purpose: to raise awareness of the struggles of 30 similarly little-known endangered species.«
webdesign  css  process  tutorial 
june 2015 by flov
Transforms on SVG Elements | CSS-Tricks
»Just like HTML elements, SVG elements can be manipulated using transform functions. However, a lot of things don't work the same way on SVG elements as they do on HTML elements.«
webdesign  svg  graphics  css  animation  tutorial 
may 2015 by flov
How to build an asset firewall | Kirby
»Creating "secret" pages for logged in users is very easy in Kirby with the built-in user and authentication system. But how can you protect images and other files in your content folders from being accessed by any visitor?«
webdev  kirby  cms  firewall  security  tutorial 
may 2015 by flov
A Complete Guide to SVG Fallbacks | CSS-Tricks
»Here at CSS-Tricks, there's a lot of information telling you how wonderful SVG is. And as much as we want to convince you that SVG is for Everybody, SVG isn't as widely used as we would like. In fact, some people still (literally) don't get SVG. […] If you want to give the 95% of users on modern browsers all the benefits of SVG, but still provide a functional experience for the others, you need a fallback plan.«
webdesign  svg  graphics  tutorial 
may 2015 by flov
Chaining Multiple Blend Modes | CSS-Tricks
»The background-blend-mode CSS property is nifty in lots of ways. It gives developers the ability to blend one background-image with its own background-color, or even with another background-image that's been applied to that very same element. […] What's extra interesting is that you can chain these blend modes together.«
webdesign  color  css  tutorial 
april 2015 by flov
Fun with line-height! | CSS-Tricks
»In this article we'll focus on some trickery. If you know (or can figure out) the exact value of line-height, you can do some neat stuff!«
webdesign  css  typography  tutorial 
february 2015 by flov
The Gooey Effect | CSS-Tricks
»A while ago, Chris wrote about Shape Blobbing in CSS. […] these days, playing around with SVG filters, I figured I could use them to get around most of the problems of a pure CSS approach. Here you can see a gooey menu I made to demonstrate the effect.«
webdesign  css  svg  animation  fx  tutorial 
february 2015 by flov
Compositing And Blending In CSS
»Today, two main properties exist that allow us to blend elements and backround images by specifying one of 16 available blend modes.«
webdesign  css  color  image  info  tutorial 
february 2015 by flov
jQuery Learning Center
»Over the years, an ecosystem of blog posts, books, support forums, and channels has grown to help cover the hows and whys of developing with jQuery, as well as explaining best practices, techniques, and workarounds for common problems. […] This site represents the jQuery Foundation's ongoing effort to consolidate and curate this information in order to provide this crucial "narrative documentation" to our community«
jquery  javascript  reference  tutorial  info 
february 2015 by flov
Designer's guide to DPI
»This guide is designed as a "get started" or introductory read for the starting to intermediate designer who wants to learn or get more knowledge about cross-DPI and cross-platform design from the very beginning.«
design  webdesign  retina/hidpi  reference  tutorial 
august 2014 by flov
A Compendium of SVG Information | CSS-Tricks
»A Compendium of SVG Information: A huge pile of information about SVG.«
webdesign  svg  graphics  reference  tutorial 
july 2014 by flov
SVG `text` and Small, Scalable, Accessible Typographic Designs | CSS-Tricks
»Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word. This is something we might tell a graphic designer switching from print to web to avoid. It's too finicky. Too much touchy, unscalable absolute positioning. Too much risk from different font rendering behaviour. But with inline SVG, we can do it, and do it well.«
webdesign  typography  font  css  svg  tutorial 
may 2014 by flov
UniBeast: Install OS X Mavericks on Any Supported Intel-based PC
»The following guide is a complete walkthrough to installing or updating to the latest version of OS X. It requires no experience and all of the necessary installation and post-installation tools are available on tonymacx86.com.«
mac  pc  hackintosh  tutorial  reference  hardware  software 
april 2014 by flov
Downsampling, a simple method for making your pc-games look better. - NeoGAF
»Downsampling, also called OGSSAA : Ordered Grid SuperSampling AntiAliasing, is in this case the concept of rendering the game at a much higher, custom made, resolution than your monitor is capable of displaying and subsequently having the GPU rescale the image ( as in downsample ) to that of your monitor's native resolution to which the end result is a "cleaner", sharper and less aliased image.«
pc  game  graphics  info  tutorial 
april 2014 by flov
Designing and Building Websites With Macaw - Tuts+ Web Design Tutorials
»Macaw has been eagerly awaited since its Kickstarter campaign reached full funding back in November 2013. Pitched as the application which allows you to "stop writing code and start drawing it" Macaw promises to bring web design tools right up to date. Follow Adi Purdila as he introduces Macaw, examines its features and interface, then uses it to design and build a complete responsive website.«
macawApp  webdesign  tutorial  video 
april 2014 by flov
Łukasz Mazurek
Macaw tutorial videos by Łukasz Mazurek.
macawApp  webdesign  tutorial  video  youtube 
april 2014 by flov
Jesse Cohen
Macaw tutorial videos by Jesse Cohen.
macawApp  webdesign  tutorial  video  youtube 
april 2014 by flov
Basics of CSS Blend Modes | CSS-Tricks
»There are lots of designerly effects that we're used to seeing in static designs (thanks to Photoshop) that we don't see on the web much, with dynamic content. But that will change as CSS blend modes get more support. I'd like to look at the different ways of doing it, since it's not exactly cut and dry.«
webdesign  css  graphics  tutorial 
march 2014 by flov
Confused About REM and EM? | Jeremy Church
»REM can be confusing, especially without a solid understanding of its partner EM and their archvillain, the PX.«
webdesign  responsive  css  tutorial  reference 
february 2014 by flov
Frosted Glass Effect with Blur Filters and Masks | Viget
»Combining a blur effect and a mask to achieve a frosted glass effect is fairly straightforward in Photoshop.«
webdesign  graphics  fx  svg  css  tutorial 
february 2014 by flov
Shaun Inman // Automatic Conditional Retina Images
»One line of JavaScript and a few mod_rewrite rules and we have no fuss Automatic Conditional Retina Images. No DOM crawling. No redundant requests. No server-side scripts. No cookies? No problem, they just get the original image. The only change you might need to make to your workflow is explicitly defining image width and height in HTML (you should really be doing this already) and background-size in your CSS.«
responsive  image  retina/hidpi  javascript  mod_rewrite  server  tutorial 
january 2014 by flov
CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | CSS-Tricks
»I've fallen into the habit of creating CSS animations in my free time, inspired by things I come across during the day. To create the animations as I imagine them using as few elements as possible, I've found some tricks to make CSS do things you might not know it could do. I'd like to share them with you.«
webdesign  css  animation  tutorial 
january 2014 by flov
Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA
»Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? We’ll show you how to implement bulletproof font icons.«
webdesign  icon  font  css  accessibility  bestPractices  tutorial 
january 2014 by flov
Tutorials | Pods Framework
Overview of all the documentation articles on Pods CMS.
podscms  wordpress  php  webdev  tutorial  manual  reference 
january 2014 by flov
How to Secure Your VPN with Little Snitch — Tech Talk — Medium
»So you’ve bought a reliable VPN service, and your connection is now more secure. Good! But what if your VPN is not connected? […] Here’s a great way to force your connection to be secure on Mac OSX, without scripting or touching the command line.«
mac  software  tool  security  privacy  internet  vpn  tutorial  firewall 
january 2014 by flov
Tinted Images with Multiple Backgrounds | CSS-Tricks
»The background property in CSS can accept comma separated values. "Multiple" backgrounds, if you will. You can also think of them as layered backgrounds since they have a stacking order. If we layer a transparent color over an image, we can "tint" that image. But it's not quite as obvious as you might suspect.«
webdesign  css  image  tutorial 
november 2013 by flov
How to proportionally scale images that have dimension attributes | 456 Berea Street
»Allowing images to scale along with their container is an important part of responsive web design (and was so even before the term “responsive web design” existed). It’s really quite easy…«
webdesign  image  css  tutorial 
june 2013 by flov
Designing for Breakpoints · An A List Apart Article
»Jeremy Keith notes that what happens between the breakpoints is just as important as the breakpoints themselves—perhaps even more so. While I agree with this, we do have to start somewhere. In a way, this part of the process reminds me of storyboarding, or creating animation keyframes, with the in-between frames being developed later. We’re going to do that here.«
webdesign  responsive  css  tutorial 
june 2013 by flov
BARREL | Text-align: Justify and RWD
»Did you know that one of the most powerful tools for fluid and responsive layout has been a native feature for every browser since HTML 4?«
webdesign  responsive  grid  css  html  tutorial 
june 2013 by flov
Slider with Sliding Backgrounds | CSS-Tricks
»Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view. Let's try and pull it off on the web.«
webdesign  fx  css  html  javascript  tutorial 
may 2013 by flov
Line Clampin' | CSS-Tricks
»You want X lines of text. Anything after that, gracefully cut off. That's "line clamping" and it is a perfectly legit desire. When you can count on text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony. There are a couple of ways to get it done, none of them spectacular.«
webdesign  css  html  javascript  tutorial 
may 2013 by flov
Gradient Text | CSS-Tricks
»This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text.«
webdesign  css  typography  fx  tutorial 
april 2013 by flov
How to stop TWC ISPs sucking at Youtube | Mitch's Space
»A few terminal commands later to reject certain IP addresses and I was back to blazingly fast Youtube streaming (and Twitch.tv). Doing this will cause the stream to take 1-2 seconds to start because of the IP rejection handling, but then you are greeted with a silky smooth, ultra fast experience.«
youtube  terminal  server  tutorial 
april 2013 by flov
Hack Your Maps · An A List Apart Article
»Web maps have come a long way. Improved data, cleaner design, better performance, and more intuitive controls have made web maps a ubiquitous and critical component of many apps.«
webdesign  webdev  map  info  tutorial 
april 2013 by flov
A Detailed Explanation of How Photoshop Blend Modes Work - Photoshop Blend Modes Explained | Photo Blog Stop
»In this article I’m going to give you a high-level view of what the various blend modes do, and then I’ll dig deeper into the nuts and bolts of the blend modes by explaining some of the math involved, and their interrelationships with each other.«
adobePhotoshop  info  reference  tutorial 
april 2013 by flov
Using SVG | CSS-Tricks
»SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.«
webdesign  webdev  svg  css  html  bestPractices  tutorial  icon  retina/hidpi  javascript 
march 2013 by flov
Sketch Tips & Tricks Blog
»Sketch is a vector drawing app for designers and this is official channel for everything Sketch; tips, tricks, examples and tutorials. Updated regularly, we hope it’ll help you become better at Sketch and learn about its hidden depths.«
mac  graphics  software  sketchApp  tutorial  design  gui  vector  info  blog 
march 2013 by flov
Gradient maps
»I love gradient maps. I really, really love gradient maps. You should, too, because they’re insanely flexible, accurate and easy to work with.«
adobePhotoshop  tutorial  info 
march 2013 by flov
Responsive Typography: The Basics | Information Architects
»When we built websites we usually started by defining the body text. The body text definition dictates how wide your main column is, the rest used to follow almost by itself. Used to. Until recently, screen resolution was more or less homogenous. Today we deal with a variation of screen sizes and resolutions. This makes things much more complicated.«
webdesign  responsive  typography  info  tutorial  bestPractices 
february 2013 by flov
»A fresh mix of code snippets and tutorials.«
wordpress  html  css  jquery  htaccess  sourceCode  tutorial  reference 
december 2012 by flov
Eric's Archived Thoughts: Where to Avoid CSS Hyphenation
»There are some elements that you should avoid hyphenating. And since hyphens is an inherited property, it isn’t sufficient to set it for a limited number of elements and assume you’re done. You have to make sure you’ve turned it off for the elements that shouldn’t be hyphenated.«
webdesign  webdev  css  html  bestPractices  tutorial 
december 2012 by flov
Eric's Archived Thoughts: Should You Hyphenate?
»If you want hyphenation to work in a future-friendly way, you need a lang attribute. What older versions do will become of fading relevance. All of which raises a fairly important question: should you enable hyphenation?«
webdesign  webdev  css  html  bestPractices  tutorial 
december 2012 by flov
url - .htaccess Rewrite to Force Trailing Slash at the end - Stack Overflow
»A slightly more robust answer:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)([^/])$ /$1$2/ [L,R=301]

The RewriteCond will check to make sure there's no files with that name, and if not, perform the RewriteRule. More future-proof than having a manual list of extensions!«
server  htaccess  tutorial 
december 2012 by flov
Where Automator Actions and Workflows Live | TUAW - The Unofficial Apple Weblog
»Automator's great for streamlining some of the repetitive things you do each day on your Mac. […] In most cases, when you save a workflow, Automator puts it where it needs to go automatically. But, where do your workflows actually live?«
mac  software  automation  tutorial  reference 
december 2012 by flov
can I downgrade to itunes 10 from 11?: Apple Support Communities
Downgrading iTunes 11 to 10.7 using Pacifist and the standard installer package. No Time Machine juggling involved.
mac  tutorial  iTunes 
december 2012 by flov
Sprite sheet animation with steps(). If you don’t... | simurai
»If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option: CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature […]«
webdesign  css  fx  animation  tutorial 
december 2012 by flov
Responsive Column Layouts
»Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class.«
css  webdesign  responsive  tutorial 
november 2012 by flov
A List Apart: Articles: The Infinite Grid
»Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today we’re designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment—a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between.«
webdesign  grid  responsive  tutorial  bestPractices 
october 2012 by flov
« earlier      
per page:    204080120160

related tags

accessibility  adobeIllustrator  adobePhotoshop  ajax  amazonKindle  animation  apache  api  apple  appleScript  audio  automation  backup  bestPractices  blog  bookmark  bookmarklet  bootCamp  bowtie  browser  brush  cakephp  chrome  chrome/chromium  cms  color  css  data  debug  demo  design  dosbox  download  ebook  editor  emulation  encode  encryption  favicon  fileserver  filesharing  firefox  firewall  flickr  font  form  forum  freeNX  ftp  fx  game  german  google  graphics  grid  gui  hackintosh  harddrive  hardware  homebrew  htaccess  html  icon  ie  illustration  image  imap  info  internet  ios  iPad  iTunes  javascript  jquery  keyboard  kirby  lamp  layout  leopard  lightbox  linklist  linux  lion  lynx  mac  macawApp  macMini  macPro  mail  manual  map  mobile  mod_rewrite  mysql  nas  newbie  news  opera  painting  pc  pdf  photography  php  player  playlist  plugin/addon/extension  png  podcast  podscms  privacy  process  productivity  programming  proxy  quicksilver  quicktime  raid  reference  regularExpressions  resource  responsive  retina/hidpi  rss  rubyOnRails  safari  samba  sass/scss  screencast  screensaver  screenSharing  search  security  seo  server  shortcut  sketchApp  snippet  software  sourceCode  spotlight  statistics  style/theme  sublimeText  support  svg  synchronize  terminal  textmate  timemachine  tips  tool  torrent  tutorial  tv  twitter  typography  ubuntu  url  usb  vector  video  virtualization  vnc  vpn  walkthrough  webdesign  webdev  webserver  wiki  windows  wordpress  x11  youtube 

Copy this bookmark: