imjasonh

* {
    font-size: 12pt;
    font-family: monospace;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: black;
    cursor: default;
}

daneden

Aspirational Dropbox SCSS Principles

This is purposefully ambitious and aspirational. Some concepts that are worth understanding in addition to the principles outlined here include:

• Object-Oriented CSS
• BEM naming methodology
• CSS Namespacing

Here’s a CodePen I’ll periodically update with the compiled CSS to use as a testing playground.

p3t3r67x0

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

addyosmani

{
    "name": "my-app",
    "version": "1.0.0",
    "description": "My test app",
    "main": "src/js/index.js",
    "scripts": {
        "jshint:dist": "jshint src/js/*.js",
        "jshint": "npm run jshint:dist",
        "jscs": "jscs src/*.js",
        "browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

kejun

mathclub是最近做的一个个人项目，帮助考SAT的同学通过在线做题、回顾、问答提高成绩。用户功能有：计次/计时做题、成绩单、错题分布、错题回顾、提问、汇总以及注册登录。管理后台主要是题库管理、学员管理、成绩单管理、问题回复。怎么看都像学校里的课设，的确项目本身并不出奇，开发上选用的一些方案或许更有意思。

整个项目一个人从产品需求、原型设计、前后端开发到部署历时2周左右。可以从截图上感受一下：

技术选型上服务端是Node.js，应用框架选了老牌的Express（4.x变化挺大不少中间件都废了），数据服务用的是MongoLab（MongoDB的云服务平台），图片上传用的是又拍云，程序部署在Nodejitsu上。模板引擎没选主流的Jade或ejs，而是用Express React Views它实现了在服务端渲染React组件。前端框架是用React，这次有意想追求前后端全部组件化的组织。之前是用Webpack实现CommonJS模块打包，这次用Browserify配置更简单，它有丰富的transform很赞，其中的reactify转换React的JSX很完美。CSS用Sass＋autoprefixer让人省心。将这一切串起来的自动构建工具是Gulp。我其实崇尚用最精简的工具组合开发，上述组合在我看来比较精简了。（帖纸留念）

![image](http://satexam.b0.upaiyu

gefangenimnetz

/**
 * A mixin which helps you to add depth to elements according to the Google Material Design spec:
 * http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality
 *
 * Please note that the values given in the specification cannot be used as is. To create the same visual experience
 * the blur parameter has to be doubled.
 *
 * Author: Florian Kutschera (@gefangenimnetz), Conceptboard GmbH (@conceptboardapp)
 *
 * Example usage:

youngshook

#/bin/sh
# Update: 2014-06-24
# Author: YoungShook

# compress application.
if [ "${CONFIGURATION}" = "Release" ]; then

# Local Display App Name And Default Icon@2x.png ------------ need developer custom
ICON_NAME="Icon-76@2x.png"

bomberstudios

NOTE: the list has moved to https://github.com/sketchplugins/plugin-directory

Sketch Plugins

A list of Sketch plugins hosted at GitHub, in no particular order.

• brandonbeecroft/Lorem-Ipsum-Plugin-for-Sketch This is a plugin for quickly creating Lorem Ipsum text in Sketch
• sebj/Sketch Templates and Plugins for Sketch by Bohemian Coding
• FredericJacobs/crop_Artboard A script to export the Sketch App artboards to the clipboard
• almonk/SketchGit A simple Git client built right into Sketch.

edokeh

//
//                       _oo0oo_
//                      o8888888o
//                      88" . "88
//                      (| -_- |)
//                      0\  =  /0
//                    ___/`---'\___
//                  .' \\|     |// '.
//                 / \\|||  :  |||// \
//                / _||||| -:- |||||- \