Nutritious Polygonal Meatball

    This package has been deprecated

    Author message:

    This package is no longer maintained. See what we're doing today at https://github.com/microsoft/fast

    @microsoft/fast-layouts-react
    TypeScript icon, indicating that this package has built-in type declarations

    4.12.0 • Public • Published

    FAST Layouts React

    A collection of components used to form various layouts built using React.

    App layout components

    The following components can be used to create single page application view layouts. These components have been composed using flexbox.

    Container - The application container which wraps all other app layout components

    Canvas - The main content area

    Pane - Additional regions that can be added to the left and/or right of the canvas

    Row - Used to create sections of pane or canvas content

    Page layout components

    The following components can be used to compose a page layout. Each component includes properties which can be custom configured to each use case. These components have been composed using CSS grid.

    Page - The page layout is designed to create the primary view. It manages page margins and the overall content width.

    Grid - The grid component defines a region for column components to reside.

    Column - The column creates regions in a grid and can be configured in many powerful ways to support even the most complex layouts. Certain configuration options can be assigned either a single value, assigned consistently, or an array of values treated as breakpoint specific assignments. The first value applies to the lowest breakpoint and the last value to the highest breakpoint. This feature enables staggering user interface changes for each breakpoint with simple configuration.

    -ms-grid support

    CSS Grid does some amazing things automatically. By default, elements inside an element with display: grid; will be aware of each-other and not overlap. This makes the grid incredibly simple to set up and means you often don’t need to set column configuration values.

    -ms-grid works a little differently, and because of this, if you need to support -ms-grid you will need to be more explicit when defining the configuration options for columns. For instance, if you have two 12 column (full width) Columns, you will explicitly need to assign the second column to the second row. If you don’t, -ms-grid will draw the two Columns in the same row (and overlapping each-other).

    Utilities

    Breakpoint tracker - Given a set of breakpoints, this utility will monitor the width of the browser window and notify subscribers via callback if a known breakpoint threshold has been reached.

    Keywords

    none

    Install

    npm i @microsoft/fast-layouts-react

    DownloadsWeekly Downloads

    60

    Version

    4.12.0

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    60

    Last publish

    Collaborators

    • microsoft1es
    • fastsvc
    • chrisdholt
    • awentzel
    • janechu
    • fluentweb
    • nirice