\n \n \n \n \n
\n ```\n */\n\n a [class^=\"icon-\"],\n a [class*=\" icon-\"] {\n text-decoration: none;\n }\n\n [class^=\"icon-\"],\n [class*=\" icon-\"] {\n &.glyph-1x { font-size: 1em; }\n &.glyph-1_5x { font-size: 1.5em; }\n &.glyph-2x { font-size: 2em; }\n &.glyph-3x { font-size: 3em; }\n }\n\n /* SG\n ```html_example\n\n \n
\n ```\n **/\n\n .glyph-red {\n color: $moh-red;\n }\n\n\n**This will be rendered as:**\n\n\n\n* `cd` to the web project (any folder containing css/scss/less files. The tool will search nested folders).\n* run `md_documentation` to generate style guide.\n* wait a few seconds and a `styleguide.html` is generated in `styleguide/` (this is configurable, see _Configuration_).\n\n### Syntax\nBest described by going through the example above line by line.\n\n##### Line 1 (Demarcation)\n\n```css\n /* SG\n```\n\n`/*` is just an ordinary css comment. The `SG` means that this is a _style guide_ comment. Only comments beginning with `/* SG` will be included in the style guide, all other comments are ignored. This demarcation is configurable.\n\n\n##### Line 2 (Heading)\n\n```\n # Glyphs/Style\n```\n\nEvery style guide comment must have a heading. `# ` is the Markdown syntax for a heading (equivalent to h1). The name of this category will be _Glyphs_ (which will be shown in the menu). The article will be _Style_ (which will be shown in the menu when it's expanded). The heading (the part before the slash) is required, the slash and the article name are optional.\n\n\n##### Line 4 (Comment)\n\n```\n You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:\n```\n\nThe comment will be shown in the style guide. Describe your css rules! Feel free to use [Markdown syntax](https://help.github.com/articles/markdown-basics/). The comment is optional but be nice to your developers!\n\n\n##### Line 6-11 (Code example)\n\n ```html_example\n\n \n \n \n \n
\n\n \n
\n ```\n\nThis is where you write some HTML code to describe how to use your css rules. The HTML will be a) Rendered and used as an example, and b) Output with syntax highlighting. The HTML part is optional but most of the time you'll use it. Notice that the code is fenced in triple back ticks (and given a language marker of `html_example`) as per Markdown syntax.\n\n\n##### Line 12 (Comment close)\n\n```\n */\n```\n\nClosing the css comment.\n\n\n##### Line 13-24\n\n```\n a [class^=\"icon-\"],\n a [class*=\" icon-\"] {\n text-decoration: none;\n }\n ...\n```\n\nOrdinary css! You could stop here and understand all you need to, but let's continue.\n\n##### Line 24+\n\n /* SG\n ```html_example\n\n \n
\n ```\n */\n\n ...\n\nAdditional comments about the previous article. This allows you to break your comments up whenever and they will always become a part of the previous comment (and added to the same article).\n\n### Markdown files\n\nSometimes it makes more sense to have some of your documentation in a markdown file. In order to get around the limitations of using `/* */` inside markdown, it is necessary to instead use `