Seamless tools for building dazzling websites
Usage
First, install as a dependency:
npm install cmless
Create a cmless.config.js
file in your root folder and import cmless
. Out of the box this gives you a design system, loading Google Fonts, defining CSS variables and reset rules, and more!
const defineConfig = require('cmless');
module.exports = defineConfig({
// Settings that already have some sensible defaults
entry: 'src/app.tsx',
template: 'node_modules/cmless/client/index.html',
// Set to `false` or `null` to not use CSS variables.
// Otherwise will use the variables defined in `client/theme.js`, allowing you to override them like this:
theme: {
'system-ui': 'Comic Sans MS',
},
// Set to a string containing CSS to use as a style reset.
// Set to `true` or leave undefined to use the built-in `client/reset.css`.
// Set to `false`, `null`, or an empty string to not use a style reset.
reset: fs.readFileSync('node_modules/cmless/client/reset.css').toString(),
// Other settings - not defined by default
title: 'Hammer - a website about hammers',
link: [
{
rel: 'icon',
type: 'image/svg+xml',
href: 'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 110 110%22><text y=%22.9em%22 font-size=%2290%22>🔨</text></svg>',
},
],
meta: {
author: 'MC Hammer',
description: 'Stop, collaborate, and listen!',
},
fonts: {
title: 'Montserrat',
text: 'Inter',
},
// Optional built-in support for Netlify forms: https://docs.netlify.com/forms/setup
forms: {
contact: {
text: { tagName: 'textarea' },
email: { tagName: 'input', type: 'email' },
},
},
});
Plugins and customizing config
cmless
uses Vite under the hood, so defineConfig
returns a Vite config with some plugins pre-configured. To add more plugins or otherwise customize config, for example adding Vue support, try the following:
const vue = require('@vitejs/plugin-vue')
const defineConfig = require('cmless')
const cmless = defineConfig({
entry: 'src/main.js',
})
module.exports = {
...cmless,
plugins: [...cmless.plugins, vue()],
}
API lambda functions
If you're using Netlify, set the functions folder in your netlify.toml
file:
[build]
functions = "node_modules/cmless/server/"
Or if you need more flexibility - require the lambda functions directly:
const { getData } = require('cmless/server');
exports.handler = getData;
You can now call these functions from your local server - with Netlify the function will be at http://localhost:3000/.netlify/functions/getData
Contribution
To start a local server using these functions, first install the dependencies:
npm install
Then run npm start
and call a function, for example http://localhost:3000/.netlify/functions/getDocumentJSON?url=YOUR_DOCUMENT_URL_ENCODED