What Is A CSS Framework Anyway?What Is A CSS Framework Anyway? at SmartWeb Conference, Bucharest. September 2014. VIDEO: https://vimeo.com/95734680
Automating Front-end Workflow
Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year. What if however, you could automate a lot of this? This talk introduces you to a new workflow of tools to keep you productive on the front-end. Learn about: - Yeoma
Abusing Preprocessor ASTs
One of the coolest benefits of preprocessors is that they have easy-to-grok open source parsers that you can actually get into. By injecting yourself after the pre-CSS code has been parsed, you can have a data-centric view of your styles. You can use this information to reduce complexity, point out probable mistakes, or more interestingly, gather metrics, and implement real-time update mechanisms
The humble border-radius
Important This slide deck was created for use in a controlled environment, during a talk. It works best with (modern) Firefox OSX at 1024x768. Use Ctrl + {A, S, Z, X} in the live code examples to expose the inner & outer radii sizes of the top corners. The demos were live coded, so these slides are a bit pointless if you never watched the talk.
CSS in the 4th dimension
.panel { display: none; } button:hover + .panel { display: block; } button { background-color: #800; } button:hover { background-color: red; } I make stuff appear Abruptness = bad UX* Transitions are not just fluff *Delays are even worse Don’t piss off your users JS to the rescue (?) <script src="jquery.min.js"></script> <script src="jquery.animate-colors-min.js"></script> $('button').hover(functi
More CSS Secrets: Another 10 things you may not know about CSS
background: linear-gradient(white 30%, hsla(0,0%,100%,0)), linear-gradient(hsla(0,0%,100%,0), white 70%) bottom, radial-gradient(at top, rgba(0,0,0,.2), transparent 70%), radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom; background-repeat: no-repeat; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; background-attach
Notes from CSS Dev Conf Honolulu — Christopher Schmitt
The first annual CSS Dev Conf wrapped up a couple of weeks ago. It featured over 20 speakers, two keynote presentations, and one massive wrap up panel of CSS experts featuring every speaker there. Aside from the online conference, CSS Summit, I don’t think there’s ever been an organized event focused solely on the design language of the web for web builders. Slides: Flexible Media in Responsive We
Selectors: Select This!
selectorA { property1: value1; property2: value2; } selectorB { property1: value3; property2: value4; } selector:pseudo-class::pseudo-element { -vendor-property: value; } selector[attribute], selector ~ relation { property: -vendor-value; -vendor-property: -vendor-value; -vendor-property: weirdsyntax; } <ul> <li id="myID" class="myClass">item 1</li> <li class="myClass">item 2</li> <li>item 3</li>
BonsaiJS - A Graphics and Animation JavaScript Library
Tobias Reiss, Software Developer, Uxebu Inc. Agenda Introduction API Architecture Orbit Facts Graphics library written in JavaScript SVG renderer Open Source Beta bonsaijs.org Essential Features Draw Shapes, Bitmaps and Text Groups, Movieclips, Plugins Animations, Filters, Mask Load Fonts, Bitmaps, Audio, Video, (Sub-)Movies Architecturally decoupled renderer and runner Pixelplant Flash 10 & Act
HTMLとかCSSとかAPIとか
2012年9月8日に開催されたHTML5 Conference 2012でお話したときのスライドです。 スライドを見る
Sass 3.2: Silent Classes // Speaker Deck
One of the frustrations of OOCSS concepts is the amount of presentational classes that need to be created and the method of applying them to the DOM. Sass has looked to address this issue first with Mixins, then Extends, each with their own issues of duplicated code or creation of unnecessary code. Sass 3.2 introduces the concept of 'silent classes' whereas standardized presentational classes ca
才色兼備なグラフィックス SVG が魅せる Web の未来
SVG が魅せる Web の未来 Firefox Developers Conference 2012, Osaka Brian Birtles 皆さま、こんにちは。Mozilla Japanのブライアンと申します。 今日は「才色兼備なグラフィックス」というテーマで話させていただきたいですが 最初に短い自己紹介をさせていただきます。 今日のテーマと打って変わって、私は才色兼備ではもちろんなくて、 グラフィックスについて話すくせに、デザイナーでもありません。 実は高校のとき、デザイナーになりたかったんですが、センスがなくてあきらめました。 それから、ウェブ開発もあちこちやりましたが、それも以外に難しかったです。 でも、私が悪いと思わなくて、ウェブが悪いと思いましたので、 ウェブを改善するため、2004年にボランティアとしてFirefoxの開発に参加し始めました。 今はMozilla J
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Whirlwind Tour of SVG
Basic HTML5, ARIA, and Screen Readers
Automated CSS testing
Performance & Responsive Web Design
http://girliemac.github.com/presentation-slides/SFHTML5DevConf/
Beyond Media Queries: Anatomy of an Adaptive Web Design
HTML5 The Mobile Approach
A better future with KSS
