test/node_modules/gitbook-plugin-theme-gestalt/_book/index.html

264 lines
9.6 KiB
HTML
Raw Normal View History

2018-12-13 14:35:46 +01:00
<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Introduction · GitBook</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<link rel="stylesheet" href="gitbook/style.css">
<link rel="stylesheet" href="gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="gitbook/gitbook-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="book">
<div class="book-summary">
<div class="book-logo">
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter
active selected "
data-level="1.1"
data-path="./">
<a href="./">
Introduction
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="." >Introduction</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<section class="normal markdown-section">
<h1 id="gestalt-theme-for-gitbook">Gestalt Theme for Gitbook</h1>
<p>Gestalt is a theme for <a href="http://www.gitbook.com" target="_blank">Gitbook</a>. While its layout is based off of the <a href="https://github.com/GitbookIO/theme-default" target="_blank">default Gitbook theme</a>, it aims to be highly configurable for styling. This is achieved by porting the default theme styles to SASS and turning most things that were CSS rules into variables.</p>
<p>This theme is for you if the default theme is well enough, but you need more control in how it looks.</p>
<p><img src="screenshot-1.jpg" alt="Screenshot"></p>
<h2 id="usage">Usage</h2>
<p>This theme works with Gitbook version <code>&gt;= 3.0.0</code>. To include it in your project, edit your <code>book.json</code> to include the theme as a plugin.</p>
<pre><code>&quot;plugins&quot;: [ &quot;theme-gestalt&quot; ]
</code></pre><p>A recommended usage would be the following:</p>
<pre><code>&quot;plugins&quot;: [ &quot;theme-gestalt&quot;, &quot;-theme-default&quot;, &quot;styles-sass-fix&quot; ]
</code></pre><p>This configuration adds the Gestalt theme, removes the default theme, and includes the <code>styles-sass-fix</code> plugin to allow you to write your own SCSS to extend the styling. See <a href="#style-customization">Style Customization</a> for more info.</p>
<h2 id="config-options">Config Options</h2>
<p>Below are the theme options available for Gestalt. </p>
<pre><code>&quot;pluginsConfig&quot;: {
&quot;theme-gestalt&quot;: {
&quot;logo&quot;: &quot;/assets/logo.png&quot;, // path to the logo file to use in the sidebar
&quot;favicon&quot;: &quot;/assets/favicon.png&quot;, // path to your favicon
&quot;baseUrl&quot;: null, // sets the base url in the HTML head
&quot;excludeDefaultStyles&quot;: true, // excludes the pre-compiled theme css in favor of your custom css
&quot;doNotHideChildrenChapters&quot; : false // in summary, disables hiding of child chapters for inactive chapter
}
}
</code></pre><h2 id="style-customization">Style Customization</h2>
<p>Customizing the style of Gestalt is possible by creating a SCSS file in your project that includes Gestalt&apos;s SCSS but overwrites its variables. But first, we&apos;ll need to do some setup.</p>
<h3 id="setup">Setup</h3>
<p>To customize the style of Gestalt, you must first do the following:</p>
<h4 id="exclude-the-default-theme-css">Exclude the Default Theme CSS</h4>
<p>By default, Gitbook themes inject a CSS file into your project. However, we want to include <em>your</em> customized CSS file into the project instead. To achieve this, edit your <code>book.json</code> file to include the following: </p>
<pre><code>&quot;pluginsConfig&quot;: {
&quot;theme-gestalt&quot;: {
&quot;excludeDefaultStyles&quot;: true
}
}
</code></pre><h4 id="include-the-styles-sass-plugin">Include the Styles-Sass plugin</h4>
<p>In order to compile your custom SCSS, you&apos;ll need to include the <a href="https://github.com/Nasicus/plugin-styles-sass" target="_blank">styles-sass-fix</a> plugin:</p>
<pre><code>&quot;plugins&quot;: [ &quot;theme-gestalt&quot;, &quot;-theme-default&quot;, &quot;styles-sass-fix&quot; ]
</code></pre><h3 id="customizing">Customizing</h3>
<p>Now that you&apos;re all setup, you&apos;ll need to include your custom SCSS file in your project. Edit your <code>book.json</code> to include your custom SCSS file:</p>
<pre><code>&quot;styles&quot;: {
&quot;website&quot;: &quot;./styles/website.scss&quot;
}
</code></pre><p>Now we get to the actual customization. In your custom SCSS file, overwrite the variables you need to achieve your look. Higher level variables can be found in <a href="src/scss/_variables.scss">_variables.scss</a>, while more specific variables can found in the tops of the files in <a href="src/scss/website">./src/scss/website</a>.</p>
<p>Here&apos;s an example custom SCSS file:</p>
<pre><code class="lang-SASS">@import &quot;../node_modules/gitbook-plugin-theme-gestalt/src/scss/variables&quot;;
// Put your variable overrides here
$book-background: black;
$page-background: black;
$sidebar-background: black;
$color-border: $color-gray-dark;
$color-primary: blue;
$color-text: red;
$heading-map : (
color: $color-primary,
border-bottom: 1px solid $color-primary,
font-family: $font-family-sans
);
@import &quot;../node_modules/gitbook-plugin-theme-gestalt/src/scss/all&quot;;
</code></pre>
<p>The above would then produce the following:</p>
<p><img src="screenshot-2.jpg" alt="Screenshot"></p>
</section>
</div>
</div>
</div>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Introduction","level":"1.1","depth":1,"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"README.md","mtime":"2017-12-22T18:22:12.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-03-19T15:56:42.939Z"},"basePath":".","book":{"language":""}});
});
</script>
</div>
<script src="gitbook/gitbook.js"></script>
<script src="gitbook/theme.js"></script>
<script src="gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="gitbook/gitbook-plugin-search/search.js"></script>
<script src="gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="gitbook/gitbook-plugin-sharing/buttons.js"></script>
<script src="gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>