robertogreco + css   108

Zine machine!
“That magic is what means this web page is also a zine if you print it! Go ahead, try pressing your 🖨️ Print button now. You will need to set the page to landscape and make sure there’s no margins or scaling. We want to print on the edge, baby! You should see a preview laid out like this:”



“Steal this zine!
Please take this template and copy it for your own work.

This is a Glitch app!
Since it’s all hosted on Glitch, this friendly fish will give you the instructions to take a peek at the code and fire up your own version.

Creative Commons Licence
The content and images are licensed under a Creative Commons Attribution 4.0 International License.

Code highlighting via Prism.js.”
class  ideas  paper  zines  papernet  templates  css  webdesign 
june 2019 by robertogreco
Bindery.js · Book
"Bindery.js is a library for designing printable books with HTML and CSS.

At its simplest, Bindery flows content over multiple pages. From there, the designer can create running headers, spreads, footnotes, tables of contents, indexes, and more. Bindery also provides print options like bleed, crop marks, and booklet ordering.

Web designers can think about books as an extension of responsive design, and print designers can express layouts programmatically, without the need for InDesign."
bindery  csss  ebooks  html  books  css  webdev  epublishing  webdesign  print  papernet 
june 2019 by robertogreco
Bindery.js · Introduction
"Bindery.js is a library for designing printable books with HTML and CSS.

At its simplest, Bindery flows content over multiple pages. From there, the designer can create running headers, spreads, footnotes, tables of contents, indexes, and more. Bindery also provides print options like bleed, crop marks, and booklet ordering.

Web designers can think about books as an extension of responsive design, and print designers can express layouts programmatically, without the need for InDesign."

