Add a CSS codelab #2646
Add a CSS codelab #2646
Conversation
|
I think @maribethb is planning to look at this, so de-assigning myself unless I'm told that I need to review this. |
codelabs/css/css.md
Outdated
| ### What you'll need | ||
|
|
||
| - A browser | ||
| - Basic knowledge of HTML, CSS, and JavaScript. |
There was a problem hiding this comment.
Add: Basic knowledge of SVG elements.
codelabs/css/css.md
Outdated
| others use `fill` and `stroke`. This is because `background-color` and `color` | ||
| apply to HTML elements, like the `<div>` used by the toolbox, and `fill` and | ||
| `stroke` apply to SVG elements, like the `<path>` used by the flyout background. | ||
| (An exception to this is the `<svg>` element, which uses `background-color` and |
There was a problem hiding this comment.
It's confusing to say that fill and stroke apply to SVG elements, except for the <svg> element.
How about:
"An exception to this is the top-level <svg> element that contains Blockly, which uses background-color and color."
| ### The !important declaration | ||
|
|
||
| You might have also noticed that some rules use an `!important` declaration | ||
| while others don't. This is because Blockly sets colours in several different |
There was a problem hiding this comment.
"This is because Blockly sets colours in several different ways" -> "This is because Blockly dynamically creates and sets colours of some elements based on block definitions."
There was a problem hiding this comment.
I'm not sure I understand this comment. The point here is that Blockly uses several different techniques to set colours and you have to understand which one is being used in order to override it. It doesn't matter if the colour was set dynamically or statically -- the user is looking at/overriding the end state. Also, this applies to all colours, not just those used in blocks.
There was a problem hiding this comment.
Fair, the current wording is fine.
codelabs/css/css.md
Outdated
| cases, you will need to | ||
| [search Blockly's rules](https://developers.google.com/blockly/guides/configure/web/appearance/css#blockly_css_rules). | ||
|
|
||
| A simpler rule of thumb is that if your rule doesn't work, you probably need an |
There was a problem hiding this comment.
Oof. I'd prefer not to give this advice, since CSS best practices involve not using !important
I would prefer no advice here, just the listing of different ways that styles are set (as above).
codelabs/css/css.md
Outdated
| ``` | ||
|
|
||
| The `categorystyle` property assigns a style that is used by a theme. Because | ||
| you're not using themes to assign category colours, replace this with a |
There was a problem hiding this comment.
"Because you're not using themes to assign category colours, you don't need the categorystyle property. Delete it and add a cssConfig property that [...]"
codelabs/css/css.md
Outdated
| presentation attributes, which are easily overridden. | ||
|
|
||
| (Note that different renderers use different numbers of `<path>` elements to | ||
| draw a block. The renderer used in this codelab (thrasos) uses a single `<path>` |
There was a problem hiding this comment.
Capitalize Thrasos and Zelos, and add a link to the renderer documentation.
There was a problem hiding this comment.
Or perhaps move this note to the top of the block colouring section, since you also mention renderer-specific changes in the next subsection.
There was a problem hiding this comment.
Added link and capitals. Moved the more general part of the note to the start of the block fill and stroke section.
codelabs/css/css.md
Outdated
| } | ||
| ``` | ||
|
|
||
| Refresh your page and notice the change in colour: |
There was a problem hiding this comment.
"and notice that the workspace background is now orange:"
codelabs/css/css.md
Outdated
| ``` | ||
|
|
||
| To see your new colours, reload the web page, drag the `if do` block out again, | ||
| and reopen the mutator. You should see something like this: |
There was a problem hiding this comment.
"You should see that the mutator workspace background colour is orange, matching the main workspace background:"
codelabs/css/css.md
Outdated
| } | ||
| ``` | ||
|
|
||
| Now reload your page. You should see a Blockly editor with Halloween colours: |
There was a problem hiding this comment.
"You should see a Blockly editor with a yellow toolbox and yellow scrollbars:"
codelabs/css/css.md
Outdated
| } | ||
| ``` | ||
|
|
||
| Refresh your web page and open the **Logic** category. You should see something |
There was a problem hiding this comment.
"You should see that the logic blocks are now rendered in an autumnal brown instead of blue:"
5 participants
The basics
The details
Resolves
Adds a CSS codelab.
Proposed Changes
Adds a CSS codelab in the form of a Markdown file, PNG screenshots, and starter and completed code.
Reason for Changes
We need a CSS codelab.
Test Coverage
Manually tested.
Documentation
Included.
Additional Information