ClassName Styles

ClassName

Unlike in traditional React environments, by default, className isn't passing a static user-generated string. Instead Clutch generates a unique className for you on the spot that allows you to target the selected component intuitively. Clutch maximizes the reusability of design by creating and combining components, not by having users name a bunch of class names and worrying about all the maintenance and cleanup involved when going down that route.

Add Item

This will merge in class names.
You can add them all on one row, or add several rows of strings. The second option may be more convenient for binding.

Example:
If you add a className of warning and disabled as an expression on one line, you will be expected to return both warning and disabled.

If you were to break it up into two rows, you could make binding easier now that warning and disabled are separate.

Editing styles

The styling panel can be reached by clicking the styles tab in the properties pane or by clicking "edit styles" from a "className" control on the properties pane.

The styling controls are made up of the following sections:

  • Property - Since multiple style-able properties may exist on a single component, this section lets you view the current targeted property, and if available, select a different style-able property to target.
  • Rules - This section lets you specify CSS rules on which to apply the CSS from the widget. Users can add several rules and set assorted styles amongst them including media queries and complex selectors.

Rules

The className control also allows for complex rules, both media queries, and selectors, to be used. By default, the stylesheet targets the current component.

&

πŸ“˜

&

Clutch uses a CSS pre-processor* to enable creators to use some powerful features. As such, when you see ampersand [&] it simply means the "current parent' to your styling.

*CSS pre-processor: CSS is responsible for font size, color, element positioning, responsiveness, and many other aspects of a site’s overall look.

Writing direct CSS on style sheets is good for small web applications, but when you are developing a large user interface that requires heavy style sheets, using a CSS preprocessor is the best solution. CSS preprocessors are special CSS files that contain variables, functions, mixins, and other functionalities which are not possible with basic style sheets. They offer an easy solution that enables scalability with efficiency. Some popular CSS preprocessors are SASS/SCSS, LESS, etc.

For example, if in a box, adding the rule [& a:hover] would create a rule for all anchor tags that are direct descendants of the current box. When a user now hovers over our Samuel L. Jackson link the link will turn red.

Media Queries

@media

πŸ“˜

Using media queries

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

For more information go to: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Below is an example of using @media and how it affects the frame.

when frame-2 width is more than 1000px the background-color is set to bluewhen frame-2 width is more than 1000px the background-color is set to blue

when frame-2 width is more than 1000px the background-color is set to blue

Frame-2 width now greater than 1000px and reverts back to the parent background-colorFrame-2 width now greater than 1000px and reverts back to the parent background-color

Frame-2 width now greater than 1000px and reverts back to the parent background-color

Search and Filtering - Search and filtering lets you narrow down your available CSS properties by searching through your active filter or switching filters from All to Applied, limiting the view only to those properties actively in use.

  • Properties - these are the CSS controls themselves each control features:
  • an intuitive control for setting the value

Context Menu

  • Documentation in the context menu for the selected property
documentation in the context menu for the selected propertydocumentation in the context menu for the selected property

documentation in the context menu for the selected property

  • Link to MDN for each property in the context menu
link to MDN for each property in the context menulink to MDN for each property in the context menu

link to MDN for each property in the context menu

  • Label highlighting to indicate property state (set/unset)

Raw CSS

If you prefer typing in CSS or want to view or Copy and Paste, users can use the raw CSS section to make changes.