{"id":4857,"date":"2022-12-08T16:56:24","date_gmt":"2022-12-08T16:56:24","guid":{"rendered":"https:\/\/learncode.tinjurewp.com\/?p=4857"},"modified":"2023-01-15T10:45:12","modified_gmt":"2023-01-15T10:45:12","slug":"part-2-json-elements-using-json-elements","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/part-2-json-elements-using-json-elements\/","title":{"rendered":"Part 2: JSON Elements: Using JSON Elements"},"content":{"rendered":"

Notes: This post is part 2 <\/strong>of my proof-of-concepts learning note post for CSS-Tricks article<\/a> on the JSON elements. Some screenshot images used here are credited to the CSS-Tricks.<\/p>\n

In the previous section, we briefly overview the JASON elements<\/a> and discussed how they are used in a theme.json<\/code> file. In this section, let’s expand JSON elements use cases at both the top-level (Global) and block-level. At the top-level, they are used using an element selector, and at the block-level, the element to used will be “the element\u2019s appended to the corresponding block”.<\/p>\n

Learning Goals<\/strong>
\nPart 1: JSON elements API – An Introduction and Overview
\nPart 2<\/strong>:Using JSON Elements (this post<\/strong>)<\/div>\n

In this section, lets look at briefly how JSON styles are used in top (global) label and block level.<\/p>\n

Styling elements globally<\/h6>\n

Let’s look at the new default TT3 theme and examine how its buttons elements are styled. The following is the slim-down theme.json<\/code> file of the TT3 theme showing the global elements styles section, but you can find the original code here<\/a>.<\/p>\n

In the TT3 theme,\u00a0 all buttons are styled at the top<\/a> (global) level. The following screenshot shows how different button blocks (default button<\/em>, Search<\/em>, File<\/em>, and Comments<\/em>) look uniform with similar lime green (primary, hex: #9DFF20<\/code><\/span>) background color.<\/p>\n

\"\"