the-sett / the-sett-laf / Responsive

The Responsive module provides a way of specifying sizing configurations for different devices, and for applying those to create CSS with media queries.

Global Style Snippet

global : ResponsiveStyle -> List Css.Global.Snippet

A global CSS style sheet that sets up basic spaing for text, with single direction margins.

Models for specifying devices and their basic responsive properties.


type alias CommonStyle =
{ lineHeightRatio : Basics.Float
, typeScale : TypeScale 
}

Defines the style parameters that are common accross all devices.


type alias DeviceProps =
{ device : Device
, baseFontSize : Basics.Float
, breakWidth : Basics.Float
, wrapperWidth : Basics.Float 
}

Defines the style parameters that are device specific.


type Device
    = Sm
    | Md
    | Lg
    | Xl

Defines the possible classes of device; "small", "medium", "large" or "extra large".


type alias DeviceSpec a =
{ sm : a, md : a, lg : a, xl : a }

Defines a mapping from devices to something else, that must always include a definition for each device size.


type alias ResponsiveStyle =
{ commonStyle : CommonStyle
, deviceStyles : DeviceSpec DeviceProps 
}

Specifies the base styling properties accross all devices.

Device dependant styling functions.


type alias ResponsiveFn a =
DeviceStyle -> a

A responsive styling function takes the common style properties and the style properties that are specific to a device, and produces some style related value.

deviceStyle : ResponsiveStyle -> ResponsiveFn Css.Style -> Css.Style

Creates a single CSS property with media queries. Media queries will be generated for each of the devices specified.

deviceStyles : ResponsiveStyle -> ResponsiveFn (List Css.Style) -> Css.Style

Creates a set of CSS properties with media queries. Media queries will be generated for each of the devices specified.

Vertical rhythm

rhythm : Basics.Float -> DeviceStyle -> Basics.Float

Calculates a multiple of the line height for a base font.

This produces a float which is the size in pixels.

rhythmPx : Basics.Float -> DeviceStyle -> Css.Px

Calculates a multiple of the line height for a base font.

This produces a result in px, which works the most accurately.

rhythmSplit : Basics.Float -> Basics.Float -> DeviceStyle -> List Css.Style

This function helps to get the vertical rhythm right in situations where rounding errors are not allowing things to be positioned accurately, or where browsers insert extra padding around certain elements, such as buttons.

Instead of setting a line-height for the rhythm, the requested rhythm is split into a height and a margin which together add up to the correct size.

Functions for responsively scaling fonts

fontMediaStyles : TypeScale.FontSizeLevel -> ResponsiveStyle -> List Css.Style

Creates font-size and line-height accross all media devices using media queries, for a supplied font size level. These font sizings will be in keeping with the vertical rhythm.