Initial Check-in

Includes styles for the base browser, Firefox, Chrome, and Internet Explorer
SamKirkland · Aug 21, 2015 · 915379d · 915379d
commit 915379d
Show file tree

Hide file tree

Showing 7 changed files with 1,133 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,17 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Custom for Visual Studio
+*.cs     diff=csharp
+
+# Standard to msysgit
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Sam Kirkland ([email protected])
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,96 @@
+# CSS Web Browsers
+
+	[Demo](http://samkirkland.com/labs/CSS-Web-Browsers)
+
+## Description:
+
+	Web Browsers based entirely on CSS without images.
+
+	Custom browser styles for Firefox, Safari (coming soon), Edge (coming soon), Chrome, and Internet Explorer.
+
+## Source:
+
+	Version: v0.01
+	Released: 2015-08-21
+
+	Hosted at GitHub; browse at:
+		https://github.com/SamKirkland/CSS-Web-Browsers
+
+## Usage:
+
+	1. Copy the contents of css/ to the css asset directory in your project.
+		--* (optionally) use scss and compile it after changing variables to meet your needs.
+
+	2. Include the required CSS into your document:
+	```html
+		<link rel="stylesheet" type="text/css" href="css/normalize.min.css" />
+		<link rel="stylesheet" type="text/css" href="css/cssWebBrowsers.min.css" />
+	```
+
+	3. Add the HTML to your document.
+		<div class="miniBrowser">
+			<div class="miniBrowserHeader">
+				<ul>
+					<li class="close"></li>
+					<li class="minimize"></li>
+					<li class="expand"></li>
+					<li class="tab activeTab firstTab">Tab 1</li>
+					<li class="tab">Tab 2</li>
+					<li class="newTab">+</li>
+				</ul>
+
+				<div class="miniBrowserToolBar">
+					<div class="miniBrowserBack"></div>
+					<div class="miniBrowserForward"></div>
+
+					<div class="refresh"></div>
+					<div class="home"></div>
+
+					<div class="miniBrowserURL https">
+						<div></div><input type="text" spellcheck="false" value="https://samkirkland.com/">
+					</div>
+
+					<div class="menu"></div>
+				</div>
+			</div>
+			<div class="miniBrowserContent">
+				Place Content Here
+			</div>
+		</div>
+
+	4. Customize the HTML or add a browser specific class to the root <div class="miniBrowser"> element:
+		--* .firefox
+		--* .safari (coming soon)
+		--* .edge (coming soon)
+		--* .chrome
+		--* .ie
+
+	5. (Optional) Add Javascript to autodetect the users current browser and style the default browser to match their current web browser:
+	```javascript
+		/* This wont work all the time, but its good enough */
+		var browser = "";
+		var userAgent = navigator.userAgent.toLowerCase();
+
+		// is internet explorer
+		if (userAgent.indexOf('msie') > -1 || userAgent.indexOf('nt') > -1) { browser = "ie"; }
+
+		// is firefox
+		else if (userAgent.indexOf('firefox') > -1) { browser = "firefox"; }
+
+		// is chrome
+		else if (userAgent.indexOf('chrome') > -1) { browser = "chrome"; }
+
+		// is safari
+		else if (userAgent.indexOf('safari') > -1) { browser = "safari"; }
+
+		// waits for the DOM to finish loading
+		document.addEventListener("DOMContentLoaded", function(event) {
+			// adds the current browser class to the first occurance of .miniBrowser 
+			document.getElementsByClassName("miniBrowser")[0].className = "miniBrowser " + browser;
+		});
+	```
+
+## License:
+
+	Copyright 2015 Sam Kirkland ([email protected])
+	Released under The MIT License.
diff --git a/browsers.html b/browsers.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>CSS Web Browsers</title>
+		<link rel="stylesheet" type="text/css" href="css/normalize.min.css" />
+		<link rel="stylesheet" type="text/css" href="css/cssWebBrowsers.min.css" />
+		<script>
+			/* This wont work all the time, but its good enough */
+			var browser = "";
+			var userAgent = navigator.userAgent.toLowerCase();
+
+			// is internet explorer
+			if (userAgent.indexOf('msie') > -1 || userAgent.indexOf('nt') > -1) { browser = "ie"; }
+
+			// is firefox
+			else if (userAgent.indexOf('firefox') > -1) { browser = "firefox"; }
+
+			// is chrome
+			else if (userAgent.indexOf('chrome') > -1) { browser = "chrome"; }
+
+			// is safari
+			else if (userAgent.indexOf('safari') > -1) { browser = "safari"; }
+
+			// waits for the DOM to finish loading
+			document.addEventListener("DOMContentLoaded", function(event) {
+				// adds the current browser class to the first occurance of .miniBrowser 
+				document.getElementsByClassName("miniBrowser")[0].className = "miniBrowser " + browser;
+			});
+		</script>
+	</head>
+	<body style="background: #D6645C;min-width: 550px;">
+		<style type="text/css">
+			/* Demo specific styles */
+			.miniBrowser {
+				width: 95%;
+				margin: 25px auto 0 auto;
+			}
+		</style>
+
+
+		<div class="miniBrowser">
+			<div class="miniBrowserHeader">
+				<ul>
+					<li class="close"></li>
+					<li class="minimize"></li>
+					<li class="expand"></li>
+					<li class="tab activeTab firstTab">Tab 1</li>
+					<li class="tab">Tab 2</li>
+					<li class="newTab">+</li>
+				</ul>
+
+				<div class="miniBrowserToolBar">
+					<div class="miniBrowserBack"></div>
+					<div class="miniBrowserForward"></div>
+
+					<div class="refresh"></div>
+					<div class="home"></div>
+
+					<div class="miniBrowserURL https">
+						<div></div><input type="text" spellcheck="false" value="https://samkirkland.com/">
+					</div>
+
+					<div class="menu"></div>
+				</div>
+			</div>
+			<div class="miniBrowserContent">
+				.miniBrowser
+			</div>
+		</div>
+
+		<div class="miniBrowser ie">
+			<div class="miniBrowserHeader">
+				<div class="miniBrowserToolBar">
+					<div class="miniBrowserBack"></div>
+					<div class="miniBrowserForward"></div>
+
+
+					<div class="miniBrowserURL https">
+						<div></div><input type="text" spellcheck="false" value="https://samkirkland.com/">
+					</div>
+					<div class="refresh"></div>
+
+					<ul>
+						<li class="tab activeTab firstTab">Tab 1</li>
+						<li class="tab">Tab 2</li>
+						<li class="newTab">+</li>
+					</ul>
+
+					<div class="home"></div>
+					<div class="menu"></div>
+				</div>
+			</div>
+			<div class="miniBrowserContent">
+				.miniBrowser.ie
+			</div>
+		</div>
+
+
+		<div class="miniBrowser firefox">
+			<div class="miniBrowserHeader">
+				<ul>
+					<li class="close"></li>
+					<li class="minimize"></li>
+					<li class="expand"></li>
+					<li class="tab firstTab">Tab 1</li>
+					<li class="tab activeTab">Tab 2</li>
+					<li class="newTab">+</li>
+				</ul>
+
+				<div class="miniBrowserToolBar">
+					<div class="miniBrowserBack"></div>
+					<div class="miniBrowserForward"></div>
+
+					<div class="miniBrowserURL https">
+						<div></div><input type="text" spellcheck="false" value="https://samkirkland.com/">
+					</div>
+
+					<div class="miniBrowserSearch">
+						<input type="text" spellcheck="false" value=""><div></div>
+					</div>
+
+					<div class="menu"></div>
+				</div>
+			</div>
+			<div class="miniBrowserContent">
+				.miniBrowser.firefoxMini
+			</div>
+		</div>
+
+		<div class="miniBrowser chrome">
+			<div class="miniBrowserHeader">
+				<ul>
+					<li class="close"></li>
+					<li class="minimize"></li>
+					<li class="expand"></li>
+					<li class="tab firstTab">Tab 1</li>
+					<li class="tab activeTab">Tab 2</li>
+					<li class="newTab">+</li>
+				</ul>
+
+				<div class="miniBrowserToolBar">
+					<div class="miniBrowserBack"></div>
+					<div class="miniBrowserForward"></div>
+
+					<div class="refresh"></div>
+					<div class="home"></div>
+
+					<div class="miniBrowserURL http">
+						<div></div><input type="text" spellcheck="false" value="http://samkirkland.com/">
+					</div>
+
+					<div class="menu"></div>
+				</div>
+			</div>
+			<div class="miniBrowserContent">
+				.miniBrowser.chromeMini
+			</div>
+		</div>
+	</body>
+</html>