Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: store.home must contain responsive layouts mobile and desktop :white_check_mark: Desktop's image and rich text must be correctly stated :white_check_mark: Mobile's image and rich text must be correctly stated :white_check_mark: Rich-text Mobile props must be correclty declared :white_check_mark: Rich-text Desktop props must be correclty declared :white_check_mark: Image Mobile props must be correclty declared :white_check_mark: Image Desktop props must be correclty declared
Making your content responsive
:sparkles: Branch: responsiveimage
Introduction
An e-commerce's homepage is always the client's first contact with the brand. Therefore, it's common for retailers to want to establish direct communication with their users at this strategic point in time during navigation.
Several components in Store Framework serve this scenario, such as the Info Card, which we looked at previously, and the Rich Text.
As we have seen during step three, the Rich Text is responsible for transforming texts into HTML elements, having the big advantage of reading Markdown. This give the component the flexibility to accept various text structures, allowing retailers to build their communication in more direct and clear way.
Configuring the Rich Text
Just as with its functionality, the Rich Text configuration is also simple.
The same way that "Hello, world!" was created, we can create a block implementation example using written text in markdown format. For example:
As previously stated, using Markdown allows for more component flexibility. However, it may also lead to your alteration in your rendering, according to the device used by the user.
For example: the above sentence (
# Your Coffee, Your Way \n ### New Coffee Makers Collection
) can be use a markdown that's suitable for desktop, but not necessarily for mobile as well (whose screen size is smaller).To resolve this scenario and make the behavior more adaptable to other devices, we should use the Responsive Layout.
First, we must declare the blocks in the
store.home
template:"responsive-layout.desktop#desktop", "responsive-layout.mobile#mobile"
Them, we must declare these blocks as follows:
As we interpret the code above, we can notice two Rich Text configurations, built based on
responsive-layout.desktop#desktop
andresponsive-layout.mobile#mobile
.Activity
During this activity, we will play around a little with the Rich Text markdown and learn how to use it with the Image component. All the while using Responsive Layout, of course!
Desktop:
Mobile:
home.jsonc
and declare theresponsive-layout
block in thestore.home
template;rich-text#mobile
, alter the markdown of the first sentence toh3
and of the second toh4
;image#desktop
as a child ofresponsive-layout.desktop#desktop
. Repeat the process withimage#mobile
andresponsive-layout.mobile#mobile
;100%
.:information_source: Remember to access the Responsive Layout documentation if you have any question during your activity.
If you're still unsure as to how to send your answers, click here.