Styling
How to style your Jaspr website.
Jaspr is highly flexible when it comes to styling. Write your own styles, or reference local and external stylesheets. You can use Jasprs own type-safe CSS-in-Dart styling system or integrate CSS frameworks to style your website.
CSS-in-Dart
Jaspr gives you a strongly-typed styles system that wraps the most common css properties. You can
access these various properties through the Styles class that is exported by the core package.
When defining styles like this, you can use them to either write global stylesheets, or set inline styles for html elements.
Global Stylesheet
You can define a global stylesheet from your Dart code using one of the following options:
-
Passing Style Rules to Document(styles: ...). This will render the provided styles into a global stylesheet inside the
<head>element. -
Using the @css annotation to automatically render the annotated styles into a global stylesheet inside the
<head>element. -
Using the Style component to manually define a
<style>element anywhere in the tree.
Inline Styles
You can also pass a Styles instance to any html component, which will then render as inline css styles:
div(styles: const Styles.background(color: Colors.red), []);
renders to:
<div style="background: red"></div>
Try to prefer const styles whenever possible, which will benefit the performance and size of your site.
Responsive styles
To make your styles responsive and e.g. change based on the screen width or height, use the css.media() utility.
This will render css @media queries.
Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.
Provide a MediaQuery as well as child styles to the function:
@css
final styles = [
css('.main').flexbox(direction: FlexDirection.row),
css.media(MediaQuery.screen(maxWidth: 600.px), [
css('.main').flexbox(direction: FlexDirection.column)
]),
];
The above rules define a row layout for larger screens and a column layout for smaller (< 600px) screens.
External Stylesheets
If you are writing .css stylesheets manually or have external stylesheets you want to use, you can add
them as a <link rel="stylesheet"> inside the <head> element.
When you are in static or server mode, add this to Document(head: ...):
void main() {
runApp(Document(
/* ... */ // other properties
head: [
link(rel: "stylesheet", href: "/path/to/your/stylesheet.css"),
],
body: App(),
));
}
When you are in client mode, add this directly to the index.html file:
<head>
<link rel="stylesheet" href="/path/to/your/stylesheet.css"/>
</head>
Dynamically Adding Stylesheets
You can use the Document.head() component to dynamically set a value in the <head>
from any component.
class MyCustomComponent extends StatelessComponent {
Iterable<Component> build(BuildContext context) sync* {
yield Document.head(children: [
<link rel="stylesheet" href="/some/extra/stylesheet.css"/>
]);
}
}
Using Third-Party CSS Frameworks
There are lots of other options from the CSS landscape that you can integrate with Jaspr.
Remember, Jaspr sites are just normal websites. You can do (almost) all the same things.
Some common css solutions include:
Tailwind
Jaspr has a first-party Tailwind integration. Check it out here.
Bulma
Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
With Bulma (and other similar css component frameworks) you basically only need to add specific classes to your html elements to style them as read-made components.
See the Bulma Example on JasprPad for some basic example components.
Dart Sass
The easiest way to integrate the Sass preprocessor into your dart project is by using the sass_builder package.
After setting up the package, simply create a .scss file:
@use "package:bootstrap_sass/scss/variables" as bootstrap;
.a {
color: blue;
}
.c {
color: bootstrap.$body-color;
}
and include the generated output .css file as an external stylesheet:
link(rel:"stylesheet", href: "/styles.css")