Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Abstract out the data into yaml, use the same includes to render it. #12

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Abstract out the data into yaml, use the same includes to render it. #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fb5c081
Format html
BBB Nov 25, 2016
4f0b5a0
Move properties data out of html
BBB Nov 25, 2016
62b529f
Remove explicit single page templates
BBB Nov 25, 2016
a94e4ff
Dynamically generate the single pages, use the same include for the d…
BBB Nov 25, 2016
e52f209
Add plugin
BBB Nov 25, 2016
b49827f
Generate the menu from the data too
BBB Nov 25, 2016
88cb585
Tidy the data a little more
BBB Nov 25, 2016
8d99cba
Correct page title
BBB Nov 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions _config.local.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,8 @@ url: http://localhost:4000
markdown: kramdown
permalink: pretty
exclude: ['node_modules']
page_gen:
- data: properties
template: single
name: title
dir: property
5 changes: 5 additions & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,8 @@ url: http://cssreference.io
markdown: kramdown
permalink: pretty
exclude: ['node_modules']
page_gen:
- data: properties
template: single
name: title
dir: property
5,391 changes: 5,391 additions & 0 deletions _data/properties.yml
View file
Open in desktop

Large diffs are not rendered by default.

14,111 changes: 3 additions & 14,108 deletions _includes/lists/main-list.html
View file
Open in desktop

Large diffs are not rendered by default.

