I wanted to make a simple Mac OS X window in CSS. A window itself is kind of boring so I decided to make it a nonfunctional code editor. Written in SASS with Compass and HAML. Even though the design is very simple and generic, I guess Sublime Text 2 and

index.haml

#app
	#toolbar
		#traffic-light
			.aqua#red
			.aqua#yellow
			.aqua#green
	#view
		#tree
			%ul
				%li index.haml
				%li style.sass
		#textfield
			%pre
				:preserve
					/* Cocoa code editor in SASS and HAML */

					.someclass {
						width: 100px;
						height: 100px;
					}

					#someID {
						color: red;
						position: absolute;
					}
	#statusbar

style.sass

@import "compass"
html
  display: table
  width: 100%
  height: 100%

body
  margin: 0px
  padding: 50px
  display: table-cell
  vertical-align: middle
  font-family: "Lucida Grande"
  font-size: 12px
  +background(linear-gradient(top left, #33799d, #e8ebb4))

ul
  margin: 0
  padding: 0
  li
    margin: 2px

#app
  display: block
  width: 482px
  height: 384px
  margin: 0 auto
  background-color: #ededed
  +box-shadow(rgba(#000, .1) 1px 1px, rgba(#000, .1) -1px -1px, rgba(#000, .1) 1px -1px, rgba(#000, .1) -1px 1px, rgba(#000, .8) 0 0 70px)
  +border-radius(5px)

#toolbar
  height: 21px
  display: block
  border-bottom: solid 1px #686868
  +background(linear-gradient(#e4e4e4, #b8b7b8))
  +box-shadow(#f1f1f1 0 1px inset)
  +border-radius(6px 6px 0 0)

#traffic-light
  display: inline
  margin-left: 4px
  float: left
  .aqua
    width: 12px
    height: 12px
    display: block
    margin: 5px 4px 4px 4px
    background: #000
    float: left
    +background-image(radial-gradient(6px 18px, rgba(#fff, .7) 2px, rgba(#fff, 0) 5px), radial-gradient(6px -1px, #fff 1px, rgba(#fff, 0) 3px))
    +box-shadow(rgba(#000, .9) 0 1px 4px inset, rgba(#fff, .5) 0 1px)
    +border-radius(100px)
    &#red
      background-color: #f24443
    &#yellow
      background-color: #f0aa5a
    &#green
      background-color: #88be72

#view
  width: 482px
  height: 340px
  *
    +float-left

#tree
  width: 80px
  height: 320px
  padding: 10px
  color: #455563
  background-color: #e6eaef
  +box-shadow(#bdbdbd -1px 0 inset)

#textfield
  width: 362px
  height: 340px
  padding: 0 10px
  color: #a7a7a7
  background-color: #222222

#statusbar
  height: 21px
  display: block
  border-top: solid 1px #686868
  +background(linear-gradient(#e4e4e4, #b8b7b8))
  +box-shadow(#f1f1f1 0 1px inset)
  +border-radius(0 0 4px 4px)
  +clearfix