{"action":"created","issue":{"url":"https://api.github.com/repos/joomla/joomla-cms/issues/15225","repository_url":"https://api.github.com/repos/joomla/joomla-cms","labels_url":"https://api.github.com/repos/joomla/joomla-cms/issues/15225/labels{/name}","comments_url":"https://api.github.com/repos/joomla/joomla-cms/issues/15225/comments","events_url":"https://api.github.com/repos/joomla/joomla-cms/issues/15225/events","html_url":"https://github.com/joomla/joomla-cms/pull/15225","id":220980615,"number":15225,"title":"[4.0] A Joomla UI Kit ","user":{"login":"ciar4n","id":2803503,"avatar_url":"https://avatars1.githubusercontent.com/u/2803503?v=3","gravatar_id":"","url":"https://api.github.com/users/ciar4n","html_url":"https://github.com/ciar4n","followers_url":"https://api.github.com/users/ciar4n/followers","following_url":"https://api.github.com/users/ciar4n/following{/other_user}","gists_url":"https://api.github.com/users/ciar4n/gists{/gist_id}","starred_url":"https://api.github.com/users/ciar4n/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ciar4n/subscriptions","organizations_url":"https://api.github.com/users/ciar4n/orgs","repos_url":"https://api.github.com/users/ciar4n/repos","events_url":"https://api.github.com/users/ciar4n/events{/privacy}","received_events_url":"https://api.github.com/users/ciar4n/received_events","type":"User","site_admin":false},"labels":[{"id":444033883,"url":"https://api.github.com/repos/joomla/joomla-cms/labels/PR-4.0-dev","name":"PR-4.0-dev","color":"ededed","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":20,"created_at":"2017-04-11T14:57:59Z","updated_at":"2017-04-12T15:21:44Z","closed_at":"2017-04-12T15:12:53Z","pull_request":{"url":"https://api.github.com/repos/joomla/joomla-cms/pulls/15225","html_url":"https://github.com/joomla/joomla-cms/pull/15225","diff_url":"https://github.com/joomla/joomla-cms/pull/15225.diff","patch_url":"https://github.com/joomla/joomla-cms/pull/15225.patch"},"body":"I realise this idea is not a new idea however here is my take on it...\r\n\r\nJoomla views are currently tightly bound to Bootstrap. As heavily discussed in the past this presents a number of difficult issues. If you examine the views however its use for the framework is minimal. This PR creates a UI kit tailored specifically for the Joomla views. The intent here is to create a UI kit small enough that it can be loaded along side any frontend framework. This decouples the Joomla views from the frontend template giving total freedom to template developers regarding if and what frontend framework they wish to use (Bootstrap, UIKit, Pure CSS, Semantic UI, Foundation… the list goes on).\r\n\r\n### How big is it\r\nNot very (currently 18kB)… \r\n\r\n![uikit](https://cloud.githubusercontent.com/assets/2803503/24915341/cc386bfa-1ece-11e7-9cf6-d497877d8c01.png)\r\n\r\n\r\n### Pros\r\n\r\n- **Joomla views not bound to a specific mainstream frontend framework.**\r\nThe Joomla views will function alongside any frontend framework or indeed no framework at all.\r\n\r\n\r\n- **Minimal B/C break for Joomla 4**\r\nOlder templates based on Bootstrap 2.3 or 3 can still load the older framework with no ill effect to the views.\r\n\r\n\r\n- **Minimal Size**\r\nAs we are only loading what is needed, the Joomla UI kit is relatively small (currently less than 18kB compared to the 150kB of the standard Bootstrap CSS). Basic sites can freely disable unused components/elements of their frontend framework without any ill effect to the views. \r\n\r\n- **Less CSS Overrides**\r\nSomes instances exists where Bootstrap needs to be overridden in the template to suit Joomlas output. A UI kit would avoid this as it would be specific for Joomla.\r\n\r\n- **Less future B/C breaks**\r\nFrontend frameworks change. At least with a Joomla UI kit we can control how it changes. Once a markup and class naming is decided I can’t imagine much reason for them to change considering the elements involved. If they do then we can coincide these changes with major releases.\r\n\r\n### Cons\r\n\r\n- **Maintenance**\r\nPersonally I don’t think this is a big issue as the vast majority of the kit is made up of basic form elements which will require little or no maintenance. \r\n\r\n- **Edit all views**\r\nHas to be done anyways for Joomla 4\r\n\r\n- **Extra resource to load**\r\nTrue however in the worst case scenario with a full frontend framework (current scenario) and the Joomla UI Kit, the extra size is minimal (currently 18kB). As already stated, the option will be open to freely disable parts of a user’s frontend framework. The UI kit is an extra resource however overall will more likely reduce the CSS loaded. \r\n\r\n- **No grid**\r\nNot really an issue as the default views have little use for it. I have included a basic column framework as a replacement.\r\n\r\n- **Documentation**\r\nThe UI kit will have to be heavily documented. I am happy enough doing this myself.\r\n\r\n### What is included (currently)\r\n\r\n- Columns\r\n- Tables\r\n- Forms\r\n- Buttons\r\n- Buttons Groups\r\n- Nav\r\n- Pagination\r\n- Badges\r\n- List Groups\r\n- Description Lists\r\n-- Utility Classes\r\n-- Flex\r\n-- Spacing (minimal)\r\n-- Clearfix\r\n-- Floats\r\n-- Sizing (minimal)\r\n\r\n### What is missing\r\nSome elements that are currently used in the views have been left out. The intent would be to simplify some views as they are rewritten. Missing elements can be created where there is a need for them (tabs, accordions, alerts, tooltips, elements designed specifically for Joomla requirements). I’d estimate that if all was added you could expect to add another 10-15kB (CSS) to the kit along with some JS. However my hope would be to reconsider/simplify some views and avoid having multiple UI elements where one could be re-used. \r\n\r\nFor elements that have some more ‘fancy’ functionality, custom elements could be used, as those are specifically created to satisfy such needs..\r\nClass Naming / Markup\r\nCurrently the UI Kit is largely a stripped down version of Bootstrap so the markup in generally is the same. All class names are prefixed with ‘j-’ to avoid conflicts with other frameworks. \r\n\r\nEg. \r\n```\r\n<div class=\"j-input-group\">\r\n    <span class=\"j-input-group-addon\" id=\"something\">Text</span>\r\n    <input type=\"text\" class=\"j-form-control\">\r\n</div>\r\n```\r\n\r\n### Considerations\r\nThe size of the kit could be reduced further with some style changes. Quite a chunk of the CSS of the current kit involves manipulating form element borders.\r\n\r\nA slightly softer approach to this PR would be create overrides within the frontend template for the forms (article edit) rather than applying to ../layouts/joomla/form (??)\r\n\r\nThere is still a dependency on Font Awesome (previously Icomoon).\r\n\r\nIt might be wise to add some reset/normalize CSS ('[class^=j-], [class*=' j-']'). Currently not included.\r\n\r\n### Testing\r\nFor demonstration I have amended some of the views to use the UI kit classes..\r\n\r\ncom_content -> article\r\ncom_content -> category list\r\ncom_content -> category blog\r\ncom_users -> registration\r\ncom_users -> login\r\nmod_login\r\nmod_menu\r\n\r\n![uikit1](https://cloud.githubusercontent.com/assets/2803503/24915461/1df274ae-1ecf-11e7-8d6d-29979d6a386e.png)\r\n\r\n![uikit2](https://cloud.githubusercontent.com/assets/2803503/24915472/24187950-1ecf-11e7-8f84-b9f1d274ccd4.png)\r\n\r\n![uikit3](https://cloud.githubusercontent.com/assets/2803503/24915483/28e1098e-1ecf-11e7-8d2d-13cf1ec961e6.png)\r\n\r\n### Documentation Changes Required\r\nYep\r\n"},"comment":{"url":"https://api.github.com/repos/joomla/joomla-cms/issues/comments/293612674","html_url":"https://github.com/joomla/joomla-cms/pull/15225#issuecomment-293612674","issue_url":"https://api.github.com/repos/joomla/joomla-cms/issues/15225","id":293612674,"user":{"login":"Bakual","id":1018684,"avatar_url":"https://avatars1.githubusercontent.com/u/1018684?v=3","gravatar_id":"","url":"https://api.github.com/users/Bakual","html_url":"https://github.com/Bakual","followers_url":"https://api.github.com/users/Bakual/followers","following_url":"https://api.github.com/users/Bakual/following{/other_user}","gists_url":"https://api.github.com/users/Bakual/gists{/gist_id}","starred_url":"https://api.github.com/users/Bakual/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bakual/subscriptions","organizations_url":"https://api.github.com/users/Bakual/orgs","repos_url":"https://api.github.com/users/Bakual/repos","events_url":"https://api.github.com/users/Bakual/events{/privacy}","received_events_url":"https://api.github.com/users/Bakual/received_events","type":"User","site_admin":false},"created_at":"2017-04-12T15:21:44Z","updated_at":"2017-04-12T15:21:44Z","body":"> So I guess this confirms Joomla is using Bootstrap 4 in the layouts? Either ways it should probably be decided soon.\r\n\r\nYes, Joomla 4 will use Bootstrap 4. It is already merged into 4.0 (https://github.com/joomla/joomla-cms/tree/4.0-dev/media/vendor/bootstrap)"}}
{"actor":{"display_login":"Bakual"}}