here is a sample template from chameleon
Code: Select all
<li class="o-list-item c-topic-item t-topic-item" role="row">
^ this is CSS an object to be specific!!!!
<li class="o-list-item c-topic-item t-topic-item" role="row">
^ this is CSS an component
<li class="o-list-item c-topic-item t-topic-item" role="row">
^ this is CSS an theme
<time datetime="{{ item.last_time }}" title="{{ item.last_time }}" data-short="{{ item.last_time }}">{{ item.last_time|moment("YYYYMMDD", true) }}</time>
^ PHP ^ PHP ^ PHP ^PHP
<a class="c-subscribe-action{% if not S_WATCHING_TOPIC %} is-active {% endif %}" href="{U_WATCH_TOPIC}" title="{S_WATCH_TOPIC_TITLE}" data-ajax="swap_subscribe" data-swap="subscribe" data-toggle-url="{U_WATCH_TOPIC_TOGGLE}" data-update-all=".c-cubscribe-action">
^ JS also if we have to support a feature without js it will require css classes of js-xxxx
Code: Select all
{{ Icon('iconify', 'fa:chevron-circle-up', '', true) }}<span>{L_BACK_TO_TOP}</span>
^ this is php a twig function!
<button type="button" class="button button-icon-only bbcode-b" accesskey="b" name="addbbcode0" value=" B " onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}">
^ JS all thouygh should not be there
Also still no one here has answered any of the points and benefits laid out in the previous posts the biggest advantage being self documentation and the need to leave a template file. So let me also walk you through that
everything other than html (HTML is onlt the tags them selves anything within an attribute or property is not HTML and is associated to the source it comes from ie css classes are CSS) Is scoped to its specific function to provide the editor (IDE) and developer full benefits
What does this mean in laymen's terms
Here is a list of scopes
- O- CSS Object
- C- CSS Component
- T- CSS Theme
- U- CSS Utility
- IS- CSS Action
- HAS- CSS Action
- JS- CSS JS Hook
- F- Twig Function
- _ CSS Temp Hack
I am a style developer wanting to do something hmm is there a twig function to do this let me see instead of going and digging through documentation all I have to do is type
F-
which gives me a list of all defined twig functions with documentation from the code base docbloc! This is the point of doc blocksWithout this I have to try and guess what a function might be or dig through endless documentation or the entire codebase!!!!