We're sorry, but the page you requested cannot be found.
9 |We're sorry, but something went wrong and the page cannot be displayed.
9 |TailwindCSS Boilerplate theme is not a theme, it's a boilerplate to 10 | create some awesome themes with all the developer's tools includes: TailwindCSS, Webpack, BrowserSync already 11 | configured to 12 | build with the OctoberCMS's directory structure, PostCSS with some the majors plugins, PurgeCSS, and all this 13 | managed with NPM.
14 | 15 |Have fun!
16 | 17 |TailwindCSS, Webpack and PostCSS is already installed and pre-configured to work together. Each 19 | configuration file is pre-built but customizable.
20 |This boilerplate comes with webpack and fully customised webpack.config.js file for OctoberCMS to manage all your assets: css, 22 | javascript, images, fonts and also all your template files: Webpack will walk through 23 | all you directory and subdirectory present in your theme folder to compile the .htm, .html and .txt 24 | files to catch all the assets dependencies you may have added in them!
25 |PostCSS is the preprocessor of this boilerplate with the most used plugins. Feel free to add the plugins 26 | you want into the postcss.config.js
27 | 28 |To ensure the optimization of your final theme, all unused CSS will be removed with PurgeCSS, and 30 | all the JS and CSS files will be minified
31 | 32 |All the files presents in the layouts directory will receive the 35 | CSS/JS due to the Webpack auto-injection and a special rule on this directory.
36 | 37 |This boilerplate uses clean-webpack-plugin to ensure 39 | you don't have any useless files in your themes directory. Your files is cleaned on every build webpack makes. 40 |
41 | 42 |First of all: if it's not already the case, be sure to run php 45 | artisan october:env. This toolkit uses APP_URL inside of 46 | it to serve local server with BrowserSync and 47 | to correctly sets the paths of the assets. Be sure that it's correctly defined.
48 | 49 |Again, this theme is not a theme, it's a toolkit, based on NPM. To use it, be sure to have node and npm installed on 52 | your machine.
53 |Then, follow this quick steps:
54 |Be aware of the fact that every times you create a new file, you need to reload npm run watch.
66 | 67 |Due to the pre-built configuration, you need to ensure all the modifications you make stay in the 69 | src directory. All directories, subdirectories and files will be 70 | cleaned and recreated by webpack on the root of the the theme's root folder. Think of the src directory as your root 72 | directory
73 |The defaults directories and files structure of this boilerplate are:
74 |75 | / 76 | /assets 77 | /images 78 | theme-preview.png 79 | /custom_filter 80 | theme-filter-loader.js 81 | /node_modules/ (after npm install) 82 | /src/ 83 | /assets/ 84 | /css/ 85 | entry.css (loads TailwindCSS and inserts your custom css at the right place) 86 | themes.css (your actual custom css) 87 | /fonts/ 88 | /images/ 89 | october.png 90 | /javascript/ 91 | app.js (your custom javascript, copied from October's demo theme) 92 | /content/ 93 | /layouts/ 94 | /default.htm 95 | /pages/ 96 | 404.htm 97 | error.htm 98 | home.htm 99 | /partials/ 100 | /site/ 101 | footer.htm 102 | header.htm 103 | index.js 104 | /package.json 105 | /postcss.config.js 106 | /README.md 107 | /tailwindcss.config.js 108 | /theme.yaml 109 | /version.yaml 110 | /webpack.config.js 111 |112 |
After webpack build, all the files in the src will be parsed and placed on the same structure from 113 | the root folder.
114 |