getting started
foundation
- Colors
- Grid
- Spacing
- Type
layouts
- Application Shell
- Page
- Section
- Panel
- Columns
components
- Action Bar
- Alert
- Button
- Breadcrumb
- Calendar
- Combobox Input
- Contextual Menu
- Date Picker
- Dropdown
- Forms
- Identifier
- Icon
- Image
- Input Group
- Inline Help
- List Group
- Link
- Loading Spinner
- Localization Editor
- Mega Menu
- Menu
- Modal
- Multi Input
- Pagination
- Popover
- Search Input
- Shellbar
- Side Navigation
- Status Indicators
- Table
- Tabs
- Tile
- Tile Grid
- Time
- Time Picker
- Token
- Toggle
- Tree
resources

Grid

Available since 1.0.0

Fiori Fundamentals uses responsive grid system with a 12-column flow layout. It is used to create flexible layouts for various screen sizes and device types.

Tablet example grid

default grid

Breakpoints

Available since 1.0.0 Last updated 1.4.0

When considering responsive views we follow a mobile-first approach where screens are built for small screens and adapted for larger screens. This means that S is always the default and we modify for M and above.

Size	Target Devices	Breakpoints	Margin	Gutter
S	Portrait Phone	<600px	8px	8px
M	Landscape Phone, Portrait Tablet	600-1023px	16px	16px
L	Landscape Tablet, Small Laptops	1024-1439px	32px	16px
XL	Pro Laptops, Desktop	1440-1919px	32px	20px
XXL	Pro Displays	1920px	48px	20px