(Eleventy-base-blog readme below)
Embeds a responsive, lazyloading YouTube video. The width and height should be reduced fractions (i.e. aspect ratio). Currently any combination of aspect ratio values will still create a 16x9 video; if needed, this can be updated in the future.
{% ytEmbed 'id', width, height, 'title', 'optional css classes'}
{% ytEmbed 'ZHKVYSwl67M', 16, 9, 'About Scramble the Duck', 'card' %}
_data/metadata.json
is used throughout the site.
- To run a development server:
npm run dev
- To compile SASS:
npm run sass
- To build:
npm run build
- this site is deployed to Netlify
This project uses BEM syntax, modified by ABEM.
The grid structure and accessibility properties are heavily based on Bootstrap, but are configured differently to work with ABEM.
Font-sizes are often adjusted with RFS.
atoms (small, simple components)
global (styles that either apply globally or not to a specific component)
mixins
variables
layout (see below)
layouts (layout-specific design files)
molecules (larger components)
organisms (the largest components)
utils (styles that function in the background, such as resets, see below)
The grid uses the ABEM syntax. Columns are created using .col
, and are assigned widths using -w[value]
for wide and -n[value]
for narrow.
For columns that will be equally sized, use "auto" for the value.
Example:
<div class="col -w6">This is six out of twelve units wide on a wide breakpoint</div>
<div class="col -n6">This is six out of twelve units on both breakpoints</div>
<div class="col -auto">This is an automatic width</div>
_normalize.scss
is from normalize.css.
_reset.scss
contains some other minor reset styles.
.-sr
is for screen reader-only content, and .-skip-link
is for skip links and will become visible when focused.
A starter repository showing how to build a blog with the Eleventy static site generator.
- Netlify
- Get your own Eleventy web site on Netlify—seriously, just click OK a few times and it’s live—Netlify is amazing.
- GitHub Pages
git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
cd my-blog-name
Specifically have a look at .eleventy.js
to see if you want to configure any Eleventy options differently.
npm install
npx eleventy
Or build and host locally for local development
npx eleventy --serve
Or build automatically when a template changes:
npx eleventy --watch
Or in debug mode:
DEBUG=* npx eleventy
about/index.md
shows how to add a content page.posts/
has the blog posts but really they can live in any directory. They need only thepost
tag to be added to this collection.- Add the
nav
tag to add a template to the top level site navigation. For example, this is in use onindex.njk
andabout/index.md
. - Content can be any template format (blog posts needn’t be markdown, for example). Configure your supported templates in
.eleventy.js
->templateFormats
.- Because
css
andpng
are listed intemplateFormats
but are not supported template types, any files with these extensions will be copied without modification to the output (while keeping the same directory structure).
- Because
- The blog post feed template is in
feed/feed.njk
. This is also a good example of using a global data files in that it uses_data/metadata.json
. - This example uses three layouts:
_includes/layouts/base.njk
: the top level HTML structure_includes/layouts/home.njk
: the home page template (wrapped intobase.njk
)_includes/layouts/post.njk
: the blog post template (wrapped intobase.njk
)
_includes/postlist.njk
is a Nunjucks include and is a reusable component used to display a list of all the posts.index.njk
has an example of how to use it.