Change arrow to triangle

kjbrum · Nov 19, 2014 · 574abf6 · 574abf6
1 parent 0dd8bcd
commit 574abf6
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 *.log
 node_modules
 .sass-cache
+bower_components
diff --git a/bower.json b/bower.json
@@ -1,15 +1,26 @@
 {
 	"name": "juice",
-	"description": "Mixins for Life",
+	"description": "SASS Mixins for Life",
 	"version": "0.0.1",
 	"homepage": "http://juicynex.us/juice",
-	"main": "dist/juice.scss",
-	"authors": "Kyle Brumm <kjbrum@msn.com>",
-	"dependencies": {},
-	"devDependencies": {},
+	"keywords": [
+		"CSS",
+		"SASS",
+		"SCSS",
+		"mixins",
+		"styling",
+		"helper"
+	],
+	"main": [
+		"dist/juice.scss"
+	],
+	"authors": [
+		"Kyle Brumm <https://twitter.com/kyle_brumm>"
+	],
 	"license": "MIT",
 	"ignore": [
 		"*.*",
+		"bower_components",
 		"build",
 		"img",
 		"js",

diff --git a/build/css/colors.css b/build/css/colors.css
diff --git a/build/css/fonts.css b/build/css/fonts.css
diff --git a/build/css/style.css b/build/css/style.css
diff --git a/dist/juice.scss b/dist/juice.scss
@@ -345,10 +345,10 @@ $breakpoints: (
 	}
 }
 
-// Create an arrow using borders (add in the option to make a border)
+// Create an triangle using borders (add in the option to make a border)
 // http://cssarrowplease.com/
 // ------------------------------------------------------------------
-@mixin arrow($direction: "right", $size: "0.5rem", $color: "black", $center: false, $element: "after") {
+@mixin triangle($direction: "right", $size: "0.5rem", $color: "black", $center: false, $element: "after") {
   &:#{$element} {
     position: if($center,'',absolute);
     content: '';

diff --git a/gulpfile.js b/gulpfile.js
@@ -22,7 +22,8 @@ var paths = {
 	scripts: 'js/**/*.js',
 	styles: 'sass/**/*.scss',
 	fonts: 'sass/fonts/*',
-	images: 'img/**/*.{png,jpg,jpeg,gif}'
+	images: 'img/**/*.{png,jpg,jpeg,gif}',
+	bowerDir: './bower_components'
 };
 
 var destPaths = {
@@ -46,7 +47,14 @@ var handleErrors = function() {
 gulp.task('styles', function() {
 	return gulp.src(paths.styles)
 		.pipe(plumber())
-		.pipe(sass({sourcemap: true, sourcemapPath: paths.styles}))
+		.pipe(sass({
+			sourcemap: true,
+			sourcemapPath: paths.styles,
+			loadPath: [
+				paths.bowerDir + '/bootstrap-sass-official/assets/stylesheets',
+				paths.bowerDir + '/fontawesome/scss',
+			]
+		}))
 		.pipe(autoprefixer())
 		.pipe(gulp.dest(destPaths.styles))
 		.pipe(notify('Styles task complete!'));
@@ -56,7 +64,12 @@ gulp.task('styles', function() {
 gulp.task('build-styles', function() {
 	return gulp.src(paths.styles)
 		.pipe(plumber())
-		.pipe(sass())
+		.pipe(sass({
+			loadPath: [
+				paths.bowerDir + '/bootstrap-sass-official/assets/stylesheets',
+				paths.bowerDir + '/fontawesome/scss',
+			]
+		}))
 		.pipe(autoprefixer({
 			cascade: false
 		}))

diff --git a/index.html b/index.html
@@ -9,7 +9,12 @@
 
   </head>
   <body>
-    <h1>Juice.scss: Mixins for Life</h1>
+  	<div class="container">
+  		<div class="hero row">
+		    <h1>Juice.scss<h1>
+		    <h3>Mixins for Life</h3>
+		  </div>
+	  </div>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="build/js/main.min.js"></script>

diff --git a/package.json b/package.json
@@ -1,16 +1,18 @@
 {
-  "name": "Gulp-Project-Starter-Setup",
-  "version": "1.0.0",
-  "description": "Starter setup for using Gulp in a project.",
+	"name": "juice",
+	"description": "SASS Mixins for Life",
+	"version": "0.0.1",
+	"homepage": "http://juicynex.us/juice",
   "license": "MIT",
   "author": {
     "name": "Kyle Brumm",
-    "email": "kjbrum@msn.com",
-    "url": "http://kylebrumm.com"
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com:kjbrum/Gulp-Project-Starter-Setup.git"
+    "url": "git@github.com:kjbrum/juice.git"
+  },
+  "bugs": {
+  	"url": "https://github.com/kjbrum/juice/issues"
   },
   "devDependencies": {
     "browser-sync": "^1.3.3",

diff --git a/sass/colors.scss b/sass/colors.scss
@@ -0,0 +1,8 @@
+// Custom Colors
+// --------------------------------------------------
+	$white: 				#ffffff !default;
+	$black: 				#000000 !default;
+	$dark-blue:			#222232 !default;
+	$light-blue:		lighten($dark-blue, 5%) !default;
+	$purple:				#B96CFF !default;
+	$teal:					#56D7C6 !default;
diff --git a/sass/fonts.scss b/sass/fonts.scss
@@ -0,0 +1,5 @@
+@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Raleway:300,700|Open+Sans+Condensed:300,700);
+
+$ds: "Droid Sans", Helvetica, Arial, sans-serif !default;
+$raleway: "Raleway", Helvetica, Arial, sans-serif !default;
+$open-sans: "Open Sans Condensed", Helvetica, Arial, sans-serif !default;
diff --git a/sass/style.scss b/sass/style.scss
@@ -1 +1,54 @@
-@import "dist/juice"
+// Juice
+@import "dist/juice";
+
+// Twitter Bootstrap
+@import "bootstrap";
+
+// Font Awesome
+@import "font-awesome";
+
+// Partials
+@import "colors";
+@import "fonts";
+
+// Globals
+*,
+*:before,
+*:after {
+	transition: 0.3s ease-out;
+}
+
+b, strong,
+i, em,
+span {
+	transition: 0 !important;
+	&:before,
+	&:after {
+		transition: 0 !important;
+	}
+}
+
+html,
+html a {
+  -webkit-font-smoothing: antialiased;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+}
+
+html {
+	background: $dark-blue;
+	min-width: 20rem;
+}
+
+body {
+	background: transparent;
+}
+
+a {
+	@include hoverer(color, $purple, $teal);
+}
+
+.hero {
+	text-align: center;
+	color: $teal;
+	@extend %centerer;
+}