If you started a project like CSS Zen Garden today, it would be natural to put the source code on GitHub and ask for contributions via pull request. However, CSS Zen Garden just turned 10, so its life spans beyond that of Git and GitHub for that matter. So, needless to say, it’s a big [...]
CSS
CSS (and possibly Sass) related open source projects that you should know about!
shame.css — a best practice for handling CSS hacks right
@tkenny seems you missed his point. He’s not advocating hacks. @csswizardry is advocating a best practice for handling them.— Adam Stacoviak (@adamstac) April 18, 2013 Harry Roberts (aka CSS Wizardry) isn’t advocating writing “hacky” CSS, he’s advocating a best practice for handling them. From his post on the subject: The idea of shame.css is that [...]
csscss parses your CSS and shows your duplicated declarations right
Yesterday, a neat little gem called csscss celebrated a 1.0 release! csscss will parse any CSS or Sass file you give it and let you know which rulesets have duplicated declarations. It’s super easy to use: $ gem install csscss $ csscss path/to/styles.css path/to/other-styles.css {.contact .content .primary} and {article, #comments} share 5 rules {.profile-picture}, {.screenshot [...]
Meet grunticon: a mystical CSS icon solution right
grunticon — yet another cool project by Filament Group — is a Grunt.js task that takes a folder of SVG files and turns them into SVG data urls, PNG data urls, and plain old PNG files to be referenced via CSS. It also generates a snippet of JavaScript and CSS to asynchronously load the proper [...]
Easings.net helps select the right easing for an animation right
If you need help with selecting the right easing for an animation, Easings.net could be the help you’re looking for. It includes an explanation about easing, helpful animated graphs to visually demonstrate each easing as well as “how to” code for jQuery, Sass and CSS. Since it’s open source, the tool has been forked and [...]
CSS PhotoEditor for iOS 6 demos CSS filters you can use today right
Last week on episode #39 of The Industry, my buddy Drew Wilson mentioned this CSS photo editor he bookmarked a few months back. It’s a test site for new CSS features in iOS6 and other modern browsers for CSS filters and input[type="file"] that lets you edit photos using CSS filters. Check out the site, the [...]
Flat UI user interface kit from Designmodo right
If you haven’t heard, flat design is pretty trendy right now. Last September, LayerVault shared their thoughts (and some would say coined the term too) on The Flat Design Era. Since then, many sites and designers have taken to this new trend — including the folks at Designmodo. A month ago they released Flat UI, [...]
ZURB Foundation turns 4.0 right
We originally covered Foundation back at 2.0. That was before Foundation 3.0 where they re-wrote the styles in Sass (SCSS) and Compass rather than pure CSS. Now, ZURB is at it again with Foundation 4.0 and this is what’s new. Mobile first. We’ve retooled Foundation from the ground up to be Mobile First. This is [...]
Custom user styles that simplify the UI and focus on the content of popular websites right
While recording The Industry Radio Show one of our listeners linked out to these custom user styles from Connor Sears, a Product Designer at Pinterest. If you caught our original post on Stylebot a while back, custom user styles like the ones Connor shared become easier to use and far more useful. With 60% of [...]
hint.css makes pure CSS tooltips too easy right
From the hint.css homepage: hint.css is written as a pure CSS tooltip library which you can use to create cool tooltips for your site. It does not rely on JavaScript, but instead uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. hint.css uses BEM naming convention particularly for the modifiers. [...]
Unsemantic, Nathan Smith’s fluid grid successor to 960.gs right
From the homepage: Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages. Having worked side-by-side with Nathan for several months, I can really appreciate his humour in naming his [...]
gradientD is a CSS3 Gradient Designer using Dojo right
Tom Pryor: I wanted to try out Dojo’s new AMD pattern, as well as widigtize (finally) the gradient code spagetti I am currently using in my CSS3 Button Tool (Beta) and I finally got some time to play so I put this dojo widget/mashup together and put it on gitHub in case anyone was interested. [...]
The Good Man experiments with basic CSS3 animations right
From the readme: This project is about experimentations. About CSS3 animations and a graduation project. My name is Pedro Ivo Hudson and this is my debut. And what a debut. Wow, I’m impressed. Check it out for yourself at thegoodman.cc or check out the source code as well as the about/credits to learn more about [...]
Nodefront – Node.js-powered rapid front-end development utility right
Nodefront from Karthik Viswanathan aims to make a front-end developer’s life easier. Built in Node.js, Nodefront bundles a local web server for serving up HTML, CSS, and JavaScript assets and supports live reloading via web sockets. Additionally it ships with a command line interface: nodefront compile – Compiles Jade and Stylus files to HTML and [...]
Holmes – CSS based error detection, watson. right
A unique take on HTML ‘validation’, Luke Williams has made finding erroneous markup elementary. It’s a two step process: add the stylesheet to your markup, and add the following class to the <body> tag: <body class=”holmes-debug”> It will catch common errors, like give all <image> tags without an alt attribute a 2 pixel red outline. [...]
Photon – CSS 3D Lighting Engine right
Tom Giannattasio authored a very powerful lighting engine using JavaScript and CSS3, and it is very easy to use – Photon. There are three basic concepts in Photon: Photon.Light (A point in 3D space from which faces are lit) Photon.Face (A DOM element to shade with a given light) render (Tie a light and a [...]
Cassette – Web asset manager for .NET with support for Less and CoffeeScript right
Asset packaging is a hot topic these days. Andrew Davey brings the fun to .NET with Cassette, an asset bundler for .NET web apps. Much like Jammit or Sprockets for Ruby apps, Cassette concatenates, minifies, and manages dependencies between scripts: @{ Bundles.Reference(“Scripts/app/page.js”); } <!DOCTYPE html> <html> <head> <title>Web App</title> @Bundles.RenderScripts() </head> <body> … </body> </html> [...]
Episode 0.7.0 – Foundation and other Zurb goodies
Wynn caught up with Jonathan and Matt from Zurb to talk about Foundation, their HTML5 front end scaffold and many projects from the Zurb playground. Items mentioned in the show: Jonathan Smiley – Design lead at Zurb Matt Kelly is a developer at Zurb The Zurb playground showcases many Zurb’s front end experiments. Zurb foundation [...]
Zurb Foundation – Design scaffold for your web app right
The talented team at Zurb has released Foundation, a design scaffold for building web applications. Much like HTML5 Boilerplate, Foundation comes with some sensible markup defaults, however it goes farther with attractive styles for most interface elements in the spirit of Twitter’s Bootstrap project. Along with a grid layout and form styling, Foundation also bundles [...]
CSS1K: A demonstration of what can be accomplished with only 1k of CSS right
CSS isn’t a subject we cover too often here on The Changelog. Most often, we are talking about Sass (drink!), Compass, Stylus, Less or some other blend of “pre-processor” we, fan boys, love to cover. What we need to realize, and not forget, is that all of these solutions regardless of how awesome they are [...]
AssetHat: Load your CSS and JS faster. Your assets are covered. right
Ron DeVera reached out to us a few weeks back to let us know about a new project he’s working on at Mint Digital called AssetHat. AssetHat is a Rails gem that hopes to make the web a little bit quicker by making front-end assets (CSS, JS and images) load faster (especially on mobile devices). [...]
scrollability: Native scrolling for the mobile web right
Perhaps even more than advanced features like GPS, camera access, contacts, and App stores, the lack of viewport-aware position:fixed is what drives many apps to be developed as a native experience. Joe Hewitt who brought us Firebug and the Facebook iPhone app has released Scrollability, a single script with no external dependencies that allows developers [...]
Sass 3.1 released, now with functions, lists, and @media bubbling right
Sass continues to provide innovative new ways to DRY up our CSS. Version 3.1 is out and offers many new language features, compilation performance improvements, and some new command line options. Sass, extend thyself with Sass-based functions Rubyists have long had the ability to extend Sass, but now anyone can create powerful functions using only [...]
Adapt.js: More efficient responsive design right
As the mobile space continues to grow, there has been a growing interest in Responsive Web Design, making use of CSS media queries to selectively target device screen size and layout orientation in CSS stylesheets. But as Jason Grigsby points out, media queries have substantial drawbacks. Since media queries only filter styles and (and related [...]
Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith
Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith Adam and Wynn were joined by Nathan Smith, creator of 960.gs to talk about his new project Formalize and the latest news on The Changelog. Download MP3 Items mentioned in the show: Nathan Smith, front end dev, speaker, and author 960 Grid System [...]
rack-pagespeed: Rack middleware for page speed optimization right
Thanks to work by Google and Yahoo, we’re all better informed about how to speed up our web pages. For those on Apache, Google has made it easier to implement these ideas at the Apache Module level. For those running on Ruby web frameworks, Julio Cesar offers up the same goodness as Rack middleware. Rack [...]
compass-magick: Extend Sass with power of ImageMagick right
Compass delivers powerful features on top of Sass including support for CSS3 and image sprites. With Compass-Magick, Stan Angeloff pushes the envelope a bit and adds the power of ImageMagick (via RMagick), allowing you to create images for your stylesheets on the fly: background: transparent magick-image(‘nav.png’, 940px, 50px, magick-erase(blue), magick-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, [...]
Stylebot introduces social stylesheet sharing right
Since we first covered Stylebot a few months back, I’ve been using it every day to bend web pages to my will. GitHub gets a healthy dose of Menlo on all code blocks and my TeuxDeux list seems a bit more personal in Hand of Sean. Stylebot.me, the project home page, now includes some nifty [...]
stylus: Expressive, robust, feature-rich CSS language built for Node.js right
This isn’t the first time we’ve covered the latest fresh and new creation from LearnBoost. Stylus is an expressive, dynamic, robust CSS pre-processor for Node.js. If you are familiar with Sass.js, Sass or Less.js … Stylus is kind of similar, but from what we’ve heard from TJ Holowaychuk they’ve taken it pretty far in a [...]
Episode 0.4.6 – YUI 3, Node.js, JSLint, and Douglas Crockford code reviews
Adam and Wynn caught up with Adam Moore and Satyen Desai from the YUI team to talk about YUI 3, Node.js, and working with Douglas Crockford. Items mentioned in the show: YUI is the Yahoo! User Interface library, a collection of front end code goodies for JavaScript and CSS Follow the YUI Blog for the [...]