sketch - v2.2.1

sketch

Want to know more about details? Go to the additional docs!

Table of Contents

Types

Cache

</>

Manages the styles. Can be instanciated with create_cache.

pub type Cache =
  cache.Cache

Class

</>

Represents a CSS class, compiled.

pub type Class =
  class.Class

Media

</>

No direct usage, used for type-checking and to cancel impossible states.

pub type Media

NoMedia

</>

No direct usage, used for type-checking and to cancel impossible states.

pub type NoMedia

NoPseudoSelector

</>

No direct usage, used for type-checking and to cancel impossible states.

pub type NoPseudoSelector

PseudoSelector

</>

No direct usage, used for type-checking and to cancel impossible states.

pub type PseudoSelector

Style

opaque </>

Represents a Style. It can be a class composition, a media query with its sub-properties, a pseudo-selector with its sub-properties or a property directly. It’s not possible to put a media query in a media query, and a pseudo-selector in a pseudo-selector.

pub opaque type Style(media, pseudo)

Functions

active

</> 
pub fn active(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

align_content

</> 
pub fn align_content(align: String) -> Style(a, b)

align_items

</> 
pub fn align_items(align: String) -> Style(a, b)

align_self

</> 
pub fn align_self(align: String) -> Style(a, b)

align_tracks

</> 
pub fn align_tracks(align: String) -> Style(a, b)

animation

</> 
pub fn animation(animation: String) -> Style(a, b)

animation_delay

</> 
pub fn animation_delay(animation: String) -> Style(a, b)

animation_direction

</> 
pub fn animation_direction(animation: String) -> Style(a, b)

animation_duration

</> 
pub fn animation_duration(animation: String) -> Style(a, b)

animation_fill_mode

</> 
pub fn animation_fill_mode(animation: String) -> Style(a, b)

animation_iteration_count

</> 
pub fn animation_iteration_count(
  animation: String,
) -> Style(a, b)

animation_name

</> 
pub fn animation_name(animation: String) -> Style(a, b)

animation_play_state

</> 
pub fn animation_play_state(animation: String) -> Style(a, b)

animation_timing_function

</> 
pub fn animation_timing_function(
  animation: String,
) -> Style(a, b)

appearance

</> 
pub fn appearance(appearance: String) -> Style(a, b)

aspect_ratio

</> 
pub fn aspect_ratio(aspect_ratio: String) -> Style(a, b)

background

</> 
pub fn background(background: String) -> Style(a, b)

blank

</> 
pub fn blank(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

border

</> 
pub fn border(border: String) -> Style(a, b)

border_bottom

</> 
pub fn border_bottom(border_bottom: String) -> Style(a, b)

border_bottom_left_radius

</> 
pub fn border_bottom_left_radius(
  border_bottom_left_radius: Size,
) -> Style(a, b)

border_bottom_left_radius_

</> 
pub fn border_bottom_left_radius_(
  border_bottom_left_radius: String,
) -> Style(a, b)

border_bottom_right_radius

</> 
pub fn border_bottom_right_radius(
  border_bottom_right_radius: Size,
) -> Style(a, b)

border_bottom_right_radius_

</> 
pub fn border_bottom_right_radius_(
  border_bottom_right_radius: String,
) -> Style(a, b)

border_left

</> 
pub fn border_left(border_left: String) -> Style(a, b)

border_radius

</> 
pub fn border_radius(border_radius: Size) -> Style(a, b)

border_radius_

</> 
pub fn border_radius_(border_radius: String) -> Style(a, b)

border_right

</> 
pub fn border_right(border_right: String) -> Style(a, b)

border_top

</> 
pub fn border_top(border_top: String) -> Style(a, b)

border_top_left_radius

</> 
pub fn border_top_left_radius(
  border_top_left_radius: Size,
) -> Style(a, b)

border_top_left_radius_

</> 
pub fn border_top_left_radius_(
  border_top_left_radius: String,
) -> Style(a, b)

border_top_right_radius

</> 
pub fn border_top_right_radius(
  border_top_right_radius: Size,
) -> Style(a, b)

border_top_right_radius_

</> 
pub fn border_top_right_radius_(
  border_top_right_radius: String,
) -> Style(a, b)

bottom

</> 
pub fn bottom(size: Size) -> Style(a, b)

bottom_

</> 
pub fn bottom_(size: String) -> Style(a, b)

box_shadow

</> 
pub fn box_shadow(box_shadow: String) -> Style(a, b)

box_sizing

</> 
pub fn box_sizing(box_sizing: String) -> Style(a, b)

checked

</> 
pub fn checked(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

class

</> 
pub fn class(styles: List(Style(a, b))) -> Class

Compiles a static class, and reuses it across the same render flow. Don’t use dynamic styles with it, use dynamic instead.

color

</> 
pub fn color(color: String) -> Style(a, b)

column_gap

</> 
pub fn column_gap(column_gap: Size) -> Style(a, b)

compose

</> 
pub fn compose(class: Class) -> Style(a, b)

Compose styles by inheriting class, and later overrides them. Works similarly to composes property in CSS modules.

create_cache

</> 
pub fn create_cache(
  options: Options,
) -> Result(Cache, SketchError)

Create a cache manager, managing the styles for every repaint. You can instanciate as much cache manager that you want, if you want to use multiple render lifecycle. You can output the styles directly in a node style in the DOM, or by pushing them directly in a CSSStyleSheet, at the document level. The choice is up to you at the initialization of the Cache. On BEAM, this setting is ignored. If you’re using Lustre, you shouldn’t have to worry about it, and consider it as internal low-level.

cursor

</> 
pub fn cursor(cursor: String) -> Style(a, b)

direction

</> 
pub fn direction(direction: String) -> Style(a, b)

disabled

</> 
pub fn disabled(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

display

</> 
pub fn display(display: String) -> Style(a, b)

dynamic

</> 
pub fn dynamic(id: String, styles: List(Style(a, b))) -> Class

Compiles a dynamic class. It means during the render, when the class with the id is re-computed, a new version will be pushed in the browser if needed. It means you can reuse the function to output different classes with the same function and basis. With a class, once computed once during the render, it’s not possible to change the content of the class. Be careful to add a unique ID: right now, it’s not possible to push a dynamic class in the browser without defining an ID. The ID should be unique to the computed class, otherwise you could end up with some classes overlap.

enabled

</> 
pub fn enabled(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

filter

</> 
pub fn filter(filter: String) -> Style(a, b)

first_child

</> 
pub fn first_child(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

first_of_type

</> 
pub fn first_of_type(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

flex

</> 
pub fn flex(flex: String) -> Style(a, b)

flex_basis

</> 
pub fn flex_basis(flex_basis: String) -> Style(a, b)

flex_direction

</> 
pub fn flex_direction(flex_direction: String) -> Style(a, b)

flex_grow

</> 
pub fn flex_grow(flex_grow: String) -> Style(a, b)

float

</> 
pub fn float(float: String) -> Style(a, b)

focus

</> 
pub fn focus(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

focus_visible

</> 
pub fn focus_visible(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

focus_within

</> 
pub fn focus_within(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

font_family

</> 
pub fn font_family(font_family: String) -> Style(a, b)

font_size

</> 
pub fn font_size(font_size: Size) -> Style(a, b)

font_size_

</> 
pub fn font_size_(font_size: String) -> Style(a, b)

font_style

</> 
pub fn font_style(font_style: String) -> Style(a, b)

font_weight

</> 
pub fn font_weight(font_weight: String) -> Style(a, b)

gap

</> 
pub fn gap(gap: Size) -> Style(a, b)

gap_

</> 
pub fn gap_(gap: String) -> Style(a, b)

grid_area

</> 
pub fn grid_area(grid_area: String) -> Style(a, b)

grid_auto_columns

</> 
pub fn grid_auto_columns(
  grid_auto_columns: String,
) -> Style(a, b)

grid_auto_flow

</> 
pub fn grid_auto_flow(grid_auto_flow: String) -> Style(a, b)

grid_auto_rows

</> 
pub fn grid_auto_rows(grid_auto_rows: String) -> Style(a, b)

grid_column

</> 
pub fn grid_column(grid_column: String) -> Style(a, b)

grid_row

</> 
pub fn grid_row(grid_row: String) -> Style(a, b)

grid_template

</> 
pub fn grid_template(grid_template: String) -> Style(a, b)

grid_template_areas

</> 
pub fn grid_template_areas(
  grid_template_areas: String,
) -> Style(a, b)

grid_template_columns

</> 
pub fn grid_template_columns(
  grid_template_columns: String,
) -> Style(a, b)

grid_template_rows

</> 
pub fn grid_template_rows(
  grid_template_rows: String,
) -> Style(a, b)

height

</> 
pub fn height(height: Size) -> Style(a, b)

height_

</> 
pub fn height_(height: String) -> Style(a, b)

hover

</> 
pub fn hover(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

important

</> 
pub fn important(style: Style(a, b)) -> Style(a, b)

Add an !important flag to any CSS property. It won’t have any effect on non-property style, like media, etc. It will then act as the identity function.

invalid

</> 
pub fn invalid(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

justify_content

</> 
pub fn justify_content(justify: String) -> Style(a, b)

justify_items

</> 
pub fn justify_items(justify: String) -> Style(a, b)

justify_self

</> 
pub fn justify_self(justify: String) -> Style(a, b)

justify_tracks

</> 
pub fn justify_tracks(justify: String) -> Style(a, b)

last_child

</> 
pub fn last_child(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

last_of_type

</> 
pub fn last_of_type(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

left

</> 
pub fn left(size: Size) -> Style(a, b)

left_

</> 
pub fn left_(size: String) -> Style(a, b)

letter_spacing

</> 
pub fn letter_spacing(letter_spacing: String) -> Style(a, b)

line_break

</> 
pub fn line_break(line_break: String) -> Style(a, b)

line_height

</> 
pub fn line_height(line_height: String) -> Style(a, b)
</> 
pub fn link(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

list_style

</> 
pub fn list_style(list_style: String) -> Style(a, b)

list_style_image

</> 
pub fn list_style_image(list_style_image: String) -> Style(a, b)

list_style_position

</> 
pub fn list_style_position(
  list_style_position: String,
) -> Style(a, b)

list_style_type

</> 
pub fn list_style_type(list_style_type: String) -> Style(a, b)

lustre_setup

</> 
pub fn lustre_setup(
  options: Options,
) -> Result(fn(fn(a) -> b) -> fn(a) -> b, SketchError)

Deprecated: Use sketch/lustre.{setup, compose} instead.

margin

</> 
pub fn margin(margin: Size) -> Style(a, b)

margin_

</> 
pub fn margin_(margin: String) -> Style(a, b)

margin_bottom

</> 
pub fn margin_bottom(margin: Size) -> Style(a, b)

margin_left

</> 
pub fn margin_left(margin: Size) -> Style(a, b)

margin_right

</> 
pub fn margin_right(margin: Size) -> Style(a, b)

margin_top

</> 
pub fn margin_top(margin: Size) -> Style(a, b)

max_height

</> 
pub fn max_height(height: Size) -> Style(a, b)

max_height_

</> 
pub fn max_height_(height: String) -> Style(a, b)

max_width

</> 
pub fn max_width(width: Size) -> Style(a, b)

max_width_

</> 
pub fn max_width_(width: String) -> Style(a, b)

media

</> 
pub fn media(
  query: Query,
  styles: List(Style(NoMedia, PseudoSelector)),
) -> Style(Media, a)

memo

</> 
pub fn memo(class: Class) -> Class

Memoizes a function across multiple renders. When encountered for the first time, the class will be put in long-live section of the stylesheet. Once in long-live section, the computed class will never be garbaged, and will be included in every render. This saves some time during render by skipping every memoized class. You can use it when you know that a class will be used during every render, or when you want a class to not be forgetted, because you’re using it often.

min_height

</> 
pub fn min_height(height: Size) -> Style(a, b)

min_height_

</> 
pub fn min_height_(height: String) -> Style(a, b)

min_width

</> 
pub fn min_width(width: Size) -> Style(a, b)

min_width_

</> 
pub fn min_width_(width: String) -> Style(a, b)

nth_child

</> 
pub fn nth_child(
  selector: String,
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

nth_last_child

</> 
pub fn nth_last_child(
  selector: String,
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

nth_last_of_type

</> 
pub fn nth_last_of_type(
  selector: String,
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

nth_of_type

</> 
pub fn nth_of_type(
  selector: String,
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

object_fit

</> 
pub fn object_fit(object_fit: String) -> Style(a, b)

object_position

</> 
pub fn object_position(object_position: String) -> Style(a, b)

offset

</> 
pub fn offset(offset: String) -> Style(a, b)

offset_anchor

</> 
pub fn offset_anchor(offset_anchor: String) -> Style(a, b)

offset_distance

</> 
pub fn offset_distance(offset_distance: String) -> Style(a, b)

offset_path

</> 
pub fn offset_path(offset_path: String) -> Style(a, b)

offset_position

</> 
pub fn offset_position(offset_position: String) -> Style(a, b)

offset_rotate

</> 
pub fn offset_rotate(offset_rotate: String) -> Style(a, b)

only_child

</> 
pub fn only_child(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

only_of_type

</> 
pub fn only_of_type(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

opacity

</> 
pub fn opacity(opacity: Float) -> Style(a, b)

optional

</> 
pub fn optional(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

outline

</> 
pub fn outline(outline: String) -> Style(a, b)

outline_color

</> 
pub fn outline_color(outline_color: String) -> Style(a, b)

outline_offset

</> 
pub fn outline_offset(outline_offset: String) -> Style(a, b)

outline_style

</> 
pub fn outline_style(outline_style: String) -> Style(a, b)

outline_width

</> 
pub fn outline_width(outline_width: String) -> Style(a, b)

overflow

</> 
pub fn overflow(overflow: String) -> Style(a, b)

overflow_x

</> 
pub fn overflow_x(overflow_x: String) -> Style(a, b)

overflow_y

</> 
pub fn overflow_y(overflow_y: String) -> Style(a, b)

padding

</> 
pub fn padding(padding: Size) -> Style(a, b)

padding_

</> 
pub fn padding_(padding: String) -> Style(a, b)

padding_bottom

</> 
pub fn padding_bottom(padding: Size) -> Style(a, b)

padding_left

</> 
pub fn padding_left(padding: Size) -> Style(a, b)

padding_right

</> 
pub fn padding_right(padding: Size) -> Style(a, b)

padding_top

</> 
pub fn padding_top(padding: Size) -> Style(a, b)

place_content

</> 
pub fn place_content(place: String) -> Style(a, b)

place_items

</> 
pub fn place_items(place: String) -> Style(a, b)

place_self

</> 
pub fn place_self(place: String) -> Style(a, b)

placeholder

</> 
pub fn placeholder(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

pointer_events

</> 
pub fn pointer_events(pointer_events: String) -> Style(a, b)

position

</> 
pub fn position(position: String) -> Style(a, b)

prepare

</> 
pub fn prepare(cache: Cache) -> Nil

Lifecycle function — not side-effect free prepare should be called before your repaint, and before the different calls to class and dynamic functions. This setups the cache to prepare for a new paint, and will allow for diffing the styles. As long as you don’t call prepare, the stylesheet output by sketch will not diff, and you’ll use the stylesheet as append-only. This could be done at will. Be careful, the styles computed by class and dynamic will be pushed in the last cache called by prepare, due to the styles handling (and some side-effects under-the-hood for performance purposes).

property

</> 
pub fn property(field: String, content: String) -> Style(a, b)

pseudo_selector

</> 
pub fn pseudo_selector(
  value: String,
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

read_only

</> 
pub fn read_only(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

read_write

</> 
pub fn read_write(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

render

</> 
pub fn render(cache: Cache) -> Result(String, Nil)

Lifecycle function — not side-effect free render takes a Cache, and render its content to the stylesheet, according to the choice of the Cache. render is idempotent, and can be called as much as you want. You can expect render to return Ok(String) representing the stylesheet on BEAM, and Error(Nil) on JS. It means there’s not output String in JS, but the modification happened in the DOM!

required

</> 
pub fn required(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)
</> 
pub fn right(size: Size) -> Style(a, b)

right_

</> 
pub fn right_(size: String) -> Style(a, b)

row_gap

</> 
pub fn row_gap(row_gap: Size) -> Style(a, b)

target

</> 
pub fn target(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

text_align

</> 
pub fn text_align(text_align: String) -> Style(a, b)

text_decoration

</> 
pub fn text_decoration(text_decoration: String) -> Style(a, b)

text_justify

</> 
pub fn text_justify(text_justify: String) -> Style(a, b)

text_overflow

</> 
pub fn text_overflow(text_overflow: String) -> Style(a, b)

text_transform

</> 
pub fn text_transform(text_transform: String) -> Style(a, b)

to_class_name

</> 
pub fn to_class_name(class: Class) -> String

Convert a Class to its proper class name, to use it anywhere in your application. It can have the form class1 or class1 class2 in case of classes composition.

to_lustre

</> 
pub fn to_lustre(class: Class) -> Attribute(a)

Convert a Class to its equivalent lustre attribute. Use it in your view functions. I.e. html.div([sketch.to_lustre(class())], []).

top

</> 
pub fn top(size: Size) -> Style(a, b)

top_

</> 
pub fn top_(size: String) -> Style(a, b)

transform

</> 
pub fn transform(transform: String) -> Style(a, b)

transform_box

</> 
pub fn transform_box(transform_box: String) -> Style(a, b)

transform_origin

</> 
pub fn transform_origin(transform_origin: String) -> Style(a, b)

transform_style

</> 
pub fn transform_style(transform_style: String) -> Style(a, b)

transition

</> 
pub fn transition(transition: String) -> Style(a, b)

translate

</> 
pub fn translate(translate: String) -> Style(a, b)

user_select

</> 
pub fn user_select(user_select: String) -> Style(a, b)

valid

</> 
pub fn valid(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

visibility

</> 
pub fn visibility(visibility: String) -> Style(a, b)

visited

</> 
pub fn visited(
  styles: List(Style(NoMedia, NoPseudoSelector)),
) -> Style(a, PseudoSelector)

white_space

</> 
pub fn white_space(white_space: String) -> Style(a, b)

white_space_collapse

</> 
pub fn white_space_collapse(
  white_space_collapse: String,
) -> Style(a, b)

width

</> 
pub fn width(width: Size) -> Style(a, b)

width_

</> 
pub fn width_(width: String) -> Style(a, b)

word_break

</> 
pub fn word_break(word_break: String) -> Style(a, b)

word_spacing

</> 
pub fn word_spacing(word_spacing: String) -> Style(a, b)

word_wrap

</> 
pub fn word_wrap(word_wrap: String) -> Style(a, b)

z_index

</> 
pub fn z_index(z_index: Int) -> Style(a, b)
✨ Search Document