summaryrefslogtreecommitdiff
path: root/source/_posts/customizing-your-site.md
diff options
context:
space:
mode:
Diffstat (limited to 'source/_posts/customizing-your-site.md')
-rw-r--r--source/_posts/customizing-your-site.md73
1 files changed, 73 insertions, 0 deletions
diff --git a/source/_posts/customizing-your-site.md b/source/_posts/customizing-your-site.md
new file mode 100644
index 0000000..894db6c
--- /dev/null
+++ b/source/_posts/customizing-your-site.md
@@ -0,0 +1,73 @@
+---
+extends: _layouts.post
+section: content
+title: Customizing Your Site
+date: 2018-12-24
+description: Customize your site with CSS and JS
+categories: [configuration]
+featured: true
+excerpt: This starter template comes pre-loaded with Tailwind CSS, a utility CSS framework that allows you to customize and build complex designs without touching a line of CSS.
+---
+
+This starter template comes pre-loaded with [Tailwind CSS](https://tailwindcss.com), a utility CSS framework that allows you to customize and build complex designs without touching a line of CSS. There are also a few base Sass files in the `/source/_assets/sass` folder, set up with the expectation that you can add any custom CSS into `_blog.scss`.
+
+> You can also re-work the architecture of the Sass files any way you’d like; just make sure to keep the `@tailwind` references in your final `main.scss` file.
+
+```scss
+// source/_assets/sass/main.scss
+
+@tailwind preflight;
+@tailwind components;
+
+// Code syntax highlighting,
+// https://highlightjs.org
+@import '~highlightjs/styles/default';
+
+@import 'base';
+@import 'navigation';
+@import 'mailchimp';
+@import 'blog';
+
+@tailwind utilities;
+```
+
+---
+
+## Typography Styles
+
+Here’s a quick preview of what some of the basic type styles will look like in this starter template:
+
+# h1 Heading
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+The quick brown fox jumps over the lazy dog
+
+<s>The quick brown fox jumps over the lazy dog</s>
+
+<u>The quick brown fox jumps over the lazy dog</u>
+
+_The quick brown fox jumps over the lazy dog_
+
+**The quick brown fox jumps over the lazy dog**
+
+`The quick brown fox jumps over the lazy dog`
+
+<small>The quick brown fox jumps over the lazy dog</small>
+
+> The quick brown fox jumps over the lazy dog
+
+[The quick brown fox jumps over the lazy dog](#)
+
+```php
+class Foo extends bar
+{
+ public function fooBar()
+ {
+ //
+ }
+}
+```