[via: "Print Are.na with Bindery.js"
https://are.na/clement-valla/print-are-na-with-bindery-js

"Make books from Are.na Channels with Bindery.js. You can format the books using CSS!

It currently works pretty well, but we'd be happy to get some help cleaning up the css a little."]
html  css  publishing  re.na  pdf  bindery.js  papernet  print 
july 2018 by robertogreco
Everything Easy is Hard Again – Frank Chimero
"Directness is best in my experience, so a great photo, memorable illustration, or pitch-perfect sentence does most of the work. Beyond that, fancy implementation has never moved the needle much for my clients.

My web design philosophy is no razzle-dazzle. My job is to help my clients identify and express the one or two uniquely true things about their project or company, then enhance it through a memorable design with a light touch. If complexity comes along, we focus in on it, look for patterns, and change the blueprint for what we’re building. We don’t necessarily go looking for better tools or fancier processes. In the past, I’ve called this following the grain of the web, which is to use design choices that swing with what HTML, CSS, and screens make easy, flexible, and resilient.

It seems there are fewer and fewer notable websites built with this approach each year. So, I thought it would be useful remind everyone that the easiest and cheapest strategy for dealing with complexity is not to invent something to manage it, but to avoid the complexity altogether with a more clever plan.

To test how much complexity comes along with my limited needs, I wrote down the technical requirements of my web design practice. It’s not a long list:

simple, responsive layout
web fonts and nicely set text
performant, scalable images

All of these have been more than met for at least five years, but the complexity of even these very fundamental needs has ballooned in the last few years.

For instance, I just showed you four different methods to put two things next to each other. Each new method mostly replaces the last, so hopefully we’re reaching a stabilization point with flexbox and CSS Grid. But who knows what will come out five years from now?"



"My point is that the foundations are now sufficiently complicated enough on their own that it seems foolish to go add more optional complexity on top of it. I’ve kept my examples to the most basic of web implementations, and I haven’t touched on Javascript, animation, libraries, frameworks, pre-processors, package managers, automation, testing, or deployment. Whew.

*******

All of that bundled together is the popular way to work in 2018. But other people’s toolchains are absolutely inscrutable from the outside. Even getting started is touchy. Last month, I had to install a package manager to install a package manager. That’s when I closed my laptop and slowly backed away from it. We’re a long way from the CSS Zen Garden where I started.

If you go talk to a senior software developer, you’ll probably hear them complain about spaghetti code. This is when code is overwrought, unorganized, opaque, and snarled with dependencies. I perked up when I heard the term used for the first time, because, while I can’t identify spaghetti code as a designer, I sure as hell know about spaghetti workflows and spaghetti toolchains. It feels like we’re there now on the web.

[image]

That breaks my heart, because so much of my start on the web came from being able to see and easily make sense of any site I’d visit. I had view source, but each year that goes by, it becomes less and less helpful as a way to investigate other people’s work. Markup balloons in size and becomes illegible because computers are generating it without an eye for context. Styles become overly verbose and redundant to the point of confusion. Functionality gets obfuscated behind compressed Javascript."



"It’s by keeping our work legible that we keep the door open to the next generation of our co-workers. What works for them also works for us, because whether you are just out of school or have twenty years of experience, you’ll eventually end up in the same spot: your first year of making websites."
francjchimero  webdeb  webdesign  css  html  design  development  web  2018  online  internet  simplicity  complexity 
february 2018 by robertogreco
🔠 Webfonts, web fonts, web-fonts
"Earlier this month Bram Stein published a book, along with the fine folks at A Book Apart, called The Webfont Handbook and it’s all about how browsers interpret our design choices when it comes to typography. Bram explores what fonts are and how they load, along with the unfamiliar CSS properties that we can use to control them.

You might not care one single iota about fonts or how browsers interact with them, and that’s totally okay, but I think this book is then interesting from two separate angles: web accessibility and good technical writing. First, on the topic of accessibility, one of my favorite sections of this book is where Bram writes about how webfonts can harm the user experience if we’re not careful. By loading too many fonts, for example, and thereby slowing the speed by which the website is requested:
Which matters most to you—conveying your message, or conveying your message in the correct font? In almost all cases, communicating your message matters most. The web is not—or at least shouldn’t be—only for the privileged. Young, affluent people with perfect eyesight using modern devices with high-resolution screens on fast network connections constitute a small fraction of internet users. Don’t forget about the rest.


Later in the book, Bram continues this argument further:
We need to start thinking of webfonts as progressive enhancement instead of expecting webfonts to be a resource that is always available. The baseline experience of your site has always been, and will always be, just plain HTML and CSS. Webfonts enhance that experience. In fact, there’s no guarantee that visitors to your site will see webfonts at all. The Opera Mini browser is used by hundreds of millions of people, and it does not support webfonts. Without you doing a thing, those users are already excluded from using the webfonts you specify.

That means there are two possibilities you should design for: when webfonts are not available, and when webfonts are available.


Accessibility and caring deeply about how webfonts impact the overall design of a website does not make us a gang of old type snobs, instead it makes us good citizens of the web. By thinking about those technical implications we show our care for everyone that visits our small island on the web, and not only the people that happen to look just like us. And every moment that we ignore web accessibility is one where the web becomes more difficult to approach and where we all become a little more isolated from one another.

The second important note that I took away from this book is that technical writing, and writing about code in general, is extraordinarily difficult. It’s tough to know what to teach and when. Not only that but it’s tricky to keep enough concentration and focus to go through each step meticulously so that someone else can follow along easily. This subject leads back to accessibility I suppose, but I can only think of a handful of people that are really good at this sort of technical writing and Bram is certainly one of them."
webdev  webfonts  fonts  html  css  accessibility  communication  robinrendle  bramstein  typography  web 
september 2017 by robertogreco
Basics of CSS Blend Modes | CSS-Tricks
"Here's another, which cleverly re-combines a color image separated into Cyan / Magenta / Yellow / Black parts (CMYK). You know that's how offset lithography works in print, right? =)"
css  cmyk  webdev  webdesign  sfsh  blending  color  blendmodes 
november 2016 by robertogreco
the new code – Create a Halftone Effect with SVG
"Creating the visual effect of halftoning - forming an image out of tiny dots of color - is easy to achieve in a web page with SVG. The technique shown here uses multiple backgrounds in a div element: one repeating grid pattern that is closely related to the effect used in my Pop-Art article, just at a smaller cell size, combined with a bitmap image. I’ve also added a transitioned greyscale filter to desaturate the colors."
halftoning  halftones  webdesign  webdev  svg  sfsh  halftoneeffect  css 
november 2016 by robertogreco
The “Other” Interface: Atomic Design With Sass – Smashing Magazine
"As front-end developers and designers, we’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future, when adjustments or full-scale redesigns must be made. Yet we tend to assign the role of “user” to the first group, often forgetting that the code we write must work for developers in a similar way. We shouldn’t forget that developers are users, too.

If this is the case, then our convention for naming and organizing files is critical if we are to ensure active (and efficient) development in the future. But do we really design the partials, files and directories that make up this interface with a particular set of users in mind, with a set of clear goals, combined with precise, well-defined documentation? I don’t think we do.

Recently, I’ve been working on many different projects, each wildly different from each other. And the various problems I’ve faced while switching between the projects has made me wonder how we can drastically improve front-end accessibility.

We Need To Follow Atomic Design Principles In Our Style Sheets Link

Last month, in a post titled “Atomic Design,” Brad Frost argued that Web development could be improved. He suggested to developers that, instead of coding a form as a component that is reused throughout a website, they could style small modules — such as a placeholder, input field and text field — and then create each form by combining these chunks together. This process could be duplicated for navigational items, text with icons, floated objects and pretty much any other sort of front-end module that needs to be reused regularly.
“Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.”

The theory is that by employing these distinct elements, a developer can speed up their workflow and write code more efficiently because they’re not forced to repeat themselves. This much appears to be common sense. Essentially, what Brad calls for is object-oriented design, which has been discussed in numerous articles and blog posts recently. That isn’t really what interested me about the idea, though — it was the naming convention that Brad chose.

He uses scientific terms to quickly describe what sections of a design should do; “atoms” are the discrete chunks (placeholders, labels, etc.), while “molecules” are combinations of these standard atoms. The simplicity here grabbed my attention, because ultimately what we’re discussing isn’t just a process for design, but also a distinction to be made in the user interface, as I mentioned earlier."
atomicdesign  robinrendle  2013  via:caseygollan  webdev  sass  css  frameworks  webdesign 
march 2016 by robertogreco
Templates are easy to change. Content usually isn't. | CSS-Tricks
"If it's a chunk of HTML that goes in a database, it's content

It's not impossible to change content, but it's likely much harder and more dangerous.

Websites can last a long time. Content tends to grow and grow. For instance on CSS-Tricks there are 2,260 Posts and 1,369 Pages. Over the years I've sprinkled in classes here and there to do certain stylistic things and over time I always regret it.


Why the regret over classes in content?

Maybe you'll find you named the class wrong and start hating it.
Maybe you'll change the class to something you like better.
Maybe you'll stop using that class.
Maybe you'll forget that class even existed, and not address it in a redesign.
Maybe you'll use that old name again, only it does something new now and messes up old content.

Those are just a few possibilities.

But the pain comes when you decide you'd like to "fix" old content. What do you do? Find all old content that uses those classes and clean them out? Try to run a database query to strip classes? Tedious or dangerous work.

Content in Markdown Helps

Markdown is comfortable to write in, once you get the hang of it. But its best feature is that it doesn't put, or even allow you to put, classes on any of the HTML it generates. Unless you write HTML directly in the Markdown, which always feels a little dirty (as it should)."
webdev  webdesign  css  content  design  templates  via:nicolefenton  2016  html  chriscoyier 
march 2016 by robertogreco
Tufte CSS
"Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

The idea was cribbed in whole from Tufte-LATEX and R Markdown’s Tufte Handout format. This page was in fact originally an adaptation of the Tufte Handout Example PDF. I give hearty thanks to all the people who have contributed to those projects.

If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines."
via:ayjay  css  design  html  typography  edwardtufte  webdev  webdesign 
october 2015 by robertogreco
mrmrs / designer + developer in sf
"Trying to make the web as fast as possible, highly readable, 100% responsive, and easy to navigate.

I like building tools that help make designing in the browser a little easier.

Advocate for users and open-source."
adammorse  via:maxfenton  webdev  opensource  css  readability  responsivewebdesign  templates  responsivedesign  webdesign 
march 2015 by robertogreco
Small Victories
"Small Victories is a simple way to make a website out of the contents of a Dropbox folder.

What the hell would I use that for?

You could make a blog, share images, make yourself a portfolio — it's kind of like a scrapbook."
webdev  dropbox  hosting  css  html  webdesign  via:ableparris 
february 2015 by robertogreco
Rev Dan Catt: Still Blogging
"It's fun to see people (by which I mean people I track) talking about blogging. Andy here and Gina here, and others in Andy's comments.

I thought I'd jot down my angle.

• I'm tired of putting content on other people's platforms such as Medium, Flickr & Tumblr because I'm now never quite sure when it'll all go bottom up with me scrabble to get my content back out. Instead I'm scrabbling now, slowly going back through my archive and converting posts to markdown and importing images from Flickr. You can see just how far I haven't got by the cube placeholder images at /root.

• No analytics, no tracking, no cookies. I don't want to help Google track people around the web just so I can see how few hundreds of people viewed the site today. Removing the tracking is part of owning content. My audio is still on SoundCloud which drags GA cookies in with it when I post it here, same with Vimeo/YouTube videos. It's getting easier to self-host that kind of stuff, I just haven't had the time yet. So, no javascript on the page, no css/images/js from external sites is the goal. As I'm still interested in where people come from I sometimes pop onto the server to run goaccess to view referrers.

• Blogging has changed, twitter and Medium have altered the need to blog how we used to. I've re-jigged my blog to be the historic record my future self will want. Hence why you get presented with the current month, rather than traditional reverse chronological posts. I'm designing it for a future when at the end of the year I can push a button and it'll toss all my content into a book, divided up into months.

It's my own shoebox"
revdancatt  blogging  blogs  webdev  tracking  googleanalytics  medium  flickr  tumblr  content  adomainofone'sown  soundcloud  ownership  control  vimeo  youtube  css  images  javascript  2014  webdesign 
october 2014 by robertogreco
csscomb/csscomb.js · GitHub
"CSScomb is a coding style formatter for CSS. You can easily write your own configuration to make your style sheets beautiful and consistent.

The main feature is sorting properties in a specific order. It was inspired by @miripiruni's PHP-based tool of the same name. This is the new JavaScript version, based on the powerful CSS parser Gonzales PE."

[See also Max's settings: https://gist.github.com/maxfenton/12678275731649dfa561 ]
css  coding  customization  tools  webdev  via:tealtan  maxfenton  webdesign 
september 2014 by robertogreco
Map Glyphs | The Ultimate CSS Map Font
"Map Glyphs has hundreds of scalable vector map icons of the world, continents, globes, countries and states."
maps  mapping  icons  svg  resources  css  continets  globes  countries  states 
september 2014 by robertogreco
uilang
"a minimal, ui-focused programming language for web designers"
via:tealtan  css  design  javascript  ui  webdev  webdesign  html  uiland 
september 2014 by robertogreco
Progressive enhancement - Wikipedia
"Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.

"Progressive Enhancement" was coined by Steven Champeon in a series of articles and presentations for Webmonkey and the SXSW Interactive conference between March and June 2003.

Specific CSS techniques pertaining to flexibility of the page layout accommodating different screen resolutions is recently being discussed under the name of "Responsive Web Design". .net Magazine chose Progressive Enhancement as #1 on its list of Top Web Design Trends for 2012 (Responsive design was #2).



The strategy is an evolution of a previous web design strategy known as "graceful degradation", wherein designers would create Web pages for the latest browsers that would also work well in older versions of browser software. Graceful degradation was supposed to allow the page to "degrade", or remain presentable even if certain technologies assumed by the design were not present, without being jarring to the user of such older software. In practice, graceful degradation has been supplanted by an attitude that the end user should "just upgrade".[citation needed] This attitude is due to time and budget constraints, limited access to testing alternate browser software, as well as the widespread belief that "browsers are free". Unfortunately, upgrading is often not possible due to IT department policies, older hardware, and other reasons. The "just upgrade" attitude also ignores deliberate user choices and the existence of a variety of browser platforms; many of which run on handhelds or in other contexts where available bandwidth is restricted, or where support for sound or color and limited screen size, for instance, are far different from the typical graphical desktop browser. There is also a large group of Internet users unaware or uncaring about the features of the browser."
accessibility  css  design  javascript  webdesign  webdev  2003  stevechampeon 
august 2014 by robertogreco
Learn HTML & CSS - a book that teaches you in a nicer way
"WELCOME TO A NICER WAY TO LEARN ABOUT HTML & CSS
A book about code that doesn't read like a 1980s VCR manual...
It's not just for programmers, it's written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages..."
books  css  html  design  webdev  howto  webdesign 
july 2014 by robertogreco
The Simpsons in CSS
"Below are some Simpsons characters made in pure CSS - Made by Chris Pattle."

[via: https://twitter.com/DOROHO_/status/483487720908410881 ]
thesimpsons  css  html  webdev  webdesign 
june 2014 by robertogreco
OriDomi - origami for the web
"The web is flat, but now you can fold it up.

open source JavaScript library by Dan Motzenbecker"
css  css3  javascript  3d  webdev  danmotzenbecker  webdesign 
december 2013 by robertogreco
The (other) Web we lost | Web Directions
"Learnability

… Do we honestly want to diminish this network effect by fragmenting the technologies of the web, by creating silos of expertise, with little by way of a common language? We should at least be aware of this potential consequence of our choices. Aware of not just what we (typically as individuals) might gain from our choices, but what we collectively, what the Web, may lose.

Maintainability

… Traditionally, more than half of the cost of a complex system has come during its maintenance phase, and while on the Web we’ve been more likely to throw out and start all over again than traditional software projects, as what we build for the Web becomes increasingly more complex, and mission critical, the maintenance phase of projects will become increasingly long and costly. And again, it’s pretty well understood that maintainability has a lot more to do with the ability of disparate developers to understand and reason about a code base over a long period of time than it does with ease of using find and replace.

Interoperability



Longevity



Small pieces loosely joined

In 2002, one of the Web’s pioneers David Weinberger (among other things, co-​​author of the Cluetrain Manifesto) wrote “small pieces, loosely joined”, a way of thinking about what makes the Web different. I’ve long thought it applies well to the technologies of the Web, and should guide us as we build for the Web, whether it’s our own sites, those for our clients or employers, or the very technologies that move the Web forward.

If each time we came to solve a problem we thought “how small a problem can I solve”, or even “what really is the problem here”, and then solve that in a way that is as modular, compatible, and extensible as possible, we’d be going a long way toward taming the explosion of complexity we’ve seen over the last half a decade or so, and to returning at least in part to the other Web we lost.

Perhaps this Web simple had to grow up, to meet the challenges of the ever more complex artefacts we’re building. When the Web was about documents and sites, perhaps we could be simple, but in an age of Apps that’s a luxury we can’t afford. Perhaps the technical underpinnings of all platforms of necessity fragment over time.

But, before we lose this Web for good, I think we owe it to that Web to really understand it, what makes it tick. And when we make technical, architectural choices about what the Web looks like, we don’t just focus on what we (as individuals) gain, but what costs there are to this Web as well."
learnability  web  webwelost  maintainability  html  interoperability  longevity  smallpieceslooselyjoined  johnallsop  2013  networks  internet  technology  webdev  css  webdesign 
december 2013 by robertogreco
Visualizing Variation: Animated Variants
"An important early claim made for digital scholarly editions was that they don't force editors and readers into choosing one variant over another. Instead of creating an implicit or explicit hierarchy of rejected variants subordinated to a single, supposedly authoritative reading, it was thought that digital editions could represent variants dynamically, presenting their ambiguity to readers not as a problem to solve, but as a field of interpretive possibility. Very few digital editions, however, have realized this possibility in their interfaces. One thing a digital visualization can do is make a virtue of ambiguity in ways that print cannot, combining the elements of time and motion to represent variants in ways that challenge the idea that texts are fixed and immutable.

This group of prototypes uses animation to cycle between different textual variants, presenting them as a field of possibilities to readers, and hopefully inviting readers to consider the evidence for and consequences of different possibilities. Animated variants also drive home the simple yet unsettling point that textual transmission is more often a matter of change than fixity: texts sometimes change even when readers aren't looking.

The Animated Variants visualization was inspired partly by debates in Shakespearean editorial theory and partly by born-digital poetry, especially the early computer poems of bpNicol. Although the first prototype of this visualization was developed with Shakespearean examples in mind, my plan is to generalize them to handle as many different kinds of variation as possible. The single prototype posted here will likely become a group of visualizations that handle many different kinds of textual variation, including variants in words, phrases, lineation, stage directions, and manuscript revisions. For now I have posted a simple first version that cycles between variant words and phrase, as shown in the box above."

[via: http://snarkmarket.com/2013/8153#comment-10614 ]
alangaley  text  variations  language  xml  webdev  css  javascript  change  flux  plasticity  translation  expandingtext  digitalsertão  animatedvariants  stackingwords  auditiontext  webdesign 
november 2013 by robertogreco
Typogasm
"Typogasm is a tool that makes it easy to work with typographic scales and vertical grids. Use the menu below to quickly set up the type on this page. Then choose the sizes you want from your scale, and scroll down to grab the css. Typogasm takes care of all the calculations so you can concentrate on beautiful type.

This sentence is sixty-six characters, the ideal width for reading."
typography  typogasm  css  webdev  webdesign 
october 2013 by robertogreco
Coder for Raspberry Pi
"Coder is a free, open source project that turns a Raspberry Pi into a simple platform that educators and parents can use to teach the basics of building for the web. New coders can craft small projects in HTML, CSS, and Javascript, right from the web browser."
raspberrypi  coder  google  googlecreativelab  html  css  javascript  teaching  learning 
september 2013 by robertogreco
D3.js - Data-Driven Documents
"D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation."

[See also: http://bost.ocks.org/mike/ ]
data  javascript  visualization  graphs  mikebostock  d3  d3.js  html  webdev  css  datavisualization  webdesign 
july 2013 by robertogreco
Welcome to openHTML
"Technology
Building tools to support learning in basic web development. Check out openHTML editor, a web-based HTML and CSS tool with a simple interface.

Education
Developing learning activities that motivate students while teaching the fundamentals of computation and the web based on research.

Research
Exploring ways to assess learning, using mixed methods that include naturalistic observations, lab studies, and analysis of Q&A forums and activity logs."
css  html  coding  learning  education  openhtml  howto  classideas  via:jessebrand 
july 2013 by robertogreco
DrupalCon Portland 2013: DESIGN OPS: A UX WORKFLOW FOR 2013 - YouTube
"Hey, the dev team gets all these cool visual analytics, code metrics, version control, revision tagging, configuration management, continuous integration ... and the UX design team just passes around Photoshop files?

Taking clues from DevOps and Lean UX, "DesignOps" advocates more detailed and durable terminology about the cycle of user research, design and production. DesignOps seeks to first reduce the number of design artifacts, to eliminate the pain of prolonged design decisions. DesignOps assumes that the remaining design artifacts aren't actionable until they are reasonably archived and linked in a coherent way that serves the entire development team.

This talk will introduce the idea of DesignOps with the assumption that the audience has experience with a basic user research cycle — iterative development with any kind of user feedback.

DesignOps is a general approach, intended to help with a broad array of questions from usability testing issues, documentation archiving, production-time stress, and general confusion on your team:

What are the general strategies for managing the UX design process?
How do you incorporate feedback without huge cost?
What happened to that usability test result from last year?
How much space goes between form elements?
Why does the design cycle make me want to drink bleach?
WTF why does our website look like THIS?
* Features turnkey full-stack (Vagrant ) installation of ubuntu with drupal 7 install profile utilizing both php and ruby development tools, with all examples configured for live css compilation"
chrisblow  contradictions  just  simply  must  2013  drupal  drupalcon  designops  fear  ux  terminology  design  audience  experience  shame  usability  usabilitytesting  work  stress  archiving  confusion  relationships  cv  canon  collaboration  howwework  workflow  versioncontrol  versioning  failure  iteration  flickr  tracker  creativecommons  googledrive  tags  tagging  labels  labeling  navigation  urls  spreadsheets  links  permissions  googledocs  timelines  basecamp  cameras  sketching  universal  universality  teamwork  principles  bullshitdetection  users  clients  onlinetoolkit  offtheshelf  tools  readymadetools  readymade  crapdetection  maps  mapping  userexperience  research  designresearch  ethnography  meetup  consulting  consultants  templates  stencils  bootstrap  patterns  patternlibraries  buzzwords  css  sass  databases  compass  webdev  documentation  sharing  backups  maintenance  immediacy  process  decisionmaking  basics  words  filingsystems  systems  writing  facilitation  expression  operations  exoskeletons  clarification  creativity  bots  shellscripts  notes  notetaking  notebo 
may 2013 by robertogreco
Typeplate » A typographic starter kit encouraging great type on the Web
"Frameworks make decisions for you about how to organize, structure and design a site. Pattern libraries don’t separate styling and markup, making them tough to use in a truly modular fashion. We weren’t satisfied, so we made a thing that doesn’t do that.

Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look."
css  design  fonts  typography  sass  webdev  via:litherland  webdesign 
march 2013 by robertogreco
LESS « The Dynamic Stylesheet language
"The dynamic stylesheet language.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only)."
framework  webdev  css3  webdesign  css  less  from delicious
january 2013 by robertogreco
HTML5 Reset :: A simple set of templates for any project
"Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We've been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for our best practices to catch up, and we thought we'd put our files out there for everyone to use. By no means do we see this as the One True Way to start every project, but we think it's a good starting place that anyone can make their own."
framework  webdev  webdesign  templates  css3  css  html5  html  via:spencerbeacock  from delicious
december 2012 by robertogreco
mattkersley/Responsive-Design-Testing
"Responsive Design Testing
This tool is for everyone who needs a quick and easy way to test their website design in multiple screen widths.

Permalink style testing
You can test any website, and provide the link to anyone you like by adding their URL to the end of the testing page address. For example: http://mattkersley.com/responsive?google.com

Installing on your own server
*Copy index.html and responsive.js onto your machine
*Update the deafultURL at the top of responsive.js to your own website
*Upload the files into a subdirectory on your server
*Navigate to the new subdirectory via a browser

Once you've uploaded, you can navigate your website from within the iframes, and the others will update. This won't work for external sites however due to browser security restrictions."
webdev  responsivewebdesign  ui  mobile  webdesign  css  testing  design  responsive  responsivedesign  from delicious
november 2012 by robertogreco
In-depth tutorials and articles on web design | Webdesigntuts+
"Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. We publish tutorials that not only produce great results and interfaces, but explain the techniques behind them in a friendly, approachable manner.
Web design is a booming industry with a lot of competition. We hope that reading Webdesigntuts+ will help our readers learn a few tricks, techniques and tips that they might not have seen before and help them maximize their creative potential!"
typography  ux  javascript  css  html  howto  webdev  edg  srg  via:steelemaley  classideas  web  design  tutorials  webdesign  from delicious
october 2012 by robertogreco
Twitter for minimalists — Satellite — Craig Mod
"For years, my go-to solution for daily-use web applications has been Fluid. I have Fluid instances of gmail, Google Calendar, Workflowy and a host of other web-only applications. Generally, it works really well. The webapps load quickly via Spotlight like any other application, and you can quickly CMD-TAB into them without hunting through browser tabs.

Of course you can dump twitter.com into a Fluid instance but it feels pretty kludgy. Twitter buddy Max Fenton whipped together a set of simple CSS rules removing a lot of the kludge. We went back and forth a couple times and the end result is pleasing. Twitter.com in a Fluid instance, with this set of user styles applied is actually usable. And I dare say it's almost worthy of replacing Twitter.app, were we forced to abandon it."
2012  fluid  css  applications  twitter  tweetie  maxfenton  craigmod  tools 
september 2012 by robertogreco
Benji Lanyado is a journalist, coder – and a glimpse of the future? | News Burger
"When I first heard about The Reddit Edit, I thought it was a nifty idea.

It takes Reddit’s functional, information-laden appearance and turns it into a streamlined, colourful depiction of the top trending stories. The top three stories are displayed in an easy-to-use side-scrolling interface, plucked from five popular subreddits: /r/worldnews, /r/politics, /r/technology, /r/science and /r/pics, plus the reddit.com homepage.

You might think a project like this would be the undertaking of a web developer, but it’s the brainchild of 28-year-old British journalist Benji Lanyado. The Reddit Edit was his final project while taking front-end web development classes with General Assembly, a New-York based digital education company who have recently expanded to London.

Benji, who writes for The Guardian and The New York Times, is part of a growing number of media types that are taking it upon themselves to know how to write and code to bring their content to life…"

[An interview follows.]
redditedit  programming  generalists  crossdisciplinary  classideas  glvo  srg  edg  howwework  filters  filtering  clayshirky  facebook  twitter  howweread  news  developers  interdisciplinary  interdisciplinarity  learning  nyc  html  css  javascript  generalassembly  rubyonrails  codecademy  kerouapp  nytimes  guardian  2012  media  reading  theredditedit  benjilanyado  via:russelldavies  reddit  careers  coding  journalism  from delicious
september 2012 by robertogreco
Fluid Images — Unstoppable Robot Ninja
One of the really solid criticisms lobbied against my Fluid Grids article for ALA was that all of my examples were pretty text-heavy. As a result, they all more or less ignored the issue I raised at the end of the essay: that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?
webdev  responsive  layout  scale  design  webdesign  fluid  javascript  css  via:caseygollan  images  fluidimages  responsivedesign  responsivewebdesign 
september 2012 by robertogreco
320 and Up | The ‘tiny screen first’ responsive boilerplate
"1. A working toolkit
Frameworks and boilerplates like HTML5 Boilerplate and Bootstrap are great, but they include some files and styles you’ll use once in a blue moon. ‘320 and Up’ includes only things I use when I start a project.

2. LESS and Sass
LESS and Sass have transformed the way we write CSS. ‘320 and Up’ is built with LESS and CSS includes our trusted mixins and variables. If you’re not ready for LESS, don’t worry, use the plain ol’ CSS version.

3. New Upstarts
‘Upstarts’ are responsive design patterns for the things we build every day. Get started faster with easily customisable HTML and LESS CSS imports or write your Upstarts and contribute them on Github."
responsivedesign  html5boilerplate  html  css3  css  mobile  html5  responsive  boilerplate  responsivewebdesign  from delicious
august 2012 by robertogreco
Initializr - Start an HTML5 Boilerplate project in 15 seconds!
"Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!"
boilerplate  html5boilerplate  responsivedesign  html  initializr  webdev  template  blueprint  tools  code  css  css3  webdesign  generator  framework  html5  responsivewebdesign  from delicious
august 2012 by robertogreco
Modernizr: the feature detection library for HTML5/CSS3
"Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser."
modernizr  javascript  webdesign  html  webdev  css  css3  html5  from delicious
august 2012 by robertogreco
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8
"selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest."
selectivizr  ie8  ie7  jquery  ie6  javascript  webdesign  webdev  css  css3  from delicious
august 2012 by robertogreco
Don’t Fear the Internet
"Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because you’ve been waiting two years for your cousin to put it together for you? Well, we’re here to help. We know that you have little to no desire to do web design professionally, but that doesn’t mean that you want an ugly cookie-cutter site or to settle for one that hasn't been updated since Hackers was in theaters. Through short tutorial videos, you’ll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. You’ll feel empowered rather than crippled by the internet and worst case scenario you’ll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen."
howto  tutorials  web  tutorial  design  reference  webdesign  css  html  srg  edg  via:tealtan  webdev  from delicious
february 2012 by robertogreco
Learn Web Design, Web Development, and iOS Development - Treehouse
"What do you want to learn today?

Web Design: CSS, CSS3, Aesthetic Foundations, HTML, HTML5 and Responsive Web Design.

Web Development: HTML5, JavaScript and Introduction to Programming.

iOS: Build iPhone and iPad apps with Objective-C, Xcode and more."
webdev  howto  tutorials  coding  programming  ipad  iphone  ios  xcode  objective-c  responsivewebdesign  css3  css  srg  edg  javascript  html5  html  design  webdesign  webdevelopment  responsivedesign  from delicious
january 2012 by robertogreco
Bootstrap, from Twitter
"Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more."
design  web  twitter  webdesign  ui  github  webdev  tools  toolkits  css  html  typography  webapps  bootstrap  from delicious
august 2011 by robertogreco
Open Source Ampersands
"This is a selection of single-character fonts. A single-character font is, literally, a font file that only contains glyphs for a single character. The single character in these font files is the ampersand.

Each ampersand on this page is real text, not an image. Just like any text, you can select it, copy it, paste it, and apply CSS to it. The ampersands scale as you zoom the page, and they work in virtually every browser — even ancient versions of Internet Explorer."
typography  fonts  webdesign  css  design  markpilgrim  opensource  ampersands  webdev  from delicious
march 2011 by robertogreco
HOWTO: Native iPhone/iPad apps in JavaScript
"Until the recent language ban imposed by Apple, I didn't even know that you could write native apps for iPhone and iPad in JavaScript. (I must be the last person to figure this out; it's been possible since 2008!)

In case you're as late to the party as me, it turns out that you can get web apps to behave like native apps. In this article, I'll explain how to:

strip away the browser chrome (the url bar and button bar);
prevent viewport scrolling and scaling;
respond to multi-touch and gesture events;
use webkit CSS to get the iPhone OS look and feel;
cache the app so it runs without internet access;
get a custom icon on the home screen; and
have a splash screen load at the start.

If you want to put it in the app store, you can even package your web app as a "native" Objective-C app. (Although, why you'd want to subject yourself to the app store approval process when you don't have to is beyond me.)"
iphone  ipad  javascript  development  howto  css  html  via:migurski  ios  applications  from delicious
february 2011 by robertogreco
Typograph – Scale & Rhythm
"This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it."
typography  css  webdesign  tools  webdev  design  scale  rhythm 
december 2010 by robertogreco
Google Font Directory
"The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.
google  fonts  typography  javascript  html5  html  webdev  api  css  design  webdesign  free  type  googlefonts 
may 2010 by robertogreco
Announcing A Book Apart | Jason Santa Maria
"I crafted a very simple page design to let the text take the spotlight. It’s a thin book, both in width and thickness, and I spent a long time fiddling with column widths and grids before settling on a comfortable line length. Our books are brief enough that we can’t predictably print on the spines; so I decided to wrap the title from the spine around to the back cover, giving the spine and back cover some identification and texture."
books  pamphletbooks  coding  css  webdev  html  typography  code  html5  alistapart  webdesign 
may 2010 by robertogreco
CreateHere | Home
"CreateHere works with one guiding principle in mind: we love our city for what it is, has been and could become.
entrepreneurship  chattanooga  tennessee  design  art  business  cities  urban  community  creativity  collective  creative  webdesign  agency  grants  css  arts  ideas  reference  lcproject  incubator  glvo  tcsnmy  local  webdev 
february 2010 by robertogreco
fred design » Simple rules for good typography
"Here are some basic rules to improve your typography across either web or print. Of course, these rules are only to start with, and rules are meant to be broken. But if you want something to look neat, clean and generally well designed they are a good set to follow. 1. Don't use too many typefaces. 2. Hierarchy 3. Font size 4. 8-10pt for body copy 5. A typeface not legible is not a typeface 6. Leadng 7. Kerning 8. Accent or emphasise 9. Do not overemphasise 10. no caps in body text 11. Always align to baseline 12. Flush left ragged right 13. Lines not too long or short 14. Punctuation and Bullet points 15. The Fibonacci sequence"
design  fonts  kerning  bestpractices  graphicdesign  typography  tips  advice  webdesign  tutorials  css  rules  reference  howto  web  webdev 
january 2010 by robertogreco
CSS Techniques I Wish I Knew When I Started Designing Websites - Noupe
"CSS is the best thing to happen to the web since Tim Berners-Lee. It’s simple, powerful, and easy to use. But even with all its simplicity, it hides some important capabilities. Ask any designer, and they’ll tell you that the majority of their code headaches are caused and ultimately solved by CSS.
design  internet  webdev  coding  css  css3  tutorials  hacks  tips  webdesign 
december 2009 by robertogreco
Let's make the web faster - Google Code
"There are many ways to make websites run faster. In this section, you can discover performance best practices that real web professionals employ in their everyday work. These practices have improved the user experience for millions of users and we hope they are useful for other web developers."
google  webdev  webdesign  tips  speed  optimization  bestpractices  javascript  tutorial  css  html  code  programming  web  development  tutorials  performance  coding  php  design 
august 2009 by robertogreco
Fuck the foundries [dive into mark]
"They still think they’re in the business of shuffling little bits of metal around. You want to use a super-cool ultra-awesome totally-not-one-of-the-11-web-safe-fonts? Pick an open source font and get on with your life."
creativecommons  opensource  open  fonts  design  webdev  typography  css  licensing  copyright  webdesign 
may 2009 by robertogreco
Tumblr Themes
"This is a repository of custom themes available for your Tumblr-powered tumblelog. I hope you find something you like."
tumblr  themes  css  html  blogging  webdesign  templates  microblogging  via:javierarbona  webdev 
december 2008 by robertogreco
Matthew Buchanan • Theming Tumblr
"Over the past couple of weeks I created a custom theme for Tumblr, which you can see here if you’re reading this post via the Tumblr Dashboard or RSS.
tumblr  css  via:javierarbona  webdesign  tutorials  howto  templates  webdev 
october 2008 by robertogreco
Mobile Internet - O'Reilly Radar
"(1) mobile is huge, (2) iPhone is worth developing for, (3) here's why other platforms' mobile experience sucks, and (4) what you can do to fix it. The two slides that really stood out were on points 1 and 2."
mobile  iphone  trends  internet  web  phones  optimization  oreilly  css  browser  statistics  webdesign  webdev  browsers 
may 2008 by robertogreco
Ned Batchelder: CSS Homer, animated
"Here's Román Cortés' Homer, animated to show the structure. I haven't done anything to Román's amazing work other than to annotate the divs with ids and add a bit of jQuery to show them in sequence so that you can see the characters being added one at
css  animation  design  code  webdesign  hacks  typography  thesimpsons  webdev 
may 2008 by robertogreco
Styles in Google Docs - Google Docs | Google Groups
"we've enabled "Edit CSS" on Docs such that you can explore styling documents. Think of Docs as the platform and the world wide web your place to explore the different styles! The possibilities are endless!"
googledocs  via:preoccupations  css 
april 2008 by robertogreco
Timeframe
"Click-draggable. Range-makeable. A better calendar."
javascript  calendar  programming  web  ajax  development  webdev  css  via:migurski  webdesign 
april 2008 by robertogreco
ME3DIA - February 26 2008: Hex silliness.
"The realization that l33tspeak could be applied to hex values in Photoshop led to a few minutes of frivolity. UPDATE: A few more, based on your suggestions (I can't believe I missed #C0FFEE the first time!) and some additional ones I came up with"
humor  geek  css  html  hex  numbers  color  webdesign  coding  webdev 
february 2008 by robertogreco
Text + Image + CSS3 = Crazy Delicious
"Hide an image in html Highlight the text with your mouse. Like this or my other projects like Spell with Flickr and Befuddlr? Help me cover the cost of EC2: Created by Erik Kastner at 2am How it works: Safari and Firefox support CSS3's ::selection pseudo
fun  css  web  coding  images  graphics  generator  css3  pixelart 
february 2008 by robertogreco
Design View / Andy Rutledge - Killing Some Bad Layout Conventions
"I’ll examine a couple of these inferior Web design conventions and expose their flaws. I’ll then suggest more effective alternatives to these conventions and explain why they work better...3 Columns Done Wrong; How Deep is My Silo?"
layout  webdesign  howto  html  css  conventions  criticism  critique  webdev 
january 2008 by robertogreco
« earlier      
per page:    204080120160

related tags

3d  abstraction  accessibility  adammorse  addons  adomainofone'sown  advice  agency  aggregator  agileux  aiga  ajax  alangaley  alimese  alistapart  alternative  ambient  ambientawareness  ampersands  analysis  android  animatedvariants  animation  annotation  api  applications  architecture  archiving  art  artist  artists  arts  atomicdesign  audience  audio  auditiontext  aws  backups  badges  basecamp  basics  beaker  beakerbrowser  behavior  benjilanyado  bestpractices  bibliography  bindery  bindery.js  blending  blendmodes  blogging  blogs  blueprint  boilerplate  books  bootstrap  bootstrap3  bots  bramstein  breakingrules  browser  browsers  bullshitdetection  business  buzzwords  calendar  cameras  canon  careers  change  chattanooga  cheatsheets  checklist  chicago  chrisblow  chriscoyier  cities  clarification  class  classes  classideas  clayshirky  clientdriven  clients  cmyk  code  codecademy  codeforamerica  coder  coding  collaboration  collective  color  colors  communication  community  communitymanagement  comparison  compass  complexity  compression  computing  confusion  consultants  consulting  content  continets  contradictions  control  conventions  conversation  copyright  countries  craigmod  crapdetection  creative  creativecommons  creativity  criticism  critique  crossdisciplinary  css  css3  csss  culture  customization  cv  d3  d3.js  danmotzenbecker  dash  dat  data  databases  datavisualization  decentralization  decentralizedweb  decisionmaking  definitions  deschooling  design  designops  designresearch  developers  development  dictionaries  dictionary  digital  digitalsertão  discovery  distraction  distributed  documentation  download  dropbox  drupal  drupalcon  dweb  ebooks  edg  education  edwardtufte  effects  email  engineering  entrepreneurship  epublishing  ethnography  evolution  exoskeletons  expandingtext  experience  experimentations  exploration  expression  extensions  externalization  facebook  facilitation  facts  failure  fear  feeds  filingsystems  filtering  filters  firefox  flash  flickr  flow  fluid  fluidimages  flux  fonts  framework  frameworks  francjchimero  free  freeware  fun  galleries  gallery  geek  generalassembly  generalists  generator  getout  gimp  github  globes  glvo  google  googleanalytics  googlecreativelab  googledocs  googledrive  googlefonts  grants  graphicdesign  graphics  graphs  green  guardian  guides  hacking  hacks  halftoneeffect  halftones  halftoning  hashbase  hex  history  hosting  howto  howweread  howwework  html  html5  html5boilerplate  human  humor  icons  ideas  ie6  ie7  ie8  imageediting  images  imaging  immediacy  incubator  indexhibit  influence  infodesign  information  initializr  interaction  interactiondesign  interactive  interationdesign  interdisciplinarity  interdisciplinary  interface  internalization  internet  interoperability  inventory  ios  ipad  ipfs  iphone  iteration  japan  javascript  jeffreyzeldman  jekyll  johnallsop  journalism  jquery  just  kerning  kerouapp  keynote  labeling  labels  language  layout  lcproject  leanux  learnability  learning  less  libraries  licensing  links  linux  lists  livepreview  loading  local  logos  longevity  lookaround  mac  maintainability  maintenance  management  mapping  maps  marketing  markpilgrim  markup  maxfenton  meaning  media  mediaqueries  medium  meedan  meetup  memory  mentoring  mentorship  methods  microblogging  mikebostock  mindmap  mindmapping  mobile  mobilefirst  mobileweb  modernizr  must  names  naming  narrative  nathanbashaw  navigation  netlify  networks  news  newsletters  notebooks  notes  notetaking  numbers  nyc  nytimes  objective-c  offtheshelf  online  onlinetoolkit  open  openhtml  opensource  openstudioproject  operations  optimization  oreilly  osx  ownership  p2p  p2ppublishing  p2pweb  palettes  pamphletbooks  paper  papernet  patternlibraries  patterns  pdf  performance  perl  permissions  phones  photography  photoshop  php  pingmag  pixelart  plasticity  plugins  portfolio  portfolios  powerpoint  presentations  principles  print  process  productivity  programming  progressiveenhancement  publishing  python  random  randomness  raspberrypi  re.na  react.js  readability  reading  readymade  readymadetools  reddit  redditedit  reference  relationships  research  resources  responsive  responsivedesign  responsivewebdesign  revdancatt  revolution  rewards  rhythm  robinrendle  rss  ruby  rubyonrails  rules  safari  sass  scale  scuttlebutt  security  selectivizr  sentences  sfsh  shame  sharing  shellscripts  simplicity  simply  sketching  slides  slideshow  smallpieceslooselyjoined  social  socialmedia  socialsoftware  software  sound  soundcloud  speaking  speech  speed  spreadsheets  srg  stackingwords  standards  states  statistics  stencils  stevechampeon  stockphotography  storytelling  stress  style  styleguides  sublimetext  surveys  svg  symbols  systems  tagging  tags  tcsnmy  teaching  teamwork  technology  template  templates  tennessee  terminology  testing  text  themes  theory  theredditedit  thesimpsons  thisandthat  timelines  tips  tokyo  toolkits  tools  tracker  tracking  training  translation  transportation  trends  tumblr  tutorial  tutorials  tweetie  twitter  type  typeface  typogasm  typography  ui  uiland  universal  universality  unix  unschooling  urban  urls  usability  usabilitytesting  userexperience  users  ux  uxdesign  values  variations  versioncontrol  versioning  via:ableparris  via:ayjay  via:caseygollan  via:clivethompson  via:javierarbona  via:jessebrand  via:kottke  via:litherland  via:maxfenton  via:migurski  via:nicolefenton  via:preoccupations  via:russelldavies  via:spencerbeacock  via:steelemaley  via:tealtan  vimeo  visualdesign  visualization  web  webapps  webdeb  webdesign  webdev  webdevelopment  webfonts  webkit  website  webwelost  widgets  windows  wordpress  words  work  workflow  writing  xcode  xhtml  xml  youtube  zines  zurb 

Copy this bookmark:



description:


tags: