updated package json, added them instructions to readme
Are0h
4 years ago
parent
efe25f5865
commit
0ea0efcb09
@ -1,3 +1,44 @@
|
||||
# Fipamo Theme Kit
|
||||
|
||||
Just a tool to make creating themes for Fipamo a bit easier..er...
|
||||
So in the course of making [Fipamo](https://code.playvicio.us/Are0h/Fipamo), the need arose to make a thing that made making and editing themes a bit easier. HENCE THE CREATION OF FTK.
|
||||
|
||||
Ok, so that was a bit more dramatic than it needed to be, but yeah, this is how you can make pretty front ends for Fipamo sites.
|
||||
|
||||
It's pretty easy to use. Just clone it and and then run the famous `npm install` to get the bits you need to run it and there you're ready to get own.
|
||||
|
||||
The kit comes with two themes, light and dark, to get you started but let's go over a couple of the finer points.
|
||||
|
||||
Currently the kit uses [pug](https://pugjs.org/api/getting-started.html) for templating and [stylus](https://stylus-lang.com/) for css. There's also a JS template written in ES6 to get you started if some scripting is needed. All of these files are used to render to plain old HTML, CSS and Common JS.
|
||||
|
||||
Ok so let's take a look at the structure of theme kits. For the purposes of this guide, let's call our new theme jamila. Heh, yeah.
|
||||
|
||||
- theme-jamila - This is the folder that holds all your stuff for this theme
|
||||
- com - This is for your JS files.
|
||||
- jamila - This is contains the pug template files and rendered css and js assets. This is the folder you move to `content/themes` in your Fipamo install.
|
||||
- styles - All of the stylus files used for css rendering
|
||||
- theme.json - This is the config file that identifes theme your working on. Very important.
|
||||
|
||||
The FTK uses the lovely [Parcel](https://parceljs.org/) to handle file rendering and previewing. To spark this up, you'll have to make a new script that looks specifically at the jamila theme you're making.
|
||||
|
||||
Ha, don't get nervous. There are couple of examples you can use to make this easier. So, for example lets's use the default-light script and change it to what we need it to do.
|
||||
|
||||
The current default-light script is as follows: `stylus -w -m -o src/themes/theme-default-light/default-light/assets/css src/themes/theme-default-light/styles/base.styl & parcel watch src/themes/theme-default-light/com/Start.mjs --out-dir src/themes/theme-default-light/default-light/assets/scripts --out-file start.min.js & parcel src/themes/theme-default-light/default-light/*.pug`
|
||||
|
||||
Wherever you see `default-light` change it to `jamila` so the script looks like `stylus -w -m -o src/themes/theme-jamila/jamila/assets/css src/themes/theme-jamila/styles/base.styl & parcel watch src/themes/theme-jamila/com/Start.mjs --out-dir src/themes/theme-jamila/jamila/assets/scripts --out-file start.min.js & parcel src/themes/theme-jamila/jamila/*.pug`
|
||||
|
||||
Easy peasy. Now make a reference to your brand new render script such as `dev-jamila` so you can start run `npm run dev-jamila` and you're ready to make pretty things.
|
||||
|
||||
Parcel will set up a local server so you can check out the changes your making at `http://localhost:1234/` so if you want took at the new index page you're styling, check out `http://localhost:2314/index.html`
|
||||
|
||||
The base template files for fipamo themes are as follows:
|
||||
|
||||
- frame.pug - Base structure for all pages.
|
||||
- index.pug - The index page.
|
||||
- page.pug - The general page for Fipamo posts.
|
||||
- tags.pug - Handles tagging groups for Fipamo sites
|
||||
- archives.pug - The archive page that displays all published pages.
|
||||
|
||||
Stand in data for these pages exists in `pug.config.js`.
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue