feature/stylesheet :: A basic css stylesheet, with font and table styling, without the need for bootstrap.

tyrauber · tyrauber · commit 102f4b397aa2 · 2014-08-11T09:50:01.000-07:00
The stylesheet resides at lib/rspec_api_documentation/assets/stylesheets/rspec_api_documentation/styles.css, but may be overridden by creating a stylesheet in the app directory, app/assets/stylesheets/rspec_api_documentation/styles.css.  This allows users to override the default styles if so desired.

The styles are read from the stylesheet and embedded in the HTML, allowing the individual example html pages to be styled without the need for an external resource.
diff --git a/lib/rspec_api_documentation/assets/stylesheets/rspec_api_documentation/styles.css b/lib/rspec_api_documentation/assets/stylesheets/rspec_api_documentation/styles.css
@@ -0,0 +1,102 @@
+
+body {
+  font-family: Helvetica,Arial,sans-serif;
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 18px;
+  color: #404040;
+}
+
+.container {
+  width: 940px;
+  margin-left: auto;
+  margin-right: auto;
+  zoom: 1;
+}
+
+pre {
+  background-color: #f5f5f5;
+  display: block;
+  padding: 8.5px;
+  margin: 0 0 18px;
+  line-height: 18px;
+  font-size: 12px;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+td.required .name:after {
+  float: right;
+  content: "required";
+  font-weight: normal;
+  color: #F08080;
+}
+
+a{
+  color: #0069d6;
+  text-decoration: none;
+  line-height: inherit;
+  font-weight: inherit;
+}
+
+p {
+  padding: 15px;
+  font-size: 130%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+  color: #404040;
+}
+
+h1 {
+  margin-bottom: 18px;
+  font-size: 30px;
+  line-height: 36px;
+}
+h2 {
+  font-size: 24px;
+  line-height: 36px;
+}
+h3{
+  font-size: 18px;
+  line-height: 36px;
+}
+h4 {
+  font-size: 16px;
+  line-height: 36px;
+}
+
+table{
+  width: 100%;
+  margin-bottom: 18px;
+  padding: 0;
+  border-collapse: separate;
+  font-size: 13px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border-spacing: 0;
+  border: 1px solid #ddd;
+}
+
+table th {
+  padding-top: 9px;
+  font-weight: bold;
+  vertical-align: middle;
+  border-bottom: 1px solid #ddd;
+}
+table th+th, table td+td {
+  border-left: 1px solid #ddd;
+}
+table th, table td {
+  padding: 10px 10px 9px;
+  line-height: 18px;
+  text-align: left;
+}
diff --git a/lib/rspec_api_documentation/views/html_example.rb b/lib/rspec_api_documentation/views/html_example.rb
@@ -11,6 +11,12 @@ def initialize(example, configuration)
       def extension
         EXTENSION
       end
+
+      def styles
+        app_styles_url = File.join(Dir.pwd, "app", "assets", "stylesheets","rspec_api_documentation", "styles.css")
+        gem_styles_url = File.join(File.dirname(__FILE__), "..", "assets", "stylesheets","rspec_api_documentation", "styles.css")
+        return File.read(app_styles_url) rescue File.read(gem_styles_url)
+      end
     end
   end
 end
diff --git a/lib/rspec_api_documentation/views/html_index.rb b/lib/rspec_api_documentation/views/html_index.rb
@@ -6,6 +6,12 @@ def initialize(index, configuration)
         self.template_name = "rspec_api_documentation/html_index"
       end
 
+      def styles
+        app_styles_url = File.join(Dir.pwd, "app", "assets", "stylesheets","rspec_api_documentation", "styles.css")
+        gem_styles_url = File.join(File.dirname(__FILE__), "..", "assets", "stylesheets","rspec_api_documentation", "styles.css")
+        return File.read(app_styles_url) rescue File.read(gem_styles_url)
+      end
+
       def examples
         @index.examples.map { |example| HtmlExample.new(example, @configuration) }
       end
diff --git a/templates/rspec_api_documentation/html_example.mustache b/templates/rspec_api_documentation/html_example.mustache
@@ -4,27 +4,7 @@
     <title>{{resource_name}} API</title>
     <meta charset="utf-8">
     <style>
-      td.required .name:after {
-        float: right;
-        content: "required";
-        font-weight: normal;
-        color: #F08080;
-      }
-
-      p {
-        padding: 15px;
-        font-size: 130%;
-      }
-
-      pre {
-        white-space: pre-wrap;
-      }
-
-      body {
-        margin-left: auto;
-        margin-right: auto;
-        width: 900px;
-      }
+      {{ styles }}
     </style>
   </head>
   <body>
diff --git a/templates/rspec_api_documentation/html_index.mustache b/templates/rspec_api_documentation/html_index.mustache
@@ -3,13 +3,8 @@
 <head>
   <title>{{ api_name }}</title>
   <meta charset="utf-8">
-
   <style>
-    body {
-      margin-left: auto;
-      margin-right: auto;
-      width: 900px;
-    }
+    {{ styles }}
   </style>
 </head>
 <body>
