CSS
Use plain CSS styles in Format Studio documents.
Supported frameworks
| Framework | Supported |
|---|---|
| React | |
| Vue | |
| HTML |
Installation
No additional installation steps required.
Usage
There are a few different ways to work with plain CSS. Using CSS files, using inline <style> tags and using inline styles.
CSS files
Add a CSS file anywhere in your Format project or document.
documents
invoice
.peach {
background: peachpuff;
}Import the CSS file into your document entry point. This import only needs to be done once, in the entry file.
import { Document, Layout, Flow } from '@format.dev/react'
import './styles.css'
export default function Invoice ({ data }) {
return (
<Document title='Invoice' lang='en'>
<Layout id='invoice' width={793.71} height={1122.52}>
<Flow>
<div className='peach'>Hey, 🍑</div>
</Flow>
</Layout>
</Document>
)
}Once you've imported your styles, add classes to any elements in your JSX.
function Header () {
return <header className='pear'>Hey, 🍐</header>
}Add a CSS file anywhere in your Format project or document.
documents
invoice
.peach {
background: peachpuff;
}Import the CSS file into your document entry point. This import only needs to be done once, in the entry file.
<script setup lang="ts">
import { Document, Layout, Flow } from '@format.dev/vue'
</script>
<template>
<Document title="Invoice" lang="en">
<Layout id="invoice" :width="793.71" :height="1122.52">
<Flow>
<div class="peach">Hey, 🍑</div>
</Flow>
</Layout>
</Document>
</template>
<style>
@import './styles.css';
</style>Once you've imported your styles, add classes to any elements in your template.
<template>
<header class="pear">Hey, 🍐</header>
</template>Add a CSS file anywhere in your Format project or document.
documents
invoice
.peach {
background: peachpuff;
}Import the CSS file into your document entry point. This import only needs to be done once, in the entry file.
export { default } from './index.html'
import './styles.css'Attach classes to any elements in any of your HTML files.
Once your CSS file has been imported into the module system, use any modern CSS feature from here, including:
/* Importing other CSS files */
@import './other-css.css';
/* CSS nesting */
.peach {
.pear {
color: slategray;
}
}
/* CSS layers */
@import './base-styles.css' layer(base);
@layer components {
.apple {
color: slategray;
}
}
/* Remote CSS */
@import url('https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css');<style> tags
Place <style> tags directly into your documents. A <style> tag inside a Layout scopes to that Layout, so its rules apply to every page that Layout produces. To share styles across every Layout, place the <style> directly under the <Document>, outside any Layout, and Format applies it to all of them as a document-wide default.
import { Document, Layout, Flow } from '@format.dev/react'
export default function Invoice ({ data }) {
return (
<Document title='Invoice' lang='en'>
<Layout id='invoice' width={793.71} height={1122.52}>
<Flow>
<style>
{`
.peach {
background: peachpuff;
}
`}
</style>
<div className='peach'>Hey, 🍑</div>
</Flow>
</Layout>
</Document>
)
}To author styles in TypeScript without any styling framework overhead, use the css tagged template.
import { css } from '@format.dev/react'
export const styles = css`
.peach {
background: peachpuff;
}
`import { Document, Layout, Flow } from '@format.dev/react'
import { styles } from './styles'
export default function Invoice ({ data }) {
return (
<Document title='Invoice' lang='en'>
<Layout id='invoice' width={793.71} height={1122.52}>
<Flow>
<style>{styles}</style>
<div className='peach'>Hey, 🍑</div>
</Flow>
</Layout>
</Document>
)
}For more involved styling, use Linaria, which integrates with your Format documents.
<script setup lang='ts'>
import { Document, Layout, Flow } from '@format.dev/vue'
</script>
<template>
<Document title="Invoice" lang="en">
<Layout id="invoice" :width="793.71" :height="1122.52">
<Flow>
<style>
.peach {
background: peachpuff;
}
</style>
<div class="peach">Hey, 🍑</div>
</Flow>
</Layout>
</Document>
</template><template data-type="document" data-title="Invoice" data-lang="en">
<template data-type="layout" data-id="invoice" data-width="793.71px" data-height="1122.52px">
<style>
.peach {
background: peachpuff;
}
</style>
<template data-type="flow">
<div class="peach">Hey, 🍑</div>
</template>
</template>
</template>Inline styles
Use plain inline styles across all frameworks.
import { Document, Layout, Flow } from '@format.dev/react'
type InvoiceProps = {
data?: {
applyBackground?: string
}
}
export default function Invoice ({ data }: InvoiceProps) {
return (
<Document title='Invoice' lang='en'>
<Layout id='invoice' width={793.71} height={1122.52}>
<Flow>
<div style={{ backgroundColor: 'peachpuff' }}>
Hey, 🍑
</div>
<div style={{ backgroundColor: data?.applyBackground ?? 'peachpuff' }}>
Hey, 🍑?
</div>
</Flow>
</Layout>
</Document>
)
}<script setup lang='ts'>
import { Document, Layout, Flow } from '@format.dev/vue'
const props = defineProps<{
data?: {
applyBackground?: string
}
}>()
</script>
<template>
<Document title="Invoice" lang="en">
<Layout id="invoice" :width="793.71" :height="1122.52">
<Flow>
<div style="background-color: peachpuff">
Hey, 🍑
</div>
<div :style="{ backgroundColor: props.data?.applyBackground ?? 'peachpuff' }">
Hey, 🍑?
</div>
</Flow>
</Layout>
</Document>
</template>