264 lines
9.6 KiB
HTML
264 lines
9.6 KiB
HTML
|
|
||
|
|
<!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>>= 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>"plugins": [ "theme-gestalt" ]
|
||
|
|
</code></pre><p>A recommended usage would be the following:</p>
|
||
|
|
<pre><code>"plugins": [ "theme-gestalt", "-theme-default", "styles-sass-fix" ]
|
||
|
|
</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>"pluginsConfig": {
|
||
|
|
"theme-gestalt": {
|
||
|
|
"logo": "/assets/logo.png", // path to the logo file to use in the sidebar
|
||
|
|
"favicon": "/assets/favicon.png", // path to your favicon
|
||
|
|
"baseUrl": null, // sets the base url in the HTML head
|
||
|
|
"excludeDefaultStyles": true, // excludes the pre-compiled theme css in favor of your custom css
|
||
|
|
"doNotHideChildrenChapters" : 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's SCSS but overwrites its variables. But first, we'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>"pluginsConfig": {
|
||
|
|
"theme-gestalt": {
|
||
|
|
"excludeDefaultStyles": 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'll need to include the <a href="https://github.com/Nasicus/plugin-styles-sass" target="_blank">styles-sass-fix</a> plugin:</p>
|
||
|
|
<pre><code>"plugins": [ "theme-gestalt", "-theme-default", "styles-sass-fix" ]
|
||
|
|
</code></pre><h3 id="customizing">Customizing</h3>
|
||
|
|
<p>Now that you're all setup, you'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>"styles": {
|
||
|
|
"website": "./styles/website.scss"
|
||
|
|
}
|
||
|
|
</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's an example custom SCSS file:</p>
|
||
|
|
<pre><code class="lang-SASS">@import "../node_modules/gitbook-plugin-theme-gestalt/src/scss/variables";
|
||
|
|
|
||
|
|
// 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 "../node_modules/gitbook-plugin-theme-gestalt/src/scss/all";
|
||
|
|
</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>
|
||
|
|
|