silk-foundation/com.varabyte.kobweb.silk.style.breakpoint/Breakpoint

Breakpoint

enum Breakpoint : Enum<Breakpoint> , BreakpointQueryProvider(source)

Breakpoints are size values which can be used to affect the layout of the UI at various boundary points.

The user is ultimately allowed to define what all sizes here mean to their project, but by default Silk is set up so that SM means devices larger than mobile, MD means devices larger than (small) tablets, and LG means devices wider than your standard browser session. (In many cases, it's probably fine to just define base styles and MD styles, if you even need to use breakpoints at all).

XL is provided for ultra-wide scenarios as well as additional flexibility in case the user wants to override what these size means in their own web app.

By default, you can think about base styles (without breakpoints) applying to mobile. In other words, if you never add any breakpoints, then the page you get will be styled the same on your phone as well as the widest-screen monitor.

Some default breakpoint sizes are defined by Silk, but you can override them by marking a method with @InitSilk and updating ctx.theme.breakpoints inside it.

For more information about breakpoints, see also: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

Entries

ZERO

Special value which always means 0-width, useful for querying the current breakpoint of a screen that's smaller than "small" (which usually indicates a mobile device).

Types

Range

class Range : BreakpointQueryProvider

Properties

entries

val entries: EnumEntries<Breakpoint>

Returns a representation of an immutable list of all enum entries, in the order they're declared.

name

val name: String

ordinal

val ordinal: Int

Functions

plus

operator fun BreakpointQueryProvider.plus(other: CssRule.OfPseudoClass): CssRule.CompositeOpen

operator fun BreakpointQueryProvider.plus(other: CssRule.OfPseudoElement): CssRule.CompositeClosed

rangeTo

operator fun rangeTo(upper: Breakpoint): Breakpoint.Range

Declare a breakpoint range that applies between a lower-bound breakpoint (inclusive) and an upper-bound breakpoint (inclusive).

rangeUntil

operator fun rangeUntil(upper: Breakpoint): Breakpoint.Range

Declare a breakpoint range that applies between a lower-bound breakpoint (inclusive) and an upper-bound breakpoint (exclusive).

toCSSMediaQuery

open override fun toCSSMediaQuery(): CSSMediaQuery

Returns a min-width media query that applies at this breakpoint and above.

toMinWidthQuery

fun Breakpoint.~~toMinWidthQuery~~(): CSSMediaQuery

toPx

fun Breakpoint.toPx(): CSSpxValue

Convenience method for fetching the associated SilkTheme.breakpoints value for the current Breakpoint value.

toWidth

fun Breakpoint.toWidth(): CSSLengthNumericValue

Convenience method for fetching the associated SilkTheme.breakpoints value for the current Breakpoint value.

until

infix fun until(upper: Breakpoint): Breakpoint.Range

Convenience method replacing the rangeUntil operator syntax with something more readable.

valueOf

fun valueOf(value: String): Breakpoint

Returns the enum constant of this type with the specified name. The string must match exactly an identifier used to declare an enum constant in this type. (Extraneous whitespace characters are not permitted.)

values

fun values(): Array<Breakpoint>

Returns an array containing the constants of this enum type, in the order they're declared.