⚡️ Stents

Architecture & Landscape Design Portfolio

Features

• List & display portfolio, thanks to Jekyll's collections or posts
• Contact form with formcarry
• Map with Leaflet thanks to the jekyll-leaflet plugin
• jekyll-archives to build and sort through categories & tags pages
• Custom variables
• RSS/Atom feed
• SEO tags
• Microdata markup
• Jekyll with livereload
• Site search

Setup

1. Install Jekyll
2. Add your site and author details in _config.yml.
3. Get a workflow going to see your site's output with Jekyll locally.

Stents was built with Jekyll version 4.0.0 and should support newer versions as well.

Install the dependencies with Bundler:

$ bundle install

Run jekyll commands through Bundler to ensure you're using the right versions:

$ bundle exec jekyll serve

Config

Add your custom configuration in the _config file.

Navigation

• Exposed as a data file to give clients better access
• Set in the Data / Navigation section, look for navigation.yml in _data.

Footer

Look for default.html in _layouts to add your footer links.

Contact Page

To add you formcarry endpoint URL to _config.yml, you'll need a fromcarry account, please refer to formcarry documentation

Add your map coordinates if you want to display a map. Please refer to the jekyll-leaflet plugin and [Leaflet](https://leafletjs.co m) documentation for customizing your map(s).

Develop

Building front-end assets: styles and scripts

4. Install Node module dependencies:

npm install

Tachyons

You can change the site styling using Tachyons, look for the CSS in the stntz-theme file, located in the src folder.

Tachyons is a CSS toolkit and design system based on using components. Please refer to Tachyons documentation, you can also start with https://github.com/dwyl/learn-tachyons

Once you are done with your style changes, run:

Run the npm run

build:css

That will process all your CSS files in one readable file located in assets/css/stntz-tachyons.css.

to minify your css you can run

npm run minify-css

or

npm run start

to minify and build the site locally.

npm commands with browser reload

Supply uses a couple of custom Postcss npm scripts. Make sure your dependencies are installed: npm install. Type npm outdated to see if you have outdated versions, then install any outdated dependencies.

Once that is done, to build your site & concatenate your CSS (in assets -> CSS), simply run:

npm run start

This command builds the site locally on port 4000, you can quickly revise design changes thanks to livereload.

Editing

Posts

• Add, update, or remove a post in the Posts collection.
• Change the defaults when new posts are created in _posts/_defaults.md.

Collections

stents uses a collection (?) Not sure if needed

Copyright / License

stents is designed by alternatyves and licensed under the MIT license.

Please use and contribute to stents .

Who is using this?

• stents.be

Found a bug? Let me know!