adobe · njx · Dec 12, 2011 · Dec 9, 2011 · Dec 9, 2011 · Dec 9, 2011
diff --git a/src/index.html b/src/index.html
@@ -9,34 +9,67 @@
 
 	<!-- TODO: switch between runtime LESS compilation in dev mode and precompiled version -->
 	<link rel="stylesheet/less" href="styles/bootstrap.less">
-	<link rel="stylesheet/less" href="styles/brackets.less">
 	<script src="thirdparty/less-1.1.5.min.js"></script>
 
 	<script src="thirdparty/CodeMirror2/lib/codemirror.js"></script>
 	<link rel="stylesheet" href="thirdparty/CodeMirror2/lib/codemirror.css">
 	<script src="thirdparty/CodeMirror2/mode/javascript/javascript.js"></script>
 
 	<script src="thirdparty/jquery-1.7.min.js"></script>
+	<script src="widgets/bootstrap-dropdown.js"></script>
+
 	<script src="brackets.js"></script>
 </head>
 <body>
-	<!-- TODO: Write Brackets. -->
-
 	<!-- TODO: LESS won't work directly from Chrome when run locally (unless you launch it with -allow-file-access-from-files)
 	     due to annoying security restrictions. This will work in the shell app, or in other browsers like Safari. -->
 
-	<div class="container">
-		<div class="row">
-			<div class="span6 offset5">
-				<div class="alert-message info">
-					<p>Brackets is going to be awesome!</p>
+	<!-- Top bar for menus -->
+	<div class="topbar" data-dropdown="dropdown">
+      <div class="topbar-inner">
+          <a class="brand" href="#">Brackets</a>
+          <ul class="nav">
+            <li class="dropdown">
+				<a href="#" class="dropdown-toggle">File</a>
+				<ul class="dropdown-menu">
+					<li><a href="#">New</a></li>
+					<li><a href="#">Open</a></li>
+					<li><a href="#">Save</a></li>
+					<li><a href="#">Quit</a></li>
+				</ul>
+			</li>
+          </ul>
+      </div>
+    </div>
+
+	<!-- Main UI -->
+	<div class="main-view">
+		<div class="sidebar">
+			<div id="projects" class="panel">
+				<div id="project-toolbar" class="toolbar">
+					<select class="picker"></select> 
 				</div>
+				<ul id="project-files" class="file-list">
+					<li><a href="#">my-app.css</a></li>
+					<li><a href="#">my-app.js</a></li>
+					<li><a href="#" class="selected">awesome.js</a></li>
+				</ul>
 			</div>
 		</div>
-		<div class="row">
-			<div class="span6 offset5">
-				<div id="editor"></div>
-			</div>
+		<div class="content">
+			<div id="main-toolbar" class="toolbar">
+				<div class="buttons">
+	<!--		
+					<input class="resume" type="button" value="Pause"/>
+					<input class="resume" type="button" value="Resume"/>
+					<input class="new" type="button" value="New"/>
+					<input class="save" type="button" value="Save"/>
+					<input class="settings" type="button" value="Settings"/>
+	-->
+				</div>
+				<div class="title">awesome.js</div>
+			</div>			
+			<div id="editor"></div>
 		</div>
 	</div>
 </body>

diff --git a/src/styles/bootstrap.less b/src/styles/bootstrap.less
@@ -23,4 +23,7 @@
 @import "type.less";
 @import "forms.less";
 @import "tables.less";
-@import "patterns.less";
+@import "patterns.less";
+
+// Brackets-specific styles
+@import "brackets.less";
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
@@ -1,12 +1,168 @@
-/* Add Brackets-specific LESS/CSS styles here */
+/* Useful mixins */
+
+.box {
+	display: -webkit-box;
+	display: -moz-box;
+	display: box;	
+}
+.hbox {
+	.box;
+	-webkit-box-orient: horizontal;
+	-moz-box-orient: horizontal;
+	box-orient: horizontal;
+}
+.vbox {
+	.box;
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+	box-orient: vertical;
+}
+.box-flex(@ratio) {
+	-webkit-box-flex: @ratio;
+	-moz-box-flex: @ratio;
+	box-flex: @ratio;
+}
+.box-pack(@pack) {
+	-webkit-box-pack: @pack;
+	-moz-box-pack: @pack;
+	box-pack: @pack;
+}
+.box-align(@align) {
+	-webkit-box-align: @align;
+	-moz-box-align: @align;
+	box-align: @align;
+}
+
+.sane-box-model {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Variables */
+
+/* All paddings, gutters, etc. should be multiples of this */
+@base-padding: 10px;
+
+/* General styles for Brackets elements */
+
+.panel {
+	.vbox;
+	.box-flex(1);
+
+	padding: 0;
+	margin: 0;
+	background: #d8e0e8;
+	border-right: 1px solid #aaa;
+}
+
+.toolbar {
+	.hbox;
+	.box-align(center);
+
+	height: 23px;
+	padding: @base-padding;
+  	border-bottom: 1px solid #aaa;
+	#gradient > .vertical(#eee, #ccc);
+	.box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.3));
+}
+
+/* Overall layout */
+
+html, body {
+	height: 100%;
+	overflow: auto;
+}
 
 body {
-	padding-top: 200px;
+	.vbox;
+
+	.topbar {
+		position: static;
+	}
+}
+
+.topbar-inner {
+	/* We don't want to use the default .container in here, so we need to .clearfix the children. */
+	.clearfix;
+
+	.brand {
+		.sane-box-model;
+		margin-left: 0;
+		width: 200px;
+		padding-left: @base-padding;
+		padding-right: @base-padding;
+	}
+}
+
+.main-view {
+	.hbox;
+	.box-flex(1);
+
+	.sidebar {
+		.vbox;
+		width: 200px;
+	}
+
+	.content {
+		.vbox;
+		.box-flex(1);
+	}
+}
+
+#main-toolbar {
+	/* make sure the shadow goes above other items */
+	z-index: 1;
+	.title {
+		font-size: 1.2em;
+		font-weight: bold;
+		text-shadow: 0 1px #fff;		
+	}
+	.buttons {
+		float: right;		
+	}
 }
 
 #editor {
-	margin: 0 auto;
-	width: 100%;
-	height: 300px;
-	border: 1px solid #999;
+	.vbox;
+	.box-flex(1);
+
+	.CodeMirror {
+		.vbox;
+		.box-flex(1);
+	}
+	.CodeMirror-scroll {
+		.box;
+		.box-flex(1);
+	}
+	.CodeMirror-lines {
+		padding: @base-padding;
+	}
+}
+
+/* Project panel */
+
+#projects .toolbar {
+	.picker {
+		.box;
+		.box-flex(1);
+	}
+}
+
+.file-list {
+	.box-flex(1);
+	margin: 0;
+  	padding: 0;
+	list-style: none;
+
+	a {
+	  	display: block;
+	  	padding: @base-padding/2 @base-padding @base-padding/2 @base-padding;
+	  	color: #000;
+	  	text-decoration: none;
+		&.selected {
+			color: #fff;
+			#gradient > .vertical(#5fa3e0, #0065be);		
+		}
+	}
 }