Along with increasing your ability to communicate within your team, modular design also makes changing styles across your design incredibly simple. Done properly, modular design exponentially decreases your production time and increases your bottom line.
Good links to Sketch plugins and helpers
With recent advances in front end technologies, front end developers have been going crazy, pushing CSS to its limits and doing all sorts of beautiful animations. Seriously, there are some crazy things out there.
I recently did this 3D animated atom in which I had to employ a couple of weird techniques which I’ll try to explain here.
See the Pen Subvisual – Animated Atom by Miguel Palhas (@naps62) on CodePen.
What we mean when we say “PostCSS”
With the word “PostCSS” we might alternately refer to two things:
- There is PostCSS, the tool itself — what you get when you run
npm install postcss— and- The PostCSS plugin ecosystem powered by that tool.
The tool itself is a Node.js module that parses CSS into an abstract syntax tree (AST); passes that AST through any number of “plugin” functions; and then converts that AST back into a string, which you can output to a file. Each function the AST passes through may or may not transform it; sourcemaps will be generated to keep track of any changes.
The AST provides a straightforward API that developers can use to write plugins. For example, you can cycle through each rule set in a file with
css.eachRule(), or each declaration in a rule withrule.eachDecl(). You can get the selector of a rule withrule.selector, or the name of an at-rule withatRule.name. From these few examples you can see that the PostCSS API makes it pretty easy to work with CSS source code (much easier and more accurately than if you were to rely on regular expressions, like a chump).
This article aims to showcase some of the creative things you can do with checkboxes. Read on and keep in mind that the demos in this article use no JavaScript.
Interesting collection of auto-generator tools – color palettes, logos, favicons, business cards.
From Vitaly Friedman/Smashing Magazine Newsletter #139:
We know how it works: requirements change, layouts change, the codebase changes — what remains, however, is unused code, which has to be reviewed and refactored every now and again. CSS is as prone to this as any other piece of code. However, you don’t need to do everything manually — going line by line, detecting unused code and cleaning up the style sheet. There are tools to help you (of course).
SymDiff, available for CSS preprocessors (Sass, LESS) and templating languages (HTML, Jade, Handlebars, JSX), reports any differences between the classes used in CSS and in your templates. Helium CSSscans a site and shows unused CSS, and so do UnCSS and Deadweight. You can also use Dust-Me Selectors Firefox plugin, Devtools (“Audit Present State”) and other tools to keep your style sheets clean and neat. There’s no longer any excuse to leave unused CSS in your style sheets — and it isn’t that difficult to automate this little optimization into your workflow either! (vf)
Checkboxes are great. Combine them with the right CSS and you can pull off some really neat tricks. This article aims to showcase some of the creative things you can do with checkboxes. Read on and keep in mind that the demos in this article use no JavaScript.
Product Design is About a Mission, a Vision and an Architecture
Think About Four Layers of Design
