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.
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">
<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'>
<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'>
<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">
<Layout id="invoice" :width="793.71" :height="1122.52">
<Flow>
<style>
.peach {
background: peachpuff;
}
</style>
<div class="peach">Hey, 🍑</div>
</Flow>
</Layout>
</Document>
</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'>
<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">
<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>