outsystems 10 - 19 june 2017 silk ui web cheat sheet · 2020. 5. 26. · silk ui web cheat sheet...

SILK UI WEB Cheat Sheetsilkui.outsystems.com OutSystems 10 - 19 June 2017

Info

Modal Panel Post Section Section Expandable

Separator Tooltip

Carousel

CONTENT (23)

DropdownButtonGroup Calendar IconDropdown RangeSlider Search Select2 ToggleButton Video

CONTROLS (13)

Badge Counter IconBadge ProgressBar TileIcon TileIcon Text

TileNumber UserInitials

DATA (8)

LayoutEmailEmailSectionEmail3Rows

EMAIL (3)

BottomMenu GlobalSearch ListItem ListItem Group

ListItem Toggle

MOBILE (5)

LayoutLogin LayoutPopup

LAYOUT (2)

DisplayOn Device

LoadOn Visible

Responsive Images

ToggleOn Device

RESPONSIVE (6)

Breadcrumbs NavigationBar SectionIndex Tab’s Wizard

NAVIGATION (5)

Character Count

FieldSet Iframe ScrollTo Element

StackedIcon VerticalAlign

UTILITIES (7)

STRUCTURE (10)

Accordion Alert Ballon BlankSlate Box Bullets ButtonsArea

USEFUL CLASSES

Background Colors

.Transparent

.Yellow

.Red

.Plum

.Green

.Turquoise

.DarkBlue

.Gray

.White

.Orange

.DarkRed

.DarkPlum

.LightGreen

.Blue

.Silver

.Black

Text Colors

.Text_white

.Text_orange

.Text_darkRed

.Text_darkplum

.Text_lightGreen

.Text_silver

.Text_black

.Text_yellow

.Text_red

.Text_plum

.Text_green

.Text_turquoise

.Text_darkblue

.Text_gray

.Button

.Button.Cancel

.Button.Is_Default

.Button.Sucess

.Button.Danger

.Button.Link

.Button.Icon

.Button.Small

.Button.Load

Buttons

View

Cancel

View

Save

Create

Load

Delete

Link

.Align_topVertical align to the top

.Align_bottomVertical align to the bottom

.FirstSet element margin-left to 0px

.Float_rightFloat right element

.HiddenOnPhoneHide the element in Phone

.HiddenOnDesktopHide the element in Desktop

.noSwipeDisable the swipe gesture in the element

.PHHide in the case of element is empty

.Print_visibleShow when printing the page

.Text_NoWrapSpecify that the content insidea cell should not wrap

.ClearfixClear float in child elements

.Align_middleVertical align to the middle

.Float_leftFloat left element

.FullWidthFull button width

.HiddenOnTabletHide the element in Tablet

.LastSet element margin-right to 0px

.noTransitionRemove all transitions

.Print_hiddenHide when printing the page

System.OpenSans_Regular (Example)

.OpenSans_Italic (Example)

.OpenSans_Bold (Example)

.OpenSans_Light (Example)

.Image_circle

.Image_rounded

.Image_thumb

Typography

Image Style

.Heading1

.Heading2

.Heading3

.Heading4

.Bold

.Italic

.Underline

.code

.Text_Error

.Text_note

.Text_large

.TEXT_UPPERCASE

.Label

.Link

.Text_small

Text

Cards

FileUpload

MoveOnDevice

FlipContent

Columns2 Columns3 Columns4 Columns5 Columns6 MediumRight Column

MediumLeft Column

SmallRight Column

SmallLeft Column

Gallery

InputIcon

Responsive TableRecords

COMPONENTS (1)

InApp Notifications