Help and mentoring

Are you stuck with some code? Post your issues in here and someone will be along to help.

2 Likes

What’s the best way to manage and document/audit CSS as you work? I design in the browser and finding on large sites that things can start to sprawl… at fault is (maybe) my tendency to experiment and then scale back to “essentials” but also dealing with unknown and developing client content. Appreciate any tips or ideas.

Very good question.

When I design in the browser, I tend to do the design process as rough as possible, writing pretty janky CSS, because in my head, in the main design phase, I’m making prototypes. Only after this main phase, I’ll start writing production CSS in components.

In terms of documentation: I’m a big design systems advocate, so even a small component library, using something like Fractal or Storybook would be really helpful.

1 Like

Hey @hankchizljaw, I recently used both SCSS and NPM Scripts on a project for the first time and I feel like I’ve taken a big step forward in terms of having a professional workflow. I basically have a bunch of dev dependencies like node-sass etc that turn my compile my SCSS into CSS and a bunch of other stuff such as compression etc. I really want to try Goron out but I’m not 100% sure how to start using it. Would I install as a dev dependency and then slot it into my build process - after node-sass has compiled my SCSS? Thanks in advance bud

"devDependencies": {
"autoprefixer": "^9.7.6",
"concat": "^1.0.3",
"node-sass": "^4.13.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.0"

},
“scripts”: {
“watch:sass”: “node-sass sass/main.scss css/main.css -w”,
“devserver”: “live-server”,
“start”: “npm-run-all --parallel devserver watch:sass”,

"compile:sass": "node-sass sass/main.scss css/main.comp.css",
"concat:css": "concat -o css/main.concat.css css/icon-font.css css/main.css",
"prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/main.concat.css -o css/main.prefix.css",
"compress:css": "node-sass css/main.prefix.css css/main.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"

},

I’ll be honest, I wouldn’t recommend using Goron right now. It’s very much pre-alpha and severely lacking documentation and stability!

Maybe look at the way my Eleventy starter kit, Hylia uses tokens with Sass? https://github.com/hankchizljaw/hylia/blob/master/package.json#L32

Ha ha Appreciate the honesty @hankchizljaw! So it looks to me like I’d need to create a json file similar to tokens.json and include a package called json-to-scss which would turn my json into SCSS so would become the first step in my build process? Sounds do-able even for a noob like me!

1 Like

Yeh that’s essentially what Hylia does. The reason the JSON lives in _data is that allows it to be content managed.

In the Sass, I generate utility classes with the variables and maps that json-to-scss creates :+1:

1 Like

Yeah I saw that in the Theme Settings. Cool feature! Thanks @hankchizljaw!

1 Like

Hi, I’m on lesson 12 of the Learn Eleventy from Scratch course and I’m having a hard time wrapping my head around {% block content %}. It looks like sometimes this is set deliberately, like with the layouts, and sometimes this is implied, like with the posts. Does anyone have a link to where I can learn more about this? I’m not sure if it’s an Eleventy thing, or a Nunjucks thing. Is content a reserved word? (Is there a list of reserved words somewhere?). As you can imagine, googling the word “content” is not helpful. Thanks in advance!

Also, if this isn’t the right place for this question, please let me know where to move it to.

Howdy! The “content” bit is like a variable name, so you could also very comfortably have {% block helloWorld %}.

The documentation on block is pretty slim on Nunjucks, but it might be useful: https://mozilla.github.io/nunjucks/templating.html#block

In the context of the course, the content block fills the placeholder in base.html for you.

1 Like

Thank you!! So if I understand you correctly, if I replaced every instance of block content with block banana nothing would change?

I also wanted to add to my question; is content then just a variable? For example, in the following snippet, if I changed content to banana, would I then also use my banana variable inside the block like so?

{% block banana %}
  <article>
    {% include "partials/page-header.html" %}
    
    <div class="[ page-content ] [ flow wrapper ] [ flow-space-700 gap-top-700 ]">
      {{ banana | safe }}
    </div>
  </article>

  {% include "partials/cta.html" %}
{% endblock %}

Not quite. So when you have {% block content %}: content is the name of that particular block. On an Eleventy page, content is the markdown of that particular page.

If we slightly modify your example to this:

{% block banana %}
  <article>
    {% include "partials/page-header.html" %}
    
    <div class="[ page-content ] [ flow wrapper ] [ flow-space-700 gap-top-700 ]">
      {{ content | safe }}
    </div>
  </article>

  {% include "partials/cta.html" %}
{% endblock %}

That will give you a banana block which renders the content of the page.

I hope that helps!

1 Like

Thank you! I think I see where this is going. I’ll need to do some testing, but from the way you modified the above example, the variable after the word block can be anything, but when specifying where content goes inside a block, it is always {{ content }}? And if no {{ content }} is specified, whatever is between {% block something %}{% endblock %} gets replaced by the content of the template file that has specified to use the layout where we defined the something block in the first place?

Much like the example in the course with the base.html layout

{% block content %}
    <p>
        Here is some placeholder content that will render if a template doesn’t define a block.
    </p>
{% endblock %}

The blocks cascade upwards, just like I describe in that lesson. You can put whatever you like in there too. It doesn’t have to be a content instance :+1:

1 Like

I’m struggling with lesson 11 on the Learn Eleventy from Scratch course. I was able to get this to work when building the sample “Issue 33” project website, but despite my best efforts, I’m not able to get things going on my own project. I’m struggling with Eleventy pagination in general, to be honest.
I’ve set up a couple of collections in my .eleventy.js file. The blog home page works, but none of my tag pages work (for example, http://localhost:8080/tags/demo-content for the demo-content tag).
My tags.md file is set to use the same feed.html file used by the blog home page, but that page comes up blank.
I’m sure I’m missing something basic and fundamental here. It is as if Eleventy isn’t creating a collection of each tag in my blog post. I’ve also tried both JSON and YAML style tags.
Any suggestions would be greatly appreciated, Thanks!

I eventually sorted it out. /tag/ vs /tags in the URL. Once I configured the URL correctly, things work now.

2 Likes

Ah yes, it’s /tag because you are viewing a singular tag :+1:

1 Like

I got back to the Eleventy course and as I was running through and got to Chapter 5, the image of the toast, for whatever reason, isn’t showing for me. I think I need a second pair of eyes for this. This is the current .eleventy.js file now:

module.exports = config => {

  config.addPassthroughCopy('./src/images/');

  return {
    markdownTemplateEngine: 'njk',
    dataTemplateEngine: 'njk',
    htmlTemplateEngine: 'njk',
    dir: {
      input: 'src',
      output: 'dist'
    }
  };

};

I may need a nap before I tackle this again.

Hi @colabottles, your configuration file looks good. A few things to check is your file structure, make sure the images folder is indeed in the src folder. If that’s looking good, something that’s been helping me is stopping Browsersync and restarting it. If that still doesn’t work, sometimes it’s helpful to just delete the entire dist folder and get 11ty to rebuild it from scratch. I hope that helps!

2 Likes