mirror of
https://github.com/moparisthebest/android.moparisthebest.org
synced 2025-01-12 06:08:12 -05:00
broke up theming docs into partials
This commit is contained in:
Brandon Mathis
parent
8d187c562c
commit
3d065c8ebc
41
source/docs/theming/_colors.markdown
Normal file
41
source/docs/theming/_colors.markdown
Normal file
@ -0,0 +1,41 @@
|
||||
For help choosing colors check out [HSL Color Picker](http://hslpicker.com), an easy to use web based color picker.
|
||||
|
||||
# In /sass/base/
|
||||
_theme.scss # All colors are defined here
|
||||
|
||||
# In /sass/custom/ - Change these files for easy customization
|
||||
_colors.scss # Override colors in base/_theme.scss to change color schemes
|
||||
_styles.scss # Easly Override any style (last in the cascade)
|
||||
|
||||
|
||||
All of the colors for Octopress are defined as Sass variables in `/sass/base/_theme.scss`.
|
||||
To customize your color scheme edit `sass/custom/_colors.scss` and override the colors in `sass/base/_theme.scss`.
|
||||
|
||||
The official Octopress site is using the default 'classic' theme with a few minor color changes to the custom colors file. Take a look at this file and you'll see some lines of sass code that have been commented out.
|
||||
|
||||
{% codeblock Custom Colors (sass/custom/_colors.scss) https://github.com/imathis/octopress/tree/master/.themes/classic/sass/custom/_colors.scss View on Github %}
|
||||
$header-bg: #263347;
|
||||
$subtitle-color: lighten($header-bg, 58);
|
||||
$nav-bg: desaturate(lighten(#8fc17a, 18), 5);
|
||||
$sidebar-bg: desaturate(#eceff5, 8);
|
||||
$sidebar-link-color: saturate(#526f9a, 10);
|
||||
$sidebar-link-color-hover: darken(#7ab662, 9);
|
||||
{% endcodeblock %}
|
||||
|
||||
The custom colors file has some commented out colors you can The theme file is broken up into sections to make it easier to read through. Here's a look at the navigation section of `sass/base/_theme.scss`.
|
||||
|
||||
{% codeblock Navigation (sass/base/_theme.scss) https://github.com/imathis/octopress/tree/master/.themes/classic/sass/base/_theme.scss View on Github %}
|
||||
/* Navigation */
|
||||
$nav-bg: #ccc !default;
|
||||
$nav-color: darken($nav-bg, 38) !default;
|
||||
$nav-color-hover: darken($nav-color, 25) !default;
|
||||
...
|
||||
{% endcodeblock %}
|
||||
|
||||
The `!default` rule lets the variable be overridden if it is defined beforehand.
|
||||
is imported before the `_theme.scss` it can predefine these colors easily. There are comments to help out with this in the
|
||||
[source](https://github.com/imathis/octopress/tree/master/.themes/classic/sass/custom/_colors.scss).
|
||||
|
||||
Many of the colors in the theme are picked using [Sass's color functions](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html).
|
||||
As a result you can pick a new background color for the navigation by setting the `$nav-bg` variable
|
||||
and the other colors will derived for you. This isn't perfect, but it should do a decent job with most colors.
|
||||
29
source/docs/theming/_layout.markdown
Normal file
29
source/docs/theming/_layout.markdown
Normal file
@ -0,0 +1,29 @@
|
||||
# In /sass/base
|
||||
_layout.scss # Responsive layouts are defined here
|
||||
|
||||
# In /sass/custom - Change these files for easy customization
|
||||
_layout.scss # Override settings for base/_layout.scss to change the layout
|
||||
|
||||
Just like with colors, widths in `/sass/base/_layout.scss` are defined like `$max-width: 1200px !default;` and can be easily customized
|
||||
by defining them in `sass/custom/_layout.scss`. Here's a look at the layout defaults.
|
||||
|
||||
{% codeblock Layout Defaults (_layout.scss) https://github.com/imathis/octopress/tree/master/.themes/classic/sass/base/_layout.scss view on Github %}
|
||||
$max-width: 1200px !default;
|
||||
|
||||
// Padding used for layout margins
|
||||
$pad-min: 18px !default;
|
||||
$pad-narrow: 25px !default;
|
||||
$pad-medium: 35px !default;
|
||||
$pad-wide: 55px !default;
|
||||
|
||||
// Sidebar widths used in media queries
|
||||
$sidebar-width-medium: 240px !default;
|
||||
$sidebar-pad-medium: 15px !default;
|
||||
$sidebar-pad-wide: 20px !default;
|
||||
$sidebar-width-wide: 300px !default;
|
||||
|
||||
$indented-lists: false !default;
|
||||
{% endcodeblock %}
|
||||
|
||||
These variables are used to calculate the width and padding for the responsive layouts. The `$indented-lists` variable allows you to
|
||||
choose if you prefer indented or normal lists.
|
||||
1
source/docs/theming/_styles.markdown
Normal file
1
source/docs/theming/_styles.markdown
Normal file
@ -0,0 +1 @@
|
||||
If you want to add or override styles, edit `sass/custom/_styles.css`. This stylesheet is imported last, so you can override styles with the cascade.
|
||||
16
source/docs/theming/_template.markdown
Normal file
16
source/docs/theming/_template.markdown
Normal file
@ -0,0 +1,16 @@
|
||||
The key source directories are as follows:
|
||||
|
||||
source/
|
||||
_includes/ # Main layout partials
|
||||
custom/ # <- Customize head, navigation, footer, and sidebar here
|
||||
asides/ # Theme sidebar partials
|
||||
post/ # post metadata, sharing & comment partials
|
||||
_layouts/ # layouts for pages, posts & category archives
|
||||
|
||||
It's pretty likely you'll create pages and want to add them to the main navigation partial. In the latest (version 2.1) To do that
|
||||
|
||||
Beyond that, I don't expect there to be a great need to change the markup very much, since the HTML is flexible and semantic and most common
|
||||
customizations be taken care of [with configuration](/docs/configuring).
|
||||
|
||||
If you study the layouts and partials, you'll see that there's a lot of conditional markup. Logic in the view is lamentable, but a necessary
|
||||
side effect of simple static site generation.
|
||||
@ -6,83 +6,26 @@ sidebar: false
|
||||
footer: false
|
||||
---
|
||||
|
||||
I hope to eventually release more themes, but for now Octopress ships with a single theme comprised of layouts, partials, pages, javascripts, and
|
||||
Sass stylesheets located in `.themes/classic/source` and `.themes/classic/sass`.
|
||||
When you install the Octopress theme, these directories are copied into `/source` and `/sass`. You are free to make any changes you like,
|
||||
but I've set up a few patterns to make it easy to customize your site.
|
||||
For now Octopress ships with a single theme in the `.themes` directory. When you install the Octopress theme, HTML and Javascripts are copied into `/source` and Sass stylesheets are copied into `/sass`.
|
||||
You are free to make any changes you like, but I've set up a few patterns to make it easy to customize and keep your site up to date with the latest Octopress releases (see [Updating Octopress](/docs/updating)).
|
||||
|
||||
## Customizing Styles
|
||||
I've broken this up into the following sections.
|
||||
|
||||
For stylesheet customizations, check out the `/sass/custom` directory and you'll find three files.
|
||||
1. [Customizing the Template](#customizing_template)
|
||||
2. [Changing the Color Scheme](#customizing_colors)
|
||||
3. [Changing the Layout](#customizing_layout)
|
||||
4. [Overriding styles](#overriding_styles)
|
||||
|
||||
_colors.scss # Change the color scheme
|
||||
_layout.scss # Make simple changes to the layout
|
||||
_styles.scss # Easly Override any style
|
||||
<h2 id="customizing_template">Customizing the Template</h2>
|
||||
{% render_partial docs/theming/_template.markdown %}
|
||||
|
||||
### Changing the Color Scheme
|
||||
<h2 id="customizing_styles">Changing the Color Scheme</h2>
|
||||
{% render_partial docs/theming/_colors.markdown %}
|
||||
|
||||
All of the colors for Octopress are defined in `/sass/base/_theme.scss` and the variables are used throughout the other stylesheets. Here's
|
||||
a look at the navigation section of the theme.
|
||||
<h2 id="changing_layout">Changing the Layout</h2>
|
||||
{% render_partial docs/theming/_layout.markdown %}
|
||||
|
||||
{% codeblock Navigation (_theme.scss) https://github.com/imathis/octopress/tree/master/.themes/classic/sass/base/_theme.scss view on Github %}
|
||||
/* Navigation */
|
||||
$nav-bg: #ccc !default;
|
||||
$nav-color: darken($nav-bg, 38) !default;
|
||||
$nav-color-hover: darken($nav-color, 25) !default;
|
||||
...
|
||||
{% endcodeblock %}
|
||||
|
||||
The `!default` means that if the color has already been defined it will use that value instead and since `custom/_colors.scss`
|
||||
is imported before the `_theme.scss` it can predefine these colors easily. There are comments to help out with this in the
|
||||
[source](https://github.com/imathis/octopress/tree/master/.themes/classic/sass/custom/_colors.scss).
|
||||
|
||||
Many of the colors in the theme are picked using [Sass's color functions](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html).
|
||||
As a result you can pick a new background color for the navigation by setting the `$nav-bg` variable
|
||||
and the other colors will derived for you. This isn't perfect, but it should do a decent job with most colors.
|
||||
|
||||
### Changing Layout Sizes & Padding
|
||||
|
||||
Just like with colors, widths in `/sass/base/_layout.scss` are defined like `$max-width: 1200px !default;` and can be easily customized
|
||||
by defining them in `sass/custom/_layout.scss`. Here's a look at the layout defaults.
|
||||
|
||||
{% codeblock Layout Defaults (_layout.scss) https://github.com/imathis/octopress/tree/master/.themes/classic/sass/base/_layout.scss view on Github %}
|
||||
$max-width: 1200px !default;
|
||||
|
||||
// Padding used for layout margins
|
||||
$pad-min: 18px !default;
|
||||
$pad-narrow: 25px !default;
|
||||
$pad-medium: 35px !default;
|
||||
$pad-wide: 55px !default;
|
||||
|
||||
// Sidebar widths used in media queries
|
||||
$sidebar-width-medium: 240px !default;
|
||||
$sidebar-pad-medium: 15px !default;
|
||||
$sidebar-pad-wide: 20px !default;
|
||||
$sidebar-width-wide: 300px !default;
|
||||
|
||||
$indented-lists: false !default;
|
||||
{% endcodeblock %}
|
||||
|
||||
These variables are used to calculate the width and padding for the responsive layouts. The `$indented-lists` variable allows you to
|
||||
choose if you prefer indented or normal lists.
|
||||
|
||||
### Overriding Styles
|
||||
If you want to add or override styles, edit `sass/custom/_styles.css`. This stylesheet is imported last, so you can override styles with the cascade.
|
||||
|
||||
## Customizing Layouts & Partials
|
||||
The key source directories are as follows:
|
||||
|
||||
source/
|
||||
_includes/ # main layout partials
|
||||
asides/ # sidebar partials
|
||||
post/ # post metadata, sharing & comment partials
|
||||
_layouts/ # layouts for pages, posts & category archives
|
||||
|
||||
It's pretty likely you'll create pages and want to add them to the main navigation partial at `source/_includes/navigation.html`.
|
||||
Beyond that, I don't expect there to be a great need to change the markup very much, since the HTML is flexible and semantic and most common
|
||||
customizations be taken care of [with configuration](/docs/configuring).
|
||||
|
||||
If you study the layouts and partials, you'll see that there's a lot of conditional markup. Logic in the view is lamentable, but a necessary
|
||||
side effect of simple static site generation.
|
||||
<h2 id="overriding_styles">Overriding Styles</h2>
|
||||
{% render_partial docs/theming/_styles.markdown %}
|
||||
|
||||
Also see [Updating Your Blog »](/docs/updating)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user