Mercurial > piecrust2
changeset 282:ca018e761414
docs: More tutorial text.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Sun, 01 Mar 2015 21:41:21 -0800 |
parents | 0641fe5c3ef9 |
children | e71ed81d497b |
files | docs/docs/01_tutorial/02_making-things-pretty.md docs/docs/01_tutorial/03_adding-colours.md |
diffstat | 2 files changed, 109 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/docs/docs/01_tutorial/02_making-things-pretty.md Sun Mar 01 21:41:05 2015 -0800 +++ b/docs/docs/01_tutorial/02_making-things-pretty.md Sun Mar 01 21:41:21 2015 -0800 @@ -139,8 +139,10 @@ you'll also probably refer a lot to the [Jinja templating documentation][jinja] for your template logic, unless you end up using [another template engine][tpl]. -In the [third and last part of this tutorial][part3], we'll look at PieCrust's -built-in asset pipeline, by writing some CSS code. +## Next steps + +In the [third part of this tutorial][part3], we'll look at PieCrust's built-in +asset pipeline, by writing some CSS code. [part1]: {{docurl('tutorial/your-first-blog')}}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/docs/01_tutorial/03_adding-colours.md Sun Mar 01 21:41:21 2015 -0800 @@ -0,0 +1,105 @@ +--- +title: "Part 3: Adding Colours" +--- + +In the first two parts of this [tutorial][tut], we created a simple blog website +and added some content. In the third part, we'll take a look at PieCrust's +[built-in asset pipeline][pip]. + + +## Stylesheets with Less + +Edit the `templates/default.html` layout and delete the whole part between +`{%raw%}{% if site.css %}{%endraw%}` and `{%raw%}{% endif %}{%endraw%}`. Replace +it with: + + <link rel="stylesheet" type="text/css" href="{{ site.root }}myblog.css"/> + +Now create the file `assets/myblog.less`. Leave it empty for now. + +> __*Important*__: If you still had the `chef serve` command running since the +> beginning of the tutorial, restart it now by pressing `CTRL+C` and running it +> again. This is because we want it to monitor the new `assets/` folder you just +> created. + +Refresh you browser, and you should see your blog revert to your browser's +default styles. You should also see, in the `chef serve` command output in your +terminal, an entry that shows that it processed `myblog.less`. + +Now start writing some Less CSS code in the empty file (you can learn more about +the Less CSS syntax on the [official website][less]): + + @color-primary: #FF481C; + @color-secondary1: #083D78; + @color-secondary2: #CBF66E; + @color-secondary2-dark: #74AC00; + + body { + font-family: sans-serif; + color: @color-primary; + background: darken(@color-secondary1, 20%); + } + + a { + color: @color-secondary2; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + &:visited { + color: @color-secondary2-dark; + } + } + + #container { + width: 640px; + margin: 0 auto; + } + +When you save, you should see that PieCrust picks it up right away and compiles +the Less file into a CSS file that your browser can fetch. + +Refresh your browser, and you should see the same blog with a completely +different look. You can go back to the Less file and work some more on it -- by +the time you've swtiched back to your browser and pressed `F5`, the Less +compiler should have already finished. + + +## More assets + +You can start making more assets for your website -- logos, background pictures, +Javascript animations, etc. All those files will, if put in the `assets/` +directory, be processed by PieCrust and ready to be previewed or baked. + +For more information about the available asset processors in PieCrust, you can +checkout the documentation about the [asset pipeline][pip] and the [asset +processors reference][procs]. + +### Using PieCrust with other tools + +Because PieCrust, at this point, only cares about the `assets/`, `templates/`, +`pages/` and `posts/` directories, you can create any other directories in your +website's root to put whatever you need. + +For example, it's common these days to use a package manager like [npm][] or +[Bower][] to download libraries and utilities to use with a given website. Those +will create directories of their own, like `node_modules/` and +`bower_components`, along with root files like `package.json` and `bower.json`. +That's all fine! + + +## Next steps + +In the fourth part of this tutorial, we'll look at how we can [publish this +magnificent blog][part4]. + + +[tut]: {{docurl('tutorial')}} +[pip]: {{docurl('asset-pipeline')}} +[procs]: {{docurl('reference/asset-processors')}} +[part4]: {{docurl('tutorial/making-it-public')}} +[less]: http://lesscss.org/ +[npm]: https://www.npmjs.com/ +[bower]: http://bower.io/ +