Typography
Categories:
[Grav],
[Markdown]
Tags:
[Grav - Gantry 5],
[Grav - Плагины]
Details on the full capabilities of Spectre.css can be found in the Official Spectre Documentation



Headings
H1 Heading 40px
H2 Heading 32px
H3 Heading 28px
H4 Heading 24px
H5 Heading 20px
H6 Heading 16px
# H1 Heading
# H1 Heading `40px`</small>`
<span class="h1">H1 Heading</span>
Paragraphs
Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
Markdown Semantic Text Elements
Bold **Bold**
Italic _Italic_
Deleted ~~Deleted~~
Inline Code
`Inline Code`
HTML Semantic Text Elements
I18N <abbr>
Citation <cite>
Ctrl + S <kbd>
TextSuperscripted <sup>
TextSubscripted <sub>
Underlined <u>
Highlighted <mark>
<time>
x = y + 2 <var>
Blockquote
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
- Bill Gates
> The advance of technology is based on making it fit in so that you don't really even notice it,
> so it's part of everyday life.
>
> <cite>- Bill Gates</cite>
Unordered List
- list item 1
- list item 2
- list item 2.1
- list item 2.2
- list item 2.3
- list item 3
* list item 1
* list item 2
* list item 2.1
* list item 2.2
* list item 2.3
* list item 3
Ordered List
- list item 1
- list item 2
- list item 2.1
- list item 2.2
- list item 2.3
- list item 3
1. list item 1
1. list item 2
1. list item 2.1
1. list item 2.2
1. list item 2.3
1. list item 3
Table
Name | Genre | Release date |
---|---|---|
The Shawshank Redemption | Crime, Drama | 14 October 1994 |
The Godfather | Crime, Drama | 24 March 1972 |
Schindler's List | Biography, Drama, History | 4 February 1994 |
Se7en | Crime, Drama, Mystery | 22 September 1995 |
| Name | Genre | Release date |
| :-------------------------- | :---------------------------: | -------------------: |
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |
Notices
The notices styles are actually provided by the markdown-notices
plugin but are useful enough to include here:
This is a warning notification
This is a error notification
This is a default notification
This is a success notification
! This is a warning notification
!! This is a error notification
!!! This is a default notification
!!!! This is a success notification
Find out all about Grav
- Download plugins, themes, as well as other Grav skeleton packages.
- Check out to find out the latest goings on in the Grav-verse.
If you want a more full-featured base install, you should check out Skeleton packages available in the downloads.
Edit this Page
To edit this page, simply navigate to the folder you installed Grav into, and then browse to the user/pages/01.home
folder and open the default.md
file in your.
Create a New Page
Creating a new page is a simple affair in Grav. Simply follow these simple steps:
- Navigate to your pages folder:
user/pages/
and create a new folder. In this example, we and call the folder03.mypage
. -
Launch your text editor and paste in the following sample code:
--- title: My New Page --- # My New Page! This is the body of **my new page** and I can easily use _Markdown_ syntax here.
- Save this file in the
user/pages/03.mypage/
folder asdefault.md
. This will tell Grav to render the page using the default template. - That is it! Reload your browser to see your new page in the menu.
NOTE777: The page will automatically show up in the Menu after the "Typography" menu item. If you wish to change the name that shows up in the Menu, simple add: menu: My Page
between the dashes in the page content. This is called the YAML front matter, and it is where you configure page-specific options.
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
And this will produce a flow chart:
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D