Permalink
Browse files

add some examples

  • Loading branch information...
1 parent 63ebbbe commit 6ec46036f2a945fa5e6980778e50705676ae84db @msadouni committed Mar 19, 2013
Showing with 184 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +25 −0 config.rb
  3. +76 −0 examples/index.html
  4. +81 −0 examples/sass/screen.scss
  5. +1 −0 examples/screen.css
View
@@ -1 +1,2 @@
*.gem
+.sass-cache/
View
@@ -0,0 +1,25 @@
+# Require any additional compass plugins here.
+require './lib/compass-css-arrow'
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "examples"
+sass_dir = "examples/sass"
+images_dir = "examples/images"
+javascripts_dir = "examples/javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
View
@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+<head>
+ <title>Compass CSS Arrow Examples</title>
+ <link rel="stylesheet" href="screen.css">
+</head>
+<body>
+ <div class="content">
+ <h1>Compass CSS Arrow Examples</h1>
+ <div class="example">
+ <div class="arrow-box top">
+ <p>Top</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box right">
+ <p>Right</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box bottom">
+ <p>Bottom</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box left">
+ <p>Left</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box top-custom">
+ <p>Top at 40px</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid, 40px);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box right-custom">
+ <p>Right at 75px</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid, 75px);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box bottom-custom">
+ <p>Bottom at 75%</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid, 75%);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box left-custom">
+ <p>Left at 3em</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid, 3em);</pre>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
View
@@ -0,0 +1,81 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";
+@import "compass/css3";
+@import "compass-css-arrow";
+body {
+ font-family: monospace;
+ color: #444;
+ background: #f3f3f3;
+}
+h1 {
+ font-family: Georgia, serif;
+ font-size: 3em;
+ color: #88b7d5;
+ text-align: center;
+ margin-bottom: 1em;
+}
+.content {
+ width: 1000px;
+ margin: 0 auto;
+ padding: 3em 0;
+}
+.example {
+ margin-bottom: 1em;
+ padding: 3em;
+ border-bottom: 1px dashed #bfbfbf;
+ text-align: center;
+ &:last-child {
+ border: none;
+ }
+}
+.arrow-box {
+ width: 400px;
+ margin: 0 auto;
+ margin-bottom: 3em;
+ @include border-radius(10px);
+ p {
+ font-size: 3em;
+ padding: 1em;
+ }
+}
+.top {
+ @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);
+}
+.right {
+ @include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid);
+}
+.bottom {
+ @include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid);
+}
+.left {
+ @include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid);
+}
+.top-custom {
+ @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid, 40px);
+}
+.right-custom {
+ @include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid, 75px);
+}
+.bottom-custom {
+ @include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid, 75%);
+}
+.left-custom {
+ @include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid, 3em);
+}
+.code {
+ width: 700px;
+ margin: 0 auto;
+ background: #e3e3e3;
+ padding: 1em;
+ @include border-radius;
+ border: 1px solid #bfbfbf;
+}
+pre {
+ margin: 0;
+ padding: 0;
+ font-size: 1.25em;
+}
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 6ec4603

Please sign in to comment.