Skip to content

Development Workflow

Jump to bottom
Jacob Frank edited this page Jul 31, 2017 · 2 revisions

Workflow using component based scss, Nunjucks and gulp setup

Nunjucks

  • Best intro resource
  • Here's the tutorial I used to help setup nunjucks for this project and is worth a read if you'd like to understand how everything works.
  • There's many things you can do with nunjucks and here's another good resource to learn what's possible.
  • All nunjucks files have the file extension of either .nunjucks or .njk

SCSS

  • scss is pretty simple and i've found the best tutorial to be on code academy

Creating new components

  • Note: If you'd like to view the component you're working on, create a nunjucks file within the pages directory with your first name as the title of it source/pages/yourName.njk. This is easy to do right now by just copying the file I've created called source/pages/jacob.njk and pasting it with a different name.

For each new component...

Create a new git branch, if you don't know the git commands read through this guide

  1. Create a new partial nunjucks file within the components folder (source/pages/components/partial.njk) and name it whatever component you're creating. For this example I called mine example.njk
  2. Include this one in whatever page you're working off of, I did mine in the jacob.njk page with the line {% include "partials/example.njk" %}. To include any new nunjucks partial you're making simply include it via {% include "partials/NAMEOFPARTIAL.njk" %} inside the content block within the page file you're creating ex:
{% block content %}
    {% import 'macros/nav-macro.njk' as nav %}
    <!-- Creating the navigation with activePage = 'contact' -->
    {{nav.active('about')}}
    {% include "partials/example.njk" %}
{% endblock %}
  1. Inside your njk partial you can write html exactly how you would regularly, there's even ways using nunjucks to automate things. If you haven't read this resource yet, do so.
  2. As for linking up your scss simply create a new .scss file in the source/styles/components folder. Name the scss file whatever you've been assigned in a descriptive, short, and concise way and then add it to main.scss via an import call, ex:
// Vendor
@import 'node_modules/normalize-scss/sass/normalize/import-now';

// Functions, Mixins
@import "lib/include-media";
@import "lib/fluid-type";

// Globals, Vars
@import 'global/variables';
@import 'global/fonts';
@import 'global/breakpoints';
@import 'global/typography';

// Components
@import 'components/buttons';
@import 'components/nav-bar';
NEW SCSS COMPONENT HERE

// Utility Classes
@import 'utilities/layout';
@import 'utilities/typography';
  1. Now you're ready to start developing! If there's anymore scss you feel you should add that's a variable, mixin, etc add it to it's appropriate folder and link it up. The build system should take care of everything. And if you have any questions ask me(jacob)
Clone this wiki locally