131 changes: 3 additions & 128 deletions _includes/lists/menu-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1,3 @@
<li><a href="{{site.url}}/#align-content" data-property-name="align-content">align-content</a></li>
<li><a href="{{site.url}}/#align-items" data-property-name="align-items">align-items</a></li>
<li><a href="{{site.url}}/#align-self" data-property-name="align-self">align-self</a></li>
<li><a href="{{site.url}}/#animation-delay" data-property-name="animation-delay">animation-delay</a></li>
<li><a href="{{site.url}}/#animation-direction" data-property-name="animation-direction">animation-direction</a></li>
<li><a href="{{site.url}}/#animation-duration" data-property-name="animation-duration">animation-duration</a></li>
<li><a href="{{site.url}}/#animation-fill-mode" data-property-name="animation-fill-mode">animation-fill-mode</a></li>
<li><a href="{{site.url}}/#animation-iteration-count" data-property-name="animation-iteration-count">animation-iteration-count</a></li>
<li><a href="{{site.url}}/#animation-name" data-property-name="animation-name">animation-name</a></li>
<li><a href="{{site.url}}/#animation-play-state" data-property-name="animation-play-state">animation-play-state</a></li>
<li><a href="{{site.url}}/#animation-timing-function" data-property-name="animation-timing-function">animation-timing-function</a></li>
<li><a href="{{site.url}}/#animation" data-property-name="animation">animation</a></li>
<li><a href="{{site.url}}/#background-attachment" data-property-name="background-attachment">background-attachment</a></li>
<li><a href="{{site.url}}/#background-clip" data-property-name="background-clip">background-clip</a></li>
<li><a href="{{site.url}}/#background-color" data-property-name="background-color">background-color</a></li>
<li><a href="{{site.url}}/#background-image" data-property-name="background-image">background-image</a></li>
<li><a href="{{site.url}}/#background-origin" data-property-name="background-origin">background-origin</a></li>
<li><a href="{{site.url}}/#background-position" data-property-name="background-position">background-position</a></li>
<li><a href="{{site.url}}/#background-repeat" data-property-name="background-repeat">background-repeat</a></li>
<li><a href="{{site.url}}/#background-size" data-property-name="background-size">background-size</a></li>
<li><a href="{{site.url}}/#background" data-property-name="background">background</a></li>
<li><a href="{{site.url}}/#border-bottom-color" data-property-name="border-bottom-color">border-bottom-color</a></li>
<li><a href="{{site.url}}/#border-bottom-left-radius" data-property-name="border-bottom-left-radius">border-bottom-left-radius</a></li>
<li><a href="{{site.url}}/#border-bottom-right-radius" data-property-name="border-bottom-right-radius">border-bottom-right-radius</a></li>
<li><a href="{{site.url}}/#border-bottom-style" data-property-name="border-bottom-style">border-bottom-style</a></li>
<li><a href="{{site.url}}/#border-bottom-width" data-property-name="border-bottom-width">border-bottom-width</a></li>
<li><a href="{{site.url}}/#border-bottom" data-property-name="border-bottom">border-bottom</a></li>
<li><a href="{{site.url}}/#border-collapse" data-property-name="border-collapse">border-collapse</a></li>
<li><a href="{{site.url}}/#border-color" data-property-name="border-color">border-color</a></li>
<li><a href="{{site.url}}/#border-left-color" data-property-name="border-left-color">border-left-color</a></li>
<li><a href="{{site.url}}/#border-left-style" data-property-name="border-left-style">border-left-style</a></li>
<li><a href="{{site.url}}/#border-left-width" data-property-name="border-left-width">border-left-width</a></li>
<li><a href="{{site.url}}/#border-left" data-property-name="border-left">border-left</a></li>
<li><a href="{{site.url}}/#border-radius" data-property-name="border-radius">border-radius</a></li>
<li><a href="{{site.url}}/#border-right-color" data-property-name="border-right-color">border-right-color</a></li>
<li><a href="{{site.url}}/#border-right-style" data-property-name="border-right-style">border-right-style</a></li>
<li><a href="{{site.url}}/#border-right-width" data-property-name="border-right-width">border-right-width</a></li>
<li><a href="{{site.url}}/#border-right" data-property-name="border-right">border-right</a></li>
<li><a href="{{site.url}}/#border-style" data-property-name="border-style">border-style</a></li>
<li><a href="{{site.url}}/#border-top-color" data-property-name="border-top-color">border-top-color</a></li>
<li><a href="{{site.url}}/#border-top-left-radius" data-property-name="border-top-left-radius">border-top-left-radius</a></li>
<li><a href="{{site.url}}/#border-top-right-radius" data-property-name="border-top-right-radius">border-top-right-radius</a></li>
<li><a href="{{site.url}}/#border-top-style" data-property-name="border-top-style">border-top-style</a></li>
<li><a href="{{site.url}}/#border-top-width" data-property-name="border-top-width">border-top-width</a></li>
<li><a href="{{site.url}}/#border-top" data-property-name="border-top">border-top</a></li>
<li><a href="{{site.url}}/#border-width" data-property-name="border-width">border-width</a></li>
<li><a href="{{site.url}}/#border" data-property-name="border">border</a></li>
<li><a href="{{site.url}}/#bottom" data-property-name="bottom">bottom</a></li>
<li><a href="{{site.url}}/#box-shadow" data-property-name="box-shadow">box-shadow</a></li>
<li><a href="{{site.url}}/#box-sizing" data-property-name="box-sizing">box-sizing</a></li>
<li><a href="{{site.url}}/#clear" data-property-name="clear">clear</a></li>
<li><a href="{{site.url}}/#color" data-property-name="color">color</a></li>
<li><a href="{{site.url}}/#column-count" data-property-name="column-count">column-count</a></li>
<li><a href="{{site.url}}/#column-gap" data-property-name="column-gap">column-gap</a></li>
<li><a href="{{site.url}}/#column-width" data-property-name="column-width">column-width</a></li>
<li><a href="{{site.url}}/#content" data-property-name="content">content</a></li>
<li><a href="{{site.url}}/#cursor" data-property-name="cursor">cursor</a></li>
<li><a href="{{site.url}}/#display" data-property-name="display">display</a></li>
<li><a href="{{site.url}}/#flex-basis" data-property-name="flex-basis">flex-basis</a></li>
<li><a href="{{site.url}}/#flex-direction" data-property-name="flex-direction">flex-direction</a></li>
<li><a href="{{site.url}}/#flex-flow" data-property-name="flex-flow">flex-flow</a></li>
<li><a href="{{site.url}}/#flex-grow" data-property-name="flex-grow">flex-grow</a></li>
<li><a href="{{site.url}}/#flex-shrink" data-property-name="flex-shrink">flex-shrink</a></li>
<li><a href="{{site.url}}/#flex-wrap" data-property-name="flex-wrap">flex-wrap</a></li>
<li><a href="{{site.url}}/#float" data-property-name="float">float</a></li>
<li><a href="{{site.url}}/#font-family" data-property-name="font-family">font-family</a></li>
<li><a href="{{site.url}}/#font-size" data-property-name="font-size">font-size</a></li>
<li><a href="{{site.url}}/#font-style" data-property-name="font-style">font-style</a></li>
<li><a href="{{site.url}}/#font-variant" data-property-name="font-variant">font-variant</a></li>
<li><a href="{{site.url}}/#font-weight" data-property-name="font-weight">font-weight</a></li>
<li><a href="{{site.url}}/#font" data-property-name="font">font</a></li>
<li><a href="{{site.url}}/#height" data-property-name="height">height</a></li>
<li><a href="{{site.url}}/#justify-content" data-property-name="justify-content">justify-content</a></li>
<li><a href="{{site.url}}/#left" data-property-name="left">left</a></li>
<li><a href="{{site.url}}/#letter-spacing" data-property-name="letter-spacing">letter-spacing</a></li>
<li><a href="{{site.url}}/#line-height" data-property-name="line-height">line-height</a></li>
<li><a href="{{site.url}}/#list-style-image" data-property-name="list-style-image">list-style-image</a></li>
<li><a href="{{site.url}}/#list-style-position" data-property-name="list-style-position">list-style-position</a></li>
<li><a href="{{site.url}}/#list-style-type" data-property-name="list-style-type">list-style-type</a></li>
<li><a href="{{site.url}}/#list-style" data-property-name="list-style">list-style</a></li>
<li><a href="{{site.url}}/#margin-bottom" data-property-name="margin-bottom">margin-bottom</a></li>
<li><a href="{{site.url}}/#margin-left" data-property-name="margin-left">margin-left</a></li>
<li><a href="{{site.url}}/#margin-right" data-property-name="margin-right">margin-right</a></li>
<li><a href="{{site.url}}/#margin-top" data-property-name="margin-top">margin-top</a></li>
<li><a href="{{site.url}}/#margin" data-property-name="margin">margin</a></li>
<li><a href="{{site.url}}/#max-height" data-property-name="max-height">max-height</a></li>
<li><a href="{{site.url}}/#max-width" data-property-name="max-width">max-width</a></li>
<li><a href="{{site.url}}/#min-height" data-property-name="min-height">min-height</a></li>
<li><a href="{{site.url}}/#min-width" data-property-name="min-width">min-width</a></li>
<li><a href="{{site.url}}/#mix-blend-mode" data-property-name="mix-blend-mode">mix-blend-mode</a></li>
<li><a href="{{site.url}}/#opacity" data-property-name="opacity">opacity</a></li>
<li><a href="{{site.url}}/#order" data-property-name="order">order</a></li>
<li><a href="{{site.url}}/#outline-color" data-property-name="outline-color">outline-color</a></li>
<li><a href="{{site.url}}/#outline-style" data-property-name="outline-style">outline-style</a></li>
<li><a href="{{site.url}}/#outline-width" data-property-name="outline-width">outline-width</a></li>
<li><a href="{{site.url}}/#outline" data-property-name="outline">outline</a></li>
<li><a href="{{site.url}}/#overflow-wrap" data-property-name="overflow-wrap">overflow-wrap</a></li>
<li><a href="{{site.url}}/#overflow-x" data-property-name="overflow-x">overflow-x</a></li>
<li><a href="{{site.url}}/#overflow-y" data-property-name="overflow-y">overflow-y</a></li>
<li><a href="{{site.url}}/#overflow" data-property-name="overflow">overflow</a></li>
<li><a href="{{site.url}}/#padding-bottom" data-property-name="padding-bottom">padding-bottom</a></li>
<li><a href="{{site.url}}/#padding-left" data-property-name="padding-left">padding-left</a></li>
<li><a href="{{site.url}}/#padding-right" data-property-name="padding-right">padding-right</a></li>
<li><a href="{{site.url}}/#padding-top" data-property-name="padding-top">padding-top</a></li>
<li><a href="{{site.url}}/#padding" data-property-name="padding">padding</a></li>
<li><a href="{{site.url}}/#pointer-events" data-property-name="pointer-events">pointer-events</a></li>
<li><a href="{{site.url}}/#position" data-property-name="position">position</a></li>
<li><a href="{{site.url}}/#resize" data-property-name="resize">resize</a></li>
<li><a href="{{site.url}}/#text-align" data-property-name="text-align">text-align</a></li>
<li><a href="{{site.url}}/#text-decoration" data-property-name="text-decoration">text-decoration</a></li>
<li><a href="{{site.url}}/#text-indent" data-property-name="text-indent">text-indent</a></li>
<li><a href="{{site.url}}/#text-overflow" data-property-name="text-overflow">text-overflow</a></li>
<li><a href="{{site.url}}/#text-shadow" data-property-name="text-shadow">text-shadow</a></li>
<li><a href="{{site.url}}/#text-transform" data-property-name="text-transform">text-transform</a></li>
<li><a href="{{site.url}}/#top" data-property-name="top">top</a></li>
<li><a href="{{site.url}}/#transform-origin" data-property-name="transform-origin">transform-origin</a></li>
<li><a href="{{site.url}}/#transform" data-property-name="transform">transform</a></li>
<li><a href="{{site.url}}/#transition-delay" data-property-name="transition-delay">transition-delay</a></li>
<li><a href="{{site.url}}/#transition-duration" data-property-name="transition-duration">transition-duration</a></li>
<li><a href="{{site.url}}/#transition-property" data-property-name="transition-property">transition-property</a></li>
<li><a href="{{site.url}}/#transition-timing-function" data-property-name="transition-timing-function">transition-timing-function</a></li>
<li><a href="{{site.url}}/#transition" data-property-name="transition">transition</a></li>
<li><a href="{{site.url}}/#white-space" data-property-name="white-space">white-space</a></li>
<li><a href="{{site.url}}/#width" data-property-name="width">width</a></li>
<li><a href="{{site.url}}/#will-change" data-property-name="will-change">will-change</a></li>
<li><a href="{{site.url}}/#word-break" data-property-name="word-break">word-break</a></li>
<li><a href="{{site.url}}/#word-spacing" data-property-name="word-spacing">word-spacing</a></li>
<li><a href="{{site.url}}/#z-index" data-property-name="z-index">z-index</a></li>
{% for property in site.data.properties %}
<li><a href="{{site.url}}/#{{property.title}}" data-property-name="{{property.title}}">{{property.title}}</a></li>
{% endfor %}
47 changes: 47 additions & 0 deletions _includes/property.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<section id="{{property.title}}" class="property{% if property.is_shorthand %} is-shorthand{% endif %}">
<header class="property-header">
<nav class="property-links">
<a class="property-links-direct" href="{{site.url}}/property/{{property.title}}/" data-property-name="{{property.title}}" data-tooltip="Single page for this property" target="_blank">Link</a>
<a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="{{property.title}}">Share</a>
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/{{property.title}}" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
</nav>
<h2 class="property-name">
<a href="{{site.url}}/#{{property.title}}"><span>#</span>{{property.title}}</a>
</h2>
<div class="property-description">
{{property.description}}
</div>
<div class="property-animation">
{% for action in property.actions %}
{{action}}
{% endfor %}
</div>
</header>
<style type="text/css">
{% for style in property.styles %}
{{style}}
{% endfor %}
</style>
{% for example in property.examples %}
<section class="example">
<header class="example-header">
<p class="example-name">
{% if example.is_default %}<code class="example-default" data-tooltip="This is the property's default value">default</code>{% endif %}

