CSS - Cheat sheet

Cardinal — Mobile-first CSS framework with useful defaults

Cardinal is a mobile-first CSS framework that comes with some useful default styles, reusable modules, scalable typography, and a responsive grid system. It’s great for developers who want a simpler way to build responsive web apps.

[CSS] css 참고 사이트.   transform, transition, Animation

CSS3 transform:skew
CSS3 transform:rotate
CSS3 transform-origin

transform
transition
animation

http://tcbs17.cafe24.com/tc/html5/css_/css_demo2/index.html

SVG : Scalable Vector Graphics

CSS 참고 사이트
http://htmlcss.kr/
http://w3schools.com/
http://css3generator.com/
http://caniuse.com/

17 Best CSS Tools to Speed Up Your Coding

http://codegeekz.com/best-css-tools-to-speed-up-your-coding/

CSS doesn’t need any introduction as it is one of the most popular language amongst developers. Learning and working with CSS is no more an arduous task as there are many informative tutorials and CSS tools are available over Internet. Such tools would lead you to create useful and innovative web applications and spare the development process and time.

In this article I have gathered 17 Best CSS Tools to speed up your coding; following tools will assist and simplify the work of developers and designers. With the following tools you can generate CSS menus, animated images, buttons, sliders, text animation, CSS form codes, layers and many more. Hope you find the list handy and useful for your development needs.

1. Topcoat : CSS for Clean and Fast Web Apps

Topcoat is a library which consists CSS classes for form elements, buttons, checkboxes, sliders and many more. It is a lightweight tool that would make your website or app look awesome in short period of time.

Website

2. PCSS : Shortcut Oriented Server Side CSS3 Preprocessor

PCSS is a PHP-driven CSS Preprocessor, which aids developer to write CSS code quickly by defining variables, class nesting, default unit and server-side browser specifics. PCSS do server-side processing using PHP 5, so it requires this version to be available on the server where the website is running.

Website

3. Skelton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles: responsive grid down to mobile, fast to start and style agnostic.

Website

4. CSS Menu Maker

This tool helps users to create custom CSS drop down menu easily. CSS Menu Maker provides webmaster with tools to create custom, cross browser compatible css menus also it provides source code for all CSS Menus and facilities users to download and tweak the code.

Website

5. Sencha Animator

It is a desktop application which enables users to create CSS3 animations for touch screen mobile devices and webkit browsers. Sencha Animator helps users to create animated text, images, design buttons with gradients and embed analytics.

Website

6. CSS Form Code Generator

CSS Form Code maker creates nice looking layouts for forms. It also helps you to crate colorful table less layout for forms. This ‘code maker’ generates CSS layout code to ‘spice up’ those forms as well.

Website

7. PrefixmyCSS

PrefixMyCss lets you prefix your CSS3 code easily. Users have to paste CSS code in to the window to prefix, all vendor prefixes are added to your code, users can safely replace their old code.

Website

8. Sky CSS Tool

Sky CSS Tool allows you to create CSS classes almost without using manuscript code. Users would need JavaScript compatible browser for the proper functioning.

Website

9. Spritemapper

Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices. This tool helps developers to optimize available space and the loading time.

Website

10. CSS Compressor

CSS Compressor compresses your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

Website

11. Patternify

It helps you to generate beautiful CSS patterns.

Website

12. CSS Text Shadow

CSS Text Shadow allows you to generate beautiful text shadows.

Website

13. CSS3 Pie

Pie makes internet explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Website

14. The Web Font Combinator

This tool has been built to allow previewing of font combinations in a fast, browser-based manner. There have been numerous printed books through the years that allowed a designer to put a headline font next to a body font, and this is an attempt to recreate that for the web.

Website

15. 3D Transforms

CSS 3D Transforms is online tool which enables users to perform various level Transforms. This tool is on experimental mode and require specify prefixes in all browsers.

Website

16. Quick Form Builder

Quick Form Builder allows you to easily create CSS forms.

Website

17. Layer Styles

It is a HTML5 app for creating CSS3 in an intuitive way. It has Colorpicker which lets you pick any color of the element you’re working on, it facilitates users with Drag and Drop images on to the page to use them as background or to pick their colors.

Website

Summoning the Next Interface: Agentive Tools & SAUNa Technology

http://www.cooper.com/journal/2013/05/summoning-the-next-interface-agentive-tools-sauna-technology.html

Part 1: Toward a New UX

If we consider the evolution of technology—from thigh-bones-as-clubs to the coming singularity (when artificial intelligence leaves us biological things behind)—there are four supercategories of tools that influence the nature of what’s to come:

1. Manual tools are things like rocks, plows, and hammers; well-formed masses of atoms that shape the forces we apply to them. Manual tools were the earliest tools.
2. Powered tools are systems—like windmills and electrical machines—that set things in motion and let us manipulate the forces present in the system. Powered tools came after manual tools, and took a quantum leap with the age of electricity. They kept becoming more and more complex until World War II, when the most advanced technology of the time, military aircraft, were so complex that even well trained people couldn’t manage them, and the entire field of interaction design was invented in response, as “human factors engineering.”
3. Assistive tools do some of the low-level information work for us—like spell check in word processing software and proximity alerts in cars—harnessing algorithms, ubiquitous sensor networks, smart defaults, and machine learning. These tools came about decades after the silicon revolution.
4. The fourth category is the emerging category, the new thing that bears some consideration and preparation. I have been thinking and presenting about this last category across the world:
   Agentive tools, which do more and more stuff on their own accord, like learning about their users, and are approaching the artificial intelligence that will ultimately, if you believe Vernor Vinge, eventually begin evolving beyond our ken.

