What is the origin of bento?
"A bento is a single-portion take-out or home-packed meal of Japanese origin, often for lunch, typically including rice and packaged in a box with a lid (often a segmented box with different parts of the meal placed in different sections).
"A traditional bento typically includes rice or noodles with fish or some other meat, often with pickled and cooked vegetables in a box. Containers range from mass-produced disposable containers to hand-crafted lacquerware. Dividers are often used to separate ingredients or dishes, especially those with strong flavors, to avoid them affecting the taste of the rest of the meal.
Bento are readily available in many places throughout Japan, including convenience stores, bento shops (弁当屋, bentō-ya), railway stations, and department stores. However, Japanese homemakers often spend time and energy on carefully prepared bento for their spouses, children, or themselves."
From Wikipedia
Theme design and construction
CSS rules
First, CSS color rules were needed for text, etc. in the bento content areas and for outside those areas. Not all text, buttons, and so on are in a content area as that would be too rigid and not so interesting. So the content areas use the standard Bootstrap and Tiki color rules, which switch color mode just like a standard Tiki setup.
Outside the content areas, the page background surrounding the content areas uses another set of CSS rules that don't change when the color mode switches. Actually, for variety, there could be a set of rules for a light overall background and one for a dark overall background. The design motivation for Tikiben at least initially was to use a non-changing global background color.
Additional SCSS file
The Tikiben theme has an additional SCSS file, _color-mode-elements_and_exceptions.scss, that contains:
- CSS for color mode exceptions, that is, mainly for text and links that display directly on the global background color
- Color mode content selectors, which are the areas that change their background and foreground colors depending on the color mode and use the standard Bootstrap and Tiki color styles
- CSS rules for when a wiki article has no background, which cover the elements normally within the wiki content area but that display on the global background when a transparent background for wiki pages
The colors for the unique aspects of this theme are defined in the _css-variables.scss file and are specified using CSS variables.
Of interest to developers: Minor changes or additions in template files
To implement the Tikiben style of defining content areas, page elements like forms, tables, and tab content panes were used as much as possible. In some cases, the class styling-element was added to the element. This doesn't affect the function of the element; it only marks it as a target for the theme. In some template files, a new div with the styling-element class was added to enclose content when there wasn't a natural container already. Again, this doesn't (or shouldn't) affect the function of the template. There are several other aftermarket themes in development that will also use these classes.
New in Tiki 30
TIKIBEN
The idea of this graphic style is that, like the bento lunch box or tray, instead of everything being in one container, there are compartments or sections for individual items. Tiki already makes that possible to some extent with the three columns, modules and other cards, modules zones, and so on, but this theme (and others that might use it as a model) extends that further in a couple of ways.
How to use the Tikiben theme
"Normal" display
The Tikiben theme is ready to go without any configuration needed, just like all of the themes in the Tiki package. The only difference is that Tikiben by default puts all of a wiki page's content in one "bento compartment".
"Full bento" display
There is an alternative display for more content areas:
- Create a new Tiki category
no-content-bgand assign the page to this category. - Specify
no-content-bgas one of the "Categories to add as CSS classes to body" preference ontiki-admin.php?page=category. - A rule in the Tikiben stylesheet makes exceptions of these pages to the normal application of a background color to the wiki content element of the page.
- Then add divs or other elements with the class
color-mode-content. These will get the color-mode-switching background and foreground colors.
The theme colors can be edited by declaring their new values in the custom CSS textarea of the website's Look & Feel admin page.
Bugs are expected
As this is the first release of the Tikiben theme, there are apt to be some text or links not colored properly, or some admin pages that were missed in the preparation for this type of theme. Please post in Tiki's Matrix chatroom to report any issues.
Pros of Using Bento Grids
- 1. Enhanced Organization and Cohesion: Bento grids bring a high level of organization to web design, allowing for a cohesive presentation of varied content. This segmentation makes it easier for users to digest information in a structured manner.
- 2. Aesthetic Appeal: The symmetry and clean lines inherent in bento grids are visually appealing, providing a neat and professional look that can enhance the visual identity of a website.
- 3. Reduced Scroll Fatigue: By efficiently utilizing space within a single viewport, bento grids can display a significant amount of content, which can reduce the need for excessive scrolling.
- 4. Metaphorical Clarity: The bento box metaphor effectively communicates the concept of a complete and balanced experience, which can be particularly useful for showcasing product features or a portfolio of work.
- 5. Improved Navigation: The predictability and order of bento grids aid in straightforward navigation, as users can easily move from one compartmentalized section to another.
- 6. Compatibility with Responsive Design: Bento grids seamlessly integrate with responsive design principles, facilitating effortless adjustment of a website's layout to accommodate diverse screen sizes and devices.
- 7. Focus on Content: The grid layout emphasizes content without unnecessary distractions, which can be crucial for sites where content is important, such as online galleries or information-driven platforms.
- 8. Facilitates Comprehensive Product Capture: In the context of showcasing products, bento grids offer users the convenience of capturing all essential information at once. With content neatly organized within distinct compartments, users can easily screenshot or save a single view of the grid, ensuring they capture all relevant details without the need for multiple interactions or navigating through various pages.
From Freecodecamp.org
Cons of Using Bento Grids
- 9. Potential Information Overload: While bento grids can reduce cognitive load through organization, there's a risk of cramming too much information into a single screen, potentially overwhelming users.
- 10. Limited Visual Hierarchy: The uniform structure of bento grids can sometimes lead to a lack of visual hierarchy, making it harder for users to determine the importance of certain content over others.
- 11. Considerations Regarding Hick's Law: A densely packed grid presents users with a multitude of options, potentially prolonging their decision-making process. This abundance of choices can result in the paradox of choice, where users experience indecision or slower navigation due to the overwhelming array of options available.
- 12. Design Rigidity: The structured nature of bento grids can sometimes restrict creative design elements and lead to a monotonous user experience if not implemented with variation and dynamic content.
- 13. SEO Challenges: Search engines may have difficulty parsing the relevance of content when it's distributed across numerous grid compartments, potentially impacting SEO if not structured properly.
- 14. Accessibility Concerns: The compartmentalized nature of bento grids might present accessibility challenges, particularly for users who rely on screen readers or keyboard navigation, if not designed with accessibility standards in mind.
From Freecodecamp.org
The Tikiben theme will be available in Tiki version 30. In the meantime, it can be checked out at trunkthemes.tiki.org/Tikiben. (The page will be available after that site updates, and the theme will need to be changed there with the Switch Theme module in the page footer.)