<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="{{example.title}}">{{example.title}}</code>
</p>
<div class="example-description">
{{example.description}}
</div>
</header>

<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i>
</div>
<div class="example-output">
{{example.output}}
</div>
</aside>
</section>
{% endfor %}
</section>
15 changes: 8 additions & 7 deletions _layouts/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,37 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>{{page.property_name}} - {{site.title}}</title>
<title>{{page.title}} - {{site.title}}</title>
<link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css">

<meta property="og:url" content="{{site.url}}{{page.url}}">
<meta property="og:type" content="website">
<meta property="og:title" content="{{page.property_name}} - {{site.title}}">
<meta property="og:title" content="{{page.title}} - {{site.title}}">
<meta property="og:image" content="{{site.url}}/images/css-reference-share.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Learn how {{page.property_name}} works in CSS.">
<meta property="og:description" content="Learn how {{page.title}} works in CSS.">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@jgthms">
<meta name="twitter:creator" content="@jgthms">
<meta name="twitter:title" content="{{page.property_name}} - {{site.title}}">
<meta name="twitter:title" content="{{page.title}} - {{site.title}}">
<meta name="twitter:image" content="{{site.url}}/images/css-reference-share.png">
<meta name="twitter:description" content="Learn how {{page.property_name}} works in CSS.">
<meta name="twitter:description" content="Learn how {{page.title}} works in CSS.">

{% include favicons.html %}
</head>
<body>
{% include menu.html %}
<main class="main">
<a class="back" href="{{site.url}}/#{{page.property_name}}">
<a class="back" href="{{site.url}}/#{{page.title}}">
<i class="icon is-back"></i>
<strong>View in context</strong>
</a>
<section class="single">
{{content}}
{% assign property = page %}
{% include property.html %}
</section>
</main>
{% include modals/share.html %}
Expand Down
Loading