Where We Are vs. Where We Think We Are

For the most part, our clients at Cooper approach us to make powered tools for their users, like the video tools for (now-gone) Flip video. That’s fine. There’s a great deal of history and best practices established to help us knock these problems out of the park. We’re good at this.

Over the course of these projects we often identify and suggest cutting-edge opportunities that are farther along the arc, that would have them building assistive tools to help their users, but if I had to guess, I’d say only one out of five organizations are well-positioned enough to move on these ideas. I suspect that over time, the number of clients moving on assistive tools will increase. So if that’s where we are, with most clients asking for powered tools and most interaction designers providing designs for assistive tools, we’re both still a bit behind.

Based on the advancements, patents, popular familiarity, and marketization of a host of particular technologies (that you’ll see listed below), we are farther along that arc, able to create designs that are genuinely agentive tools. That has some implications to discuss, but first, let’s clarify the categories of technology that are enabling this sea change.

As a group I call these agentive-enabling technologies SAUNa tech. The acronym means nothing, really. There’s no generative richness here to a literal sauna, but it’s a useful acronym to encompass the four types of technologies involved: Social systems, Agentive algorithms, and Ubiquitous technologies accessed via Natural User Interactions.

Social Systems

“Social” has come to mean “social networks” but my use of the term covers more than just Facebook and Twitter. The paradigm of one user using one machine to perform one task is becoming the exception, with multiple users working across multiple systems accomplishing shared goals being more common (and more problematic to design for). For example, this article itself was originally written in Google Docs with permissions granted for an author and a number of editors, who have worked on it from laptops in airports and coffee shops, on phones and public transport, and desktop computers at Cooper.

We also must deal with the fact that when combined with agentive algorithms, social systems can now access Big Social Data. Systems looking to learn have humanity and history as their dataset. Doctors using agentive tech won’t just know what happened to their own patients, they’ll know what happened to all patients at all times in recorded history (to varying levels of detail) and adjust diagnoses and treatments accordingly.

Agentive Algorithms

Perhaps the most cutting edge of these are the agentive technologies, those that feel like low-level artificial intelligence. These technologies are aware of us—our identities, our intentions, and possibly even our emotional states. They adhere to Gricean maxims for interaction, and perform low-level machine learning about us as they help us achieve our goals. (Be sure to note the difference between these agentive algorithms and the category of technology that is named for them.)

Ubiquitous Technology

The technological skin that humans wear is getting thicker and more interconnected all the time. Technology is already in our skies, in space, in hospitals, on the battlefield, and under the sea. As information workers in the Western world, technology is under our fingers most of the day: on our desktops, in our hands, in our cars, with us at the gym, carried with us to the bathroom, and pulled to our faces first thing when we wake up in the morning. It’s on the streets of our cities and inside the shops we patronize. Our users are constantly moving across these everpresent technological touchpoints, and experiences have to shift to take advantage of them seamlessly.

Natural User Interactions

Personally, I hate the term, “natural” UI. Given the old saw, “The only intuitive interface is the nipple. Everything else is learned,” “natural” is an overblown promise especially for a set of technologies that are often DOS-like in their absent affordances. But no better label has taken hold that describes the set of technologies that engage more of our bodies and capabilities than WIMP paradigms, so we’re going forward with the term, with objections noted. Though it’s evolving and adapting, my working list of those technologies at the time of writing follows.

• Haptic technology: Outputting information to our skin.
• Gesture recognition: The ability to communicate with computers with our bodies and especially our arms and fingers.
• Tangible and touch tech: The ability to directly indicate selections and manipulate objects in ways that computers can understand.
• Voice recognition and generation: The ability to speak to a computer as we would speak to another person.
• Ocular control or gaze monitoring: The ability to point with our eyes.
• Cerebral (brain) interfaces: Using thoughts or brain waves to communicate to computers.
• Near field communications: Letting us place objects in proximity to initiate data transfer and indicate selections or focus.
• OLED and eInk displays: Visualizations of the abstractions around us, everywhere.
• Heads-up displays: The personalized augmentation of the world around us

SAUNa technologies are each powerful enough on their own, but once they’re combined into holistic platforms, we’ll be deep into assistive territory and have an outstretched foot into the agentive zone. These things are coming, and I believe coming sooner rather than later.

In the next post I’ll touch on the implications that the full-scale adoption of SAUNa tech has for interaction design.

Summoning the Next Interface Agentive Tools & SAUNa Technology Cooper Journal.mht

Pure — Small, responsive CSS modules for every project

Homepage: http://purecss.io/
GitHub: https://github.com/yui/pure/

Pure는 설치가 간단한, 반응형 CSS 모듈이다.

Pure is a set of small, responsive CSS modules that can be used in all of your web projects.

 There are modules for everything from grids to forms to menus and much more,

all with a minimal footprint (ranging from .6KB for the tables module to 1.4KB for the forms module).