frontspec.json
Spec version 1.0.0-alpha.0
The frontspec.json
has to live in your project root. It has as goal to describe what your project has to offers (css, js, typos, etc...), and where to find them.
This file is separated by purpose in an global object like so:
Metas : Specify some metas data like the title, description, opengraph, etc...
Assets : Specify the assets to load like the css, js, etc...
Theme : Specify the theme used by default
Media : Specify the responsive specifications like the queries (breakpoints), default action, etc...
Views : Specify the views specifications like where to find them, etc...
Specs : Specify some specs related specifications like where to find them, etc...
Google : Specify some google specifications like the GTM/GA to use, etc...
Margin : Specify the margins available in the project.
Padding : Specify the paddings available in the project.
Lod : Specify the lod (level of details) settings
Partytown : Specify if the project make uses of "partytown" and his settings
Font : Specify the fonts specifications like the font-faces available, sizes, etc...
Typo : Specify some typo specifications like which are the available typo classes/tags, etc...
Layout : Specify some layout specifications like the available containers, layouts and grids.
export default {
metas: {},
assets: {},
theme: {},
media: {},
views: {},
specs: {},
google: {},
margin: {},
padding: {},
lod: {},
partytown: {},
font: {},
typo: {},
layout: {},
};
Specify some metas data like the title, description, opengraph, etc...
export default {
lang: 'en',
title: 'Coffeekraken',
homepage: 'https://coffeekraken.io',
description:
'The frontend toolkit that works for everyone. Experts, professionals and new-comers',
themeColor: '#ffbb00',
author: {
name: 'Olivier Bossel',
email: 'olivier.bossel@gmail.com',
url: 'https://coffeekraken.io',
},
og: {
title: 'Coffeekraken',
description:
'The frontend toolkit that works for everyone. Experts, professionals and new-comers',
type: 'website',
url: 'https://coffeekraken.io',
image: 'https://cdnv2.coffeekraken.io/coffeekraken-og.png',
},
};
Assets
Specify the assets to load like the css, js, etc...
export default {
viteClient: { src: '' },
module: {
type: 'module',
defer: true,
src: '/dist/js/index.esm.js',
env: 'production',
},
nomodule: {
nomodule: true,
defer: true,
src: '/dist/js/index.amd.js',
env: 'production',
},
style: { id: 'global', defer: true, src: '/dist/css/index.css' },
};
Theme
Specify the theme used by default
export default {
theme: 'default',
variant: 'dark',
themes: {
'default-light': {
title: 'Default light',
description: 'Nice and elegant light theme',
},
'default-dark': {
title: 'Default dark',
description: 'Nice and elegant dark theme',
},
},
};
Specify the responsive specifications like the queries (breakpoints), default action, etc...
export default {
defaultAction: '<=',
defaultMedia: 'desktop',
defaultQuery: 'screen',
queries: {
wide: { minWidth: 2048, maxWidth: null },
desktop: { minWidth: 1280, maxWidth: 2047 },
tablet: { minWidth: 640, maxWidth: 1279 },
mobile: { minWidth: 0, maxWidth: 639 },
},
};
Views
Specify the views specifications like where to find them, etc...
export default {
layouts: {
main: {
name: 'Default (main)',
viewPath: { twig: 'layouts/main.twig', blade: null },
},
},
rootDirs: {
twig: ['./src/views', './node_modules/@coffeekraken/sugar/src/views/twig'],
blade: [
'./src/views',
'./node_modules/@coffeekraken/sugar/src/views/blade',
],
},
};
Specs
Specify some specs related specifications like where to find them, etc...
export default {
namespaces: {
views: ['./src/views'],
'views.bare': ['./src/views/bare'],
'views.sections': ['./src/views/sections'],
'views.components': ['./src/views/components'],
'sugar.views': ['./node_modules/@coffeekraken/sugar/src/views/_specs'],
'sugar.views.bare': [
'./node_modules/@coffeekraken/sugar/src/views/_specs/bare',
],
'sugar.views.sections': [
'./node_modules/@coffeekraken/sugar/src/views/_specs/sections',
],
'sugar.views.components': [
'./node_modules/@coffeekraken/sugar/src/views/_specs/components',
],
},
cwd: '/Users/olivierbossel/data/web/coffeekraken/coffeekraken/packages/@websites/coffeekraken-io',
};
Google
Specify some google specifications like the GTM/GA to use, etc...
export default {
gtm: 'GTM-K4LMN8Q',
map: { apiKey: 'AIzaSyDzFfEzhmYXRTlONUCtMWQ88uHJhsbtXY4' },
};
Margin
Specify the margins available in the project.
export default {
0: 0,
10: 0.375,
20: 0.75,
30: 1.5,
40: 2.25,
50: 3.25,
60: 4.25,
70: 5.5,
80: 7,
90: 9,
100: 11,
default: '1rem',
};
Padding
Specify the paddings available in the project.
export default {
0: 0,
10: 0.375,
20: 0.75,
30: 1.5,
40: 2.25,
50: 3.25,
60: 4.25,
70: 5.5,
80: 7,
90: 9,
100: 11,
default: '1rem',
};
Lod
Specify the lod (level of details) settings
export default {
enabled: true,
defaultLevel: 3,
botLevel: 1,
levels: [
{ name: 'bare', speedIndex: 0 },
{ name: 'bare+', speedIndex: 30 },
{ name: 'low', speedIndex: 40 },
{ name: 'medium', speedIndex: 50 },
{ name: 'high', speedIndex: 60 },
],
method: 'file',
defaultAction: '>=',
};
Partytown
Specify if the project make uses of "partytown" and his settings
export default {
enabled: false,
forward: [
'dataLayer.push',
'fbq',
'freshpaint.addPageviewProperties',
'freshpaint.identify',
'freshpaint.track',
'_hsq.push',
'Intercom',
'_learnq.push',
'ttq.track',
'ttq.page',
'ttq.load',
'mixpanel.track',
],
};
Font
Specify the fonts specifications like the font-faces available, sizes, etc...
export default {
family: {
default: {
fontFamily: '"Roboto"',
fontWeight: 400,
import: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
},
title: {
fontFamily: '"Roboto"',
fontWeight: 500,
import:
'https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap',
},
quote: {
fontFamily: '"Palatino, Times, Georgia, serif"',
fontWeight: 'normal',
fontStyle: 'normal',
fontDisplay: 'auto',
capHeight: 0.65,
},
code: {
fontFamily: 'Menlo, Monaco, Consolas, Courier New, monospace',
fontWeight: 'normal',
fontStyle: 'normal',
fontDisplay: 'auto',
capHeight: 0.65,
},
},
size: {
0: 0,
5: '0.5',
10: 0.65,
15: 0.7,
20: 0.75,
25: 0.95,
30: 1.1,
40: 1.25,
50: 1.5,
60: 2,
70: 2.5,
80: 3,
90: 4,
100: 5,
default: '15px',
},
};
Typo
Specify some typo specifications like which are the available typo classes/tags, etc...
export default {
h1: {
label: 'H1',
group: 'style',
button: [],
editor: [],
style: {
display: 'block',
fontFamily: '"Roboto"',
fontSize: '45px',
lineHeight: 1.3,
maxWidth: '55ch',
marginBottom: '3.25rem',
},
},
h2: {
label: 'H2',
group: 'style',
button: [],
editor: [],
style: {
display: 'block',
fontFamily: '"Roboto"',
fontSize: '37.5px',
lineHeight: 1.3,
maxWidth: '55ch',
marginBottom: '3.25rem',
},
},
h3: {
label: 'H3',
group: 'style',
button: [],
editor: [],
style: {
display: 'block',
fontFamily: '"Roboto"',
fontSize: '30px',
lineHeight: 1.3,
maxWidth: '55ch',
marginBottom: '3.25rem',
},
},
h4: {
label: 'H4',
group: 'style',
button: [],
editor: [],
style: {
display: 'block',
fontFamily: '"Roboto"',
fontSize: '22.5px',
lineHeight: 1.3,
maxWidth: '55ch',
marginBottom: '3.25rem',
},
},
h5: {
label: 'H5',
group: 'style',
button: [],
editor: [],
style: {
display: 'block',
fontFamily: '"Roboto"',
fontSize: '18.75px',
lineHeight: 1.3,
maxWidth: '55ch',
marginBottom: '2.25rem',
},
},
h6: {
label: 'H6',
group: 'style',
button: [],
editor: [],
style: {
display: 'block',
fontFamily: '"Roboto"',
fontSize: '16.5px',
lineHeight: 1.3,
maxWidth: '55ch',
},
},
p: {
label: 'Paragraph',
group: 'style',
button: [],
editor: [],
style: {
display: 'block',
fontFamily: '"Roboto"',
fontSize: '16.5px',
lineHeight: 1.8,
maxWidth: '55ch',
marginBottom: '2.25rem',
},
default: true,
},
lead: {
label: 'Lead paragraph',
group: 'style',
button: [],
editor: [],
style: {
display: 'block',
fontFamily: '"Roboto"',
fontSize: '18.75px',
lineHeight: 1.6,
maxWidth: '55ch',
marginBottom: '2.25rem',
},
},
hr: {
label: '--',
group: 'block',
button: { label: '--' },
editor: [],
style: {
display: 'block',
color: 'hsla(212,8,50,1)',
opacity: 0.2,
marginBottom: '3.25rem',
},
},
pre: {
label: 'Pre',
group: 'text',
button: [],
editor: [],
style: {
display: 'block',
fontFamily: 'Menlo, Monaco, Consolas, Courier New, monospace',
color: '#f4f5f6',
backgroundColor: '#3b4045',
lineHeight: 1.5,
paddingInline: '1.5rem',
paddingBlock: '0.75rem',
borderRadius: '5px',
depth: '0',
marginBottom: '3.25rem',
},
},
code: {
label: 'Code',
group: 'text',
button: { label: '>' },
editor: [],
style: {
display: 'inline-block',
fontFamily: 'Menlo, Monaco, Consolas, Courier New, monospace',
color: '#f4f5f6',
lineHeight: 1.1,
backgroundColor: '#805e00',
borderRadius: '4px',
paddingInline: '0.375rem',
paddingBlock: '0rem',
},
},
blockquote: {
label: 'Blockquote',
group: 'block',
button: {
label:
' ',
},
editor: {
style: { paddingInlineStart: 1.5, borderLeft: '1px solid #000' },
},
style: {
display: 'block',
fontFamily: '"Palatino, Times, Georgia, serif"',
marginBottom: '3.25rem',
},
},
a: {
label: 'Link',
group: 'text',
button: {
label:
' ',
},
editor: [],
style: { color: '#ffbb00', textDecoration: 'underline' },
},
quote: {
label: 'Quote',
group: 'text',
button: {
label:
' ',
},
editor: [],
style: {
fontFamily: '"Palatino, Times, Georgia, serif"',
marginBottom: '3.25rem',
},
},
bold: {
label: 'Bold',
group: 'text',
button: { label: 'B', style: { fontWeight: 'bolder' } },
editor: [],
style: { fontWeight: 'bold' },
},
italic: {
label: 'Italic',
group: 'text',
button: { label: 'I', style: { fontStyle: 'italic' } },
editor: [],
style: { fontStyle: 'italic' },
},
large: {
label: 'Large',
group: 'text',
button: { label: 'A', style: { fontSize: '1.01em' } },
editor: [],
style: { fontSize: '1.1em' },
},
larger: {
label: 'Larger',
group: 'text',
button: { label: 'A', style: { fontSize: '1.02em' } },
editor: [],
style: { fontSize: '1.2em' },
},
largest: {
label: 'Largest',
group: 'text',
button: { label: 'A', style: { fontSize: '1.03em' } },
editor: [],
style: { fontSize: '1.3em' },
},
small: {
label: 'Small',
group: 'text',
button: { label: 'A', style: { fontSize: '0.99em' } },
editor: [],
style: { fontSize: '0.9em' },
},
smaller: {
label: 'Smaller',
group: 'text',
button: { label: 'A', style: { fontSize: '0.98em' } },
editor: [],
style: { fontSize: '0.8em' },
},
smallest: {
label: 'Smallest',
group: 'text',
button: { label: 'A', style: { fontSize: '0.97em' } },
editor: [],
style: { fontSize: '0.7em' },
},
mark: {
label: 'Mark',
group: 'text',
button: { label: 'M' },
editor: [],
style: { backgroundColor: '#ffbb00' },
},
del: {
label: 'Deleted',
group: 'text',
button: { label: 'D', style: { textDecoration: 'line-through' } },
editor: [],
style: { textDecoration: 'line-through' },
},
ins: {
label: 'Inserted',
group: 'text',
button: { label: 'U', style: { textDecoration: 'underline' } },
editor: [],
style: { textDecoration: 'underline' },
},
sub: {
label: 'Subscript',
group: 'text',
button: {
label: 'Sub',
style: { verticalAlign: 'sub', fontSize: '0.6em' },
},
editor: [],
style: { verticalAlign: 'sub', fontSize: '0.6em' },
},
sup: {
label: 'Superscript',
group: 'text',
button: {
label: 'Sup',
style: { verticalAlign: 'sup', fontSize: '0.6em' },
},
editor: [],
style: { verticalAlign: 'sup', fontSize: '0.6em' },
},
base: {
label: 'Base',
group: 'color',
type: 'color',
button: [],
editor: [],
style: { color: 'hsla(212,8,50,1)' },
},
baseGradient: {
label: 'Base gradient',
group: 'color',
type: 'color',
button: [],
editor: [],
style: {
backgroundSize: '100%',
'-webkitBackgroundClip': 'text',
'-mozBackgroundClip': 'text',
'-webkitTextFillColor': 'transparent',
'-mozTextFillColor': 'transparent',
backgroundImage:
'linear-gradient(90deg, hsla(212,8,50,1) 0%, #838c95 100%)',
},
},
main: {
label: 'Main',
group: 'color',
type: 'color',
button: [],
editor: [],
style: { color: 'hsla(212,8,50,1)' },
},
mainGradient: {
label: 'Main gradient',
group: 'color',
type: 'color',
button: [],
editor: [],
style: {
backgroundSize: '100%',
'-webkitBackgroundClip': 'text',
'-mozBackgroundClip': 'text',
'-webkitTextFillColor': 'transparent',
'-mozTextFillColor': 'transparent',
backgroundImage:
'linear-gradient(90deg, hsla(212,8,50,1) 0%, #838c95 100%)',
},
},
accent: {
label: 'Accent',
group: 'color',
type: 'color',
button: [],
editor: [],
style: { color: '#ffbb00' },
},
accentGradient: {
label: 'Accent gradient',
group: 'color',
type: 'color',
button: [],
editor: [],
style: {
backgroundSize: '100%',
'-webkitBackgroundClip': 'text',
'-mozBackgroundClip': 'text',
'-webkitTextFillColor': 'transparent',
'-mozTextFillColor': 'transparent',
backgroundImage: 'linear-gradient(90deg, #ffbb00 0%, #ffc21a 100%)',
},
},
complementary: {
label: 'Complementary',
group: 'color',
type: 'color',
button: [],
editor: [],
style: { color: '#5100ff' },
},
complementaryGradient: {
label: 'Complementary gradient',
group: 'color',
type: 'color',
button: [],
editor: [],
style: {
backgroundSize: '100%',
'-webkitBackgroundClip': 'text',
'-mozBackgroundClip': 'text',
'-webkitTextFillColor': 'transparent',
'-mozTextFillColor': 'transparent',
backgroundImage: 'linear-gradient(90deg, #5100ff 0%, #621aff 100%)',
},
},
success: {
label: 'Success',
group: 'color',
type: 'color',
button: [],
editor: [],
style: { color: '#91ff00' },
},
successGradient: {
label: 'Success gradient',
group: 'color',
type: 'color',
button: [],
editor: [],
style: {
backgroundSize: '100%',
'-webkitBackgroundClip': 'text',
'-mozBackgroundClip': 'text',
'-webkitTextFillColor': 'transparent',
'-mozTextFillColor': 'transparent',
backgroundImage: 'linear-gradient(90deg, #91ff00 0%, #9cff1a 100%)',
},
},
warning: {
label: 'Warning',
group: 'color',
type: 'color',
button: [],
editor: [],
style: { color: '#ffd500' },
},
warningGradient: {
label: 'Warning gradient',
group: 'color',
type: 'color',
button: [],
editor: [],
style: {
backgroundSize: '100%',
'-webkitBackgroundClip': 'text',
'-mozBackgroundClip': 'text',
'-webkitTextFillColor': 'transparent',
'-mozTextFillColor': 'transparent',
backgroundImage: 'linear-gradient(90deg, #ffd500 0%, #ffd91a 100%)',
},
},
error: {
label: 'Error',
group: 'color',
type: 'color',
button: [],
editor: [],
style: { color: '#ff003c' },
},
errorGradient: {
label: 'Error gradient',
group: 'color',
type: 'color',
button: [],
editor: [],
style: {
backgroundSize: '100%',
'-webkitBackgroundClip': 'text',
'-mozBackgroundClip': 'text',
'-webkitTextFillColor': 'transparent',
'-mozTextFillColor': 'transparent',
backgroundImage: 'linear-gradient(90deg, #ff003b 0%, #ff1a4f 100%)',
},
},
info: {
label: 'Info',
group: 'color',
type: 'color',
button: [],
editor: [],
style: { color: '#00ffff' },
},
infoGradient: {
label: 'Info gradient',
group: 'color',
type: 'color',
button: [],
editor: [],
style: {
backgroundSize: '100%',
'-webkitBackgroundClip': 'text',
'-mozBackgroundClip': 'text',
'-webkitTextFillColor': 'transparent',
'-mozTextFillColor': 'transparent',
backgroundImage: 'linear-gradient(90deg, #00ffff 0%, #1affff 100%)',
},
},
};
Layout
Specify some layout specifications like the available containers, layouts and grids.
export default {
offset: { top: 100, right: 0, bottom: 0, left: 0 },
container: { default: '1280px', wide: '1440px', full: 'none' },
grid: {
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6,
7: 7,
8: 8,
9: 9,
10: 10,
11: 11,
12: 12,
},
layout: {
1: '1',
12: '1 2',
21: '2 1',
112: '1 1 2',
122: '1 2 2',
123: '1 2 3',
211: '2 1 1',
221: '2 2 1',
321: '3 2 1',
1112: '1 1 1 2',
1222: '1 2 2 2',
1234: '1 2 3 4',
2221: '2 2 2 1',
11112: '1 1 1 1 2',
12222: '1 2 2 2 2',
12345: '1 2 3 4 5',
22221: '2 2 2 2 1',
111112: '1 1 1 1 1 2',
122222: '1 2 2 2 2 2',
123456: '1 2 3 4 5 6',
'1_2': '1 _ 2',
'2_1': '2 _ 1',
'12_33': '1 2 _ 3 3',
'1_23': '1 _ 2 3',
'1_2_3': '1 _ 2 _ 3',
'32_1': '3 2 _ 1',
'3_21': '3 _ 2 1',
'12_34': '1 2 _ 3 4',
'123_4': '1 2 3 _ 4',
'1_234': '1 _ 2 3 4',
'1_2_3_4': '1 _ 2 _ 3 _ 4',
'123_45': '1 2 3 _ 4 5',
'12_345': '1 2 _ 3 4 5',
'1_2345': '1 _ 2 3 4 5',
'1234_5': '1 2 3 4 _ 5',
'1_2_3_4_5': '1 _ 2 _ 3 _ 4 _ 5',
},
};