@moreonion/foundist

Foundist

Foundation based default theme for Impact Stack landing pages.

Use

As assets

Compiled assets can be used directly.

As module

Foundist may also be used as module dependency for other themes.

If you need any Foundation utilities in your custom settings file (imported before Foundist) import them via @moreonion/foundation-base/scss/util; and set $base-font-size as well as $global-font-size: $base-font-size * 6.25%; before using any util functions (otherwise some calculations might not return the desired result)!

Development

The setup should give you a quite modern JS/SCSS-environment:

• Vite (with SCSS, browserlist, PostCSS)
• Linting (stylelint, eslint)
• Prettifying (prettify)
• Pre-commit hooks for .scss and .js files

The entrypoints are at:

• src/scss/main.scss and
• src/js/main.js

To run a development server and watch changes:

yarn dev

Other development commands:

yarn lint
yarn fix

To build the output files:

yarn build

To serve the contents of the dist/ folder (e.g. after a build)

yarn preview

HTML

The module provides some example HTML to make styling easier:

• The files in the template folder represent the general page layout(s) that may be different for each derived theme.
• The extension of template {% blocks %} make up the content for an individual page.
• The include folder offers predefined elements that would be generated by a CMS, e.g. form elements and social proof widgets.
• The path of the main css and js file can be configured in _globals.html (relative to the html folder).

Pre-commit hooks

The pre-commit hooks can be annoying. That is a good thing.

In case you still want to skip a check you can skip the validation via the -n git flag:

git commit -n

Editors

VS Code

There is a basic settings file provided. You might want to install the following VS Code plugins (or re-enable the build in formatters):

• Prettier - Code formatter esbenp.prettier-vscode https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• ESLint dbaeumer.vscode-eslint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• stylelint shinnn.stylelint https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint