The better our blocks and themes look the better the web looks. Let's take some existing properties and democratize the ability to build systems that look like them. This will help in my own class as well.
https://youtu.be/Ilw51giJWB0 - me building polaris-story-card, showing the process and discussing considerations when implementing in a demonstration space
polaris-chip (we'll build this together in class)
a "chip" or "tag" for a resource
these are simple in structure but need to look good when used stand alone or in a group
display flex / inline-flex
this optionally has a link
it should use some of the states from the 'cta' as inspiration (tho the states don't all need to be implemented, just a light and dark tone chip for now)
video building this from class:
Atoms to build Fall 2023
polaris-cta - Team 1
a button that matches design requirements seen on the https://psu.edu website and various interior pages
Here are the variations to be supported
Ensure you also hit the focus, hover and active (clicking) states
if these don't make sense on the current website, then try to improve them (for example, focus state should do the same as hover but with the outline attribute on it via css to provide additional highlighting of what's activated)
this has a link to what it should go to and some attributes as shown for variations that help modify the CSS contextually. (think :host([light]) { style reflected properties to make the css selector match state)
this also should take the text in via slot
This is an 'inline-flex' style element
Demo should be something like this from the site:
Demo Each of the above should be shown in all the different 'states' of implementation.
note the variations / properties involved; text that is variable (so slot)
theme for blue on white, white on navy, navy on white
font-size / padding / spacing match
optional link support (note icon in bottom corner, use simple-icon library for this)
optional image support with background-color: rgba(0, 3, 33, 0.5); to ensure white text shows up accessibly on top regardless
Demo: you need to make the tile, but then also make the tiles correctly stack up like this in rows. Your demo should attempt to be as close to this image as possible with stateful properties for the variations involved
date should be format 12/12/2019 and calculate the label of the date. (internet has lots of ways to do this tho could be a good project for a specific member of team)
date chip should be it's own element that is pulled into the card so it can also be repurposed
this may seem like more work, but actually it's EASIER to do when we have clear scoping boundaries. This is a perfect opportunity to divide labor / focus among pod
focus / hover state alignment (not that it alters css applied to the image)
link that goes to article in question
Demo: Lay out all 3 next to each other as the demo
btopro
commented
1 year ago
The better our blocks and themes look the better the web looks. Let's take some existing properties and democratize the ability to build systems that look like them. This will help in my own class as well.
https://youtu.be/Ilw51giJWB0 - me building polaris-story-card, showing the process and discussing considerations when implementing in a demonstration space
polaris-chip (we'll build this together in class)
Atoms to build Fall 2023
polaris-cta - Team 1
outlineattribute on it via css to provide additional highlighting of what's activated):host([light]) {style reflected properties to make the css selector match state)polaris-tile-fact - Team 2
https://www.psu.edu/this-is-penn-state/facts-and-rankings/ - many shown here A small square that has a lot of variations to ensure accessibility, linking elsewhere, and communicating the brand
background-color: rgba(0, 3, 33, 0.5);to ensure white text shows up accessibly on top regardlesspolaris-card-news - Team 3
https://hr.psu.edu/
12/12/2019and calculate the label of the date. (internet has lots of ways to do this tho could be a good project for a specific member of team)