You use CSS Grid layout in a Turnkey ViewModel to render controls at the positions defined by the ViewModel, and this page is for developers configuring that layout behavior.

CSS Grid in Turnkey

CSS Grid is the layout renderer used for controls placed in a ViewModel. It reads the placement information from the ViewModel and renders the HTML using CSS Grid rather than the former Bootstrap-based layout.

Bootstrap is deprecated and is no longer in use. See Documentation:Bootstrap for the deprecation notice.

CSS Grid is particularly useful when you create generic components. The component does not need to know the surrounding HTML layout; the CSS Grid placement values from the ViewModel manage where the component is placed.

Configure CSS Grid for one ViewModel

To explicitly enable CSS Grid for one ViewModel, add the following tagged value on the ViewModel level in MDriven Designer:

CSSGrid=true

For example, add CSSGrid=true to a ViewModel named CustomerEdit when that ViewModel must use CSS Grid regardless of the default configuration.

Use the ViewModel-level tagged value when the layout decision belongs to a specific ViewModel rather than to the whole Turnkey application.

Configure CSS Grid as the default

To use CSS Grid by default for Turnkey rendering, set the following value in the TurnkeySettings file:

<UseCSSGridByDefault>True</UseCSSGridByDefault>

With this setting, Turnkey renders ViewModels with CSS Grid unless a ViewModel explicitly has the tagged value CSSGrid=false.

Configuration	Scope	Result
CSSGrid=true tagged value	One ViewModel	Explicitly enables CSS Grid for that ViewModel.
<UseCSSGridByDefault>True</UseCSSGridByDefault>	Turnkey application	Uses CSS Grid by default.
CSSGrid=false tagged value	One ViewModel	Explicitly overrides the application-level CSS Grid default for that ViewModel.

Choose the right scope

Use the application setting when CSS Grid is the standard layout policy for the application. Use a ViewModel tagged value when one ViewModel needs an explicit choice.

For example:

• Set UseCSSGridByDefault to True when new and existing ViewModels should use CSS Grid by default.
• Add CSSGrid=true to CustomerEdit when you want that ViewModel to state its layout choice explicitly.
• Add CSSGrid=false only when an application-wide CSS Grid default must be overridden for a particular ViewModel.

Style controls placed by CSS Grid

CSS Grid controls are rendered as control containers that can be targeted with CSS. Turnkey applies the tk-component class to all BEM blocks placed by the CSS Grid for a ViewModel.

For example, this rule targets labels used by Turnkey controls placed by CSS Grid:

.tk-component label {
  /* control-label styling */
}

Turnkey uses the BEM (Block, Element, Modifier) naming convention for control markup. A text field, for example, has a block class such as tk-text-field, with element classes such as tk-text-field__label and tk-text-field__native. Style references added in MDriven Designer are emitted as modifier classes on the relevant block.

Keep layout and control styling separate:

• Use CSS Grid and ViewModel placement to determine where a control appears.
• Use BEM classes and style references to change the appearance of that control.
• Use a ViewModel-specific CSS selector when a rule must apply only to one ViewModel. Documentation:Layout and CSS describes the surrounding Turnkey layout and ViewModel-specific CSS classes.

Deprecated setting

Span.CSSGrid is deprecated and defaults to true. Do not use it as the configuration mechanism for new work.

See also

• Documentation:CSS BEM
• Documentation:Layout and CSS
• Documentation:Bootstrap
• Documentation:Span.CSSGrid