diff --git a/src/language/attributes.md b/src/language/attributes.md index a143e38..a915da3 100644 --- a/src/language/attributes.md +++ b/src/language/attributes.md @@ -169,7 +169,7 @@ a(class=classes) | | //- the class attribute may also be repeated to merge arrays -a.bang(class=classes class=['bing']) +a(class=classes class=['bing']) ``` It can also be an object which maps class names to `true` or `false` values. This is useful for applying conditional classes @@ -187,15 +187,25 @@ a(class={active: currentUrl === '/about'} href='/about') About Classes may be defined using a `.classname` syntax: ```pug-preview -a.button +a.button.important ``` Since `div`'s are such a common choice of tag, it is the default if you omit the tag name: ```pug-preview -.content +.content.admin ``` +## Class Literal and Attributes used together +These can be pulled together in a massive, highly readable, element defining Class Chain of Doom. + +```pug-preview +- var classes = ['foo', 'bar', 'baz'] +- var currentUrl = '/about' +a.bang.bong(class=classes class=['bing'] class={active: currentUrl === '/about'} href='/about') About +``` + + ## ID Literal IDs may be defined using a `#idname` syntax: diff --git a/src/language/conditionals.md b/src/language/conditionals.md index f6141b4..8b66b8f 100644 --- a/src/language/conditionals.md +++ b/src/language/conditionals.md @@ -10,21 +10,30 @@ Pug's first-class conditional syntax allows for optional parentheses. If you’re coming from Pug v1, you may now omit the leading `-`. Otherwise, it's identical (just regular JavaScript): +You can use strict or loose equality (triple and double equals), as well as any valid expression for a JavaScript `if` statement + ```pug-preview -- var user = { description: 'foo bar baz' } -- var authorised = false +- + var user = { + 37: { name: "Finn", description: "The Human", authorised: true }, + 38: { name: "Marceline", description: "The Vampire Queen", authorised: false } + } + var id = 38 #user - if user.description + if user[id].description h2.green Description - p.description= user.description - else if authorised + p.description= user[id].description + if user[id].name === "Finn" + h1.yellow Name + p.name= user[id].name + else if user[id].authorised h2.blue Description p.description. User has no description, why not add one... else h2.red Description - p.description User has no description + p.description User is not Finn. ``` Pug also provides the conditional `unless`, which works like a negated `if`. The following are equivalent: @@ -32,8 +41,8 @@ Pug also provides the conditional `unless`, which works like a negated `if`. Th ```pug-preview-readonly \\\\\\\\\\ a.pug < unless user.isAnonymous - p You're logged in as #{user.name} + p You're logged in as #{user[id].name} \\\\\\\\\\ b.pug > if !user.isAnonymous - p You're logged in as #{user.name} + p You're logged in as #{user[id].name} ``` diff --git a/src/language/plain-text.md b/src/language/plain-text.md index c6d1d10..9f5fbe3 100644 --- a/src/language/plain-text.md +++ b/src/language/plain-text.md @@ -12,12 +12,22 @@ Plain text does still use tag and string [interpolation](interpolation.html), bu One common pitfall here is managing whitespace in the rendered HTML. We'll talk about that at the end of this page. +## Free text + +Simple free text can be added to the page, without a tag, by using a pipe. Note: Free text like this has various caveats regarding styling, etc. + +```pug-preview +div + | This is plain old free text. +``` + + ## Inline in a Tag -The easiest way to add plain text is *inline*. The first term on the line is the tag itself. Everything after the tag and one space will be the text contents of that tag. This is most useful when the plain text content is short (or if you don't mind lines running long). +The easiest way to add plain text is *inline*. The first term on the line is the tag itself. Add the tag, then one space, and then the text contents of that tag. This is most useful when the plain text content is short (or if you don't mind lines running long). ```pug-preview -p This is plain old text content. +p This is paragraph text content. ``` ## Literal HTML