tysone + css   117

A brief history of web design for designers. Explained with animations
So instead of debating whether designers should learn code or developers should learn design, let's set some common ground on how design for the web evolved and how we could bridge the gap between code and design.
design  history  toteach  web  css 
december 2014 by tysone
Reasons your HTML and CSS may be fucked. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.
css  design  html  toteach 
march 2014 by tysone
Front-end Code Standards & Best Practices | Roundarch Isobar
This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Roundarch Isobar. It is to be readily available to anyone who wishes to check the iterative progress of our best practices.
bestpractices  css  html  toteach 
june 2013 by tysone
Code smells in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
How can you tell if your CSS code smells? What are the signs that the code is sub-optional, or that the developer hasn’t done a good job? What do you look for in the code to determine how good or bad it is?
css  toteach  standards 
january 2013 by tysone
Form Follows Function
FFF is a collection of interactive experiences. Each experience has a its own unique design and functionality.
animation  css  html5  inspiration  toteach 
january 2013 by tysone
An Advanced Guide to HTML & CSS
An Advanced Guide to HTML & CSS takes a deeper look at front-end design and development, expanding on what is covered in the beginner’s guide. Studying modern front-end development, this guide teaches the latest for any designer looking to round out their front-end skills.
html  css  toteach 
january 2013 by tysone
About normalize.css – Nicolas Gallagher
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
css  webdesign 
february 2012 by tysone
Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.
html  css  patterns  design  toteach 
february 2012 by tysone
Terminology, Syntax, & Introduction - A Beginners Guide to HTML & CSS
Before beginning our journey to learn HTML and CSS it is important we understand the differences between the two languages, their syntax, and some common terminology.
html  css  reference  toteach 
january 2012 by tysone
First, Understand Your Screen « James Pearce
As web developers, we will often need to know the screen size of the device we are displaying content on. Perhaps on the server, perhaps on the client, perhaps to be used as a clause in a media query. But how best to measure it?
css  responsive  javascript  mobile 
december 2011 by tysone
CSS Properties Index – Jens O. Meiert
A continuously updated list of all CSS properties:
css  from delicious
october 2011 by tysone
CSS Terminal is a bookmarklet that allows you to inject CSS rules directly into a live web page. It's handy for rapid CSS development, prototyping and debugging.
css  webdev  awesome  toteach  from delicious
september 2011 by tysone
CSS: Taking control of the cascade - (37signals)
We’ve been using and refining these techniques since early in the summer and we’re very happy with the results. Our stylesheets are logical and carefully controlled. We find that once they get used to the SCSS syntax new people brought onto the project pick up the mental model of the app styles quickly without the mess of the specificity arms race. We’re also seeing better collaboration between designers and programmers who can more easily parse our logical CSS. JavaScript also benefits from these predictable selectors.
scss  37signals  css  webdev  from delicious
september 2011 by tysone
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks
It's pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will1.
html  css  totry  toteach  reference  from delicious
june 2011 by tysone
32 Javascript Alternatives with Pure CSS – Updated
The pure CSS techniques, outlined in this article, are neither new nor are they ground-breaking. What they do offer is CSS solutions to what would typically and traditionally be associated with Javascript, and as a demonstration that they do exist and could be quite easily used.
css  javascript  toteach  from delicious
may 2011 by tysone
320 and up
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.
css  totry  mobile  responsive  from delicious
april 2011 by tysone
31 CSS Code Snippets To Make You A Better Coder | Design your way
It is almost impossible to gather in an article all the CSS code snippets that could help you in the future but here are some of the ones that you would need more often than others
css  hacks  toteach  from delicious
february 2011 by tysone
The 1140px CSS Grid System/Framework · Fluid down to mobile
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
grid  totry  css  webdesign 
november 2010 by tysone
desandro's masonry at master - GitHub
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
css  jquery  totry 
november 2010 by tysone
Lettering.JS | daverupert.com
Web Typography is exploding all over the web. We developed a lightweight, easy to use jQuery plugin for radical Web Typography.
css  typography  javascript 
september 2010 by tysone
mockko's livereload at master - GitHub
LiveReload is a Safari/Chrome extension + a command-line tool that:

