EverWeb Cookbook
The container has a two column grid layout with perspective. The content has two <figure> elements.
The right hand one is flipped using a transform and has an <article> with a heading, text and an optional link.
Cookbook & Recipe Display
Thai Red Curry
Ingredients
- 1½ cups brown jasmine or long-grain brown rice
- 1 tablespoon coconut oil or olive oil
- 1 small white onion, chopped (about 1 cup)
- Pinch of salt
- 2 cloves garlic - pressed or minced
- 1 red and 1 green bell pepper, sliced into thin strips
- 3 carrots, peeled and sliced
- 2 tablespoons of Thai Red Curry
- 1 can (14 ounces) coconut milk
- ½ cup water
- 1½ cups packed thinly sliced kale
- 1½ teaspoons brown sugar
- 1 tablespoon tamari or soy sauce
- 2 teaspoons rice vinegar or fresh lime juice
Notes
You can change the vegetables as long as you slice them so they're all pretty small and about the same size.
Try broccoli, cauliflower, mushrooms, diced butternut or sweet potato, sliced zucchini and/or yellow squash.
Readily available store-bought Thai red curry paste adds characteristic Thai flavor. Check to make sure the paste is suitable for vegan food.
Method
To cook the rice, bring a large pot of water to boil. Add the rinsed rice and continue boiling for 30 minutes, reducing heat as necessary to prevent overflow. Remove from heat, drain the rice and return the rice to pot. Cover and let the rice rest for 10 minutes or longer, until you're ready to serve. Just before serving, season the rice to taste with salt and fluff it with a fork.
Curry
To make the curry, warm a large skillet with deep sides over medium heat. Once it is hot, add the oil. Add the onion and a sprinkle of salt and cook, stirring often, until the onion has softened and is turning translucent, about 5 minutes. Add the ginger and garlic and cook until fragrant, about 30 seconds, while stirring continuously.
Add the bell peppers and carrots. Cook until the bell peppers are fork-tender, 3 to 5 more minutes, stirring occasionally. Then add the curry paste and cook, stirring often, for 2 minutes.
Next
Add the coconut milk, water, kale and sugar, and stir to combine. Bring the mixture to a simmer over medium heat. Reduce heat as necessary to maintain a gentle simmer and cook until the peppers, carrots and kale have softened to your liking, about 5 to 10 minutes, stirring occasionally.
Finally
Remove the pot from the heat and season with tamari and rice vinegar. Add salt to taste. If the curry needs a little more punch, add ½ teaspoon more tamari, or for more acidity, add ½ teaspoon more rice vinegar. Divide rice and curry into bowls and garnish with chopped cilantro and a sprinkle of red pepper flakes, if you want. If you love spicy curries, serve with sriracha or chili garlic sauce on the side.
3D Book
The image has alt text and a control for adding padding. The caption has its own controls for font size, color, abckground color and opacity and for vertical position - top, center or bottom.
The <article> has its content centered vertically. There are controls for adjusting the padding and item spacing.
The link can be CTA style with a solid background and/or a border. It can be configured to open internal or external pages and has a new wondow option.
3D Effect
The main comtainer has perspective added to it and the <figure> elements are rotated on the Y-axis. The text panel has a negative scaleX to reverse its direction
Offset
When the items are rotated they move apart on the EverWeb design canvas. The "Adjust X" control is used to bring them back together.
Box Shadow
The box shadow is required and is added using the controls for shadow radius, spread, color and opacity.
Break Point
On screen widths below the break point the rotation is removed and the text is inserted below the image.
NOTE The perspective is not rendered when viewed on the EverWeb design canvas so the results need to be viewed on a destop browser and the iOS Simulator.
Accordion Info Card
The item has an image with alt text and an action bar with the main heading and a toggle tab. The content has a grid layout with two columns and an optional link and can show or hide on page load.
Image
The image is inserted in two sizes with the smaller one being loaded on mobile devices. The small image should be about half the size of the larger one.
Main Heading
The main heading can be aligned left or center and will align left on screen widths below the break point. The toggle tab has controls for setting the icon color and background color.
Columns
The relative column widths can be adjusted and the column width list can be at the top or bottom on screen widths below the break point.
Each column has a heading and text with styled spans if required and the left column has an optional list
Link
The optional link can open internal or external pages. In this case it is linked to a zipped PDF which will download on click.
The PDF was added to the external files and its file path found by right clicking its file name, copying the relative file path and inserting it into the URL box in the widget settings.