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.
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.
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.
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.
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.
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.
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
- Documentation in the context menu for the selected property
- Link to MDN for each property in the context menu
- Label highlighting to indicate property state (set/unset)
If you prefer typing in CSS or want to view or Copy and Paste, users can use the raw CSS section to make changes.
Updated about 2 months ago