Mercurial > piecrust2
changeset 571:76f0118276d7
docs: Remove LessCSS dependencies in the tutorial, fix typos.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Sat, 31 Oct 2015 08:59:53 -0700 |
parents | 7dabfdd056a1 |
children | 442cf576ae25 b1c4c9e0c65f |
files | docs/docs/01_tutorial/03_adding-colours.md |
diffstat | 1 files changed, 27 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
--- a/docs/docs/01_tutorial/03_adding-colours.md Sat Oct 31 00:03:32 2015 -0700 +++ b/docs/docs/01_tutorial/03_adding-colours.md Sat Oct 31 08:59:53 2015 -0700 @@ -3,11 +3,11 @@ --- 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 +and added some content. In the third part, we'll take a look at PieCrust's [built-in asset pipeline][pip]. -## Stylesheets with Less +## Stylesheets Edit the `templates/default.html` layout and delete the whole part between `{%raw%}{% if site.css %}{%endraw%}` and `{%raw%}{% endif %}{%endraw%}`. Replace @@ -19,41 +19,35 @@ {% endraw %} ``` -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. +Now create the file `assets/myblog.css`. Leave it empty for now. If you're not +running `chef serve` anymore, run it again. 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`. +terminal, an entry that shows that it processed `myblog.css`: -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]): +``` +[ 26.1 ms] processed 1 assets. +``` + +Now start writing some CSS code in the empty file: ```css -@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%); + color: #FF481C; + background: #063B76; } a { - color: @color-secondary2; + color: #083D78; text-decoration: none; &:hover { text-decoration: underline; } &:visited { - color: @color-secondary2-dark; + color: #74AC00; } } @@ -63,13 +57,17 @@ } ``` -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. +When you save, you should see that PieCrust picks it up right away and copies it +to a place that your browser can fetch it from. In this case, only copying is +needed because it's a simple CSS file, but if it was a [LessCSS][] or +[Sass][] file, it would run the appropriate compiler. The same applies for +any other type of file for which PieCrust has a "processor" defined. Otherwise, +it just copies the file. 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. +different look. You can go back to the CSS file and work some more on it -- by +the time you've swtiched back to your browser and pressed `F5`, PieCrust has +typically finished processing the updated file. ## More assets @@ -92,7 +90,8 @@ [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! +That's all fine! PieCrust won't do anything about all those directories unless +you ask it to. ## Next steps @@ -105,7 +104,8 @@ [pip]: {{docurl('asset-pipeline')}} [procs]: {{docurl('reference/asset-processors')}} [part4]: {{docurl('tutorial/making-it-public')}} -[less]: http://lesscss.org/ +[lesscss]: http://lesscss.org/ +[sass]: http://sass-lang.com/ [npm]: https://www.npmjs.com/ [bower]: http://bower.io/