Applies CSS and JavaScript file changes without reloading a page.
Automatically reloads a page when any other file changes (html, image, server-side script, etc).
css  totry  webdesign  development 
august 2010 by tysone
zen-coding - Project Hosting on Google Code
Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:
html  totry  css  tools  textmate  development 
july 2010 by tysone
A List Apart: Articles: Prefix or Posthack
We ought to praise vendors for using prefixes, and indeed encourage them to continue. Beyond that, I hold that prefixes should become a central part of the CSS standardization process. I do this not for the love of repetition, but out of a desire to see CSS evolve consistently. I believe that prefixes can actually accelerate the advancement and refinement of CSS.
css3  css  standards 
july 2010 by tysone
An InDesign for HTML and CSS? – Jeffrey Zeldman Presents The Daily Report
Expecting Photoshop to write the kind of markup and CSS you and I write at our best is like challenging TextMate to convert semantic HTML into a visually appropriate and aesthetically pleasing layout. Certain kinds of human creativity and expertise cannot be reproduced by machines.
html  zeldman  adobe  prediction  css  toteach 
july 2010 by tysone
Uncover · David DeSandro
I am just beginning to uncover some sense of the role of interaction in web design. Typically, I framed the interactive element as facilitating the message of the work. But I now I see it more as the message itself.
artdirection  typography  inspiration  javascript  css 
april 2010 by tysone
TouchScroll, a scrolling layer for WebKit mobile « Uxebu.com – the Ajax and JavaScript Experts
TouchScroll, our scrolling layer for WebKit Mobile. It is JavaScript/CSS 3 based and allows for fixed elements like headers and toolbars on web pages when viewed on the iPhone or on Android. It works on the iPad, too.
iphone  css  javascript  webdesign 
april 2010 by tysone
jQuery Masonry · David DeSandro
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
jquery  css  webdesign 
april 2010 by tysone
CSS fingerprint
When you click 'fingerprint me', this site will test whether you've visited ~50,000-1,000,000 sites; it'll take one minute. At the end, you'll see a list of what sites were found, and top 10 users who are similar to you. It will show their name if and only if both you and they consent to have your names shown. I can test whether you've visited over three million URLs in one minute on Safari. This will be increasingly true on other browsers as they improve their DOM/JS engines.
security  css  hack 
april 2010 by tysone
This is Plumb, a web layout composition tool for use with the Blueprint framework. Pretty much you just draw some stuff up above and it makes HTML for you.
css  webdesign  layout  tool 
january 2010 by tysone
Rendering: repaint, reflow/relayout, restyle / Stoyan's phpied.com
"So how does the browser go about displaying your page on the screen, given a chunk of HTML, CSS and possibly JavaScript."
performance  browsers  javascript  html  css 
december 2009 by tysone
The Death Of The Blog Post - Smashing Magazine
"We have some of the most creative and inspiring designers in our profession, so why don’t we show our true potential in our blog articles?"
webdesign  artdirection  css 
november 2009 by tysone
A List Apart: Articles: On Web Typography by Jason Santa Maria
"Notable type designer Zuzana Licko once said “We read best what we read most.” This notion rings true in our learned behavior, but also reveals the reason for the typographer’s toughest challenge: Reading is a personal and relative act."
webdesign  css  typography 
november 2009 by tysone
Jammit: Industrial Strength Asset Packaging for Rails
Jammit is an industrial strength asset packaging library for Rails, providing both the CSS and JavaScript concatenation and compression that you'd expect, as well as ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.
documentcloud  opensource  assets  css  javascript  optimization 
november 2009 by tysone
Why Stylesheet Abstraction Matters
CSS is the weakest link in the web developers toolbox. The problem goes deeper than CSS’s lack of variables. Unlike the “function” in programming, CSS has no fundamental building block.
css  framework  programming  ruby 
september 2009 by tysone
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
javascript  css  html5  webdesign  toexplore 
august 2009 by tysone
Why Standards Fail – Jeffrey Zeldman Presents The Daily Report
Note that at one time we would have railed against browser makers who implemented parts of a specification that was still under development; now we admire them.
zeldman  standards  html  css  webdesign 
july 2009 by tysone
satine.org » Snow Stack is Here
[rip, flash] A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript.
css  3d  javascript  animation  webdesign 
july 2009 by tysone
A List Apart: Articles: Creating Intrinsic Ratios for Video
"Did you ever want to resize a video on the fly, scaling it as you would an image?" Not really, but I will resize my browser window on your examples ad infinitum...
webdesign  css  video 
may 2009 by tysone
Dinky pocketbooks with WebKit transforms | Natalie Downe
0° rotated print stylesheet pocketbooks using CSS transforms in Safari
printing  css 
may 2009 by tysone
Sass (Syntactically Awesome StyleSheets)
Sass is a meta-language on top of CSS that‘s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.
css  framework  webdesign  toexplore 
may 2009 by tysone
compass - GitHub
Compass is a CSS Meta-Framework that provides ports of the best of breed CSS frameworks to Sass and ready to use in your ruby-based web application or stand-alone via a simple command-line interface.
css  oop  framework  toexplore 
may 2009 by tysone
JeffCroft.com: On applying OOP concepts to CSS
Reminds me, I need to investigate Compass and Sass. (And, holy god, that brown reverse on jeffcroft.com kills my eyes every time).
css  oop  webdesign 
may 2009 by tysone
Styleneat - CSS Organizer
It organizes and standardizes your CSS - selectors, sub-selectors and properties - in a structure that makes it easier to define page areas and see how they relate to each other.
css  webesign  tools 
may 2009 by tysone
8 Simple Ways to Improve Typography In Your Designs • Blog Archive • AisleOne
Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect.
css  typography  webdesign 
april 2009 by tysone
SimpleBits ~ How I Might Deal with IE6
"Another real-world example of this method in practice, is The Rissington Podcast, which cleverly serves an IE6 stylesheet complete with Comic Sans."
webdesign  ie6  standards  css 
march 2009 by tysone
The League of Moveable Type
We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raise our standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts.
webdesign  design  opensource  css  typography 
february 2009 by tysone
A List Apart: Articles: Return of the Mobile Style Sheet
although a mobile-specific user experience will serve your users’ needs better, a mobile-friendly website is better than nothing, and the antiscreen technique (combined with a script to generate it) allows you to create mobile-friendly style sheets that will work across a large number of mobile browsers.
webdesign  css  tutorial  iphone  mobie 
january 2009 by tysone
isnoop.net CSS SuperScrub
This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.
css  tools  webdesign  performance 
december 2008 by tysone
24 ways: Absolute Columns
sometimes you just need, for example, a secondary column (say, a sidebar) to match the height of a primary column, without involving the creation of images. This is where a little absolute positioning can save you time, while possibly giving your layout a little more flexibility.
css  webdesign  tip  layout 
december 2008 by tysone
« earlier      
per page:    204080120160

Copy this bookmark: