{"id":28,"date":"2020-10-22T17:38:48","date_gmt":"2020-10-22T17:38:48","guid":{"rendered":"https:\/\/documentation.userswp.io\/article\/ayecode-user-interface-aui\/"},"modified":"2025-03-26T15:39:27","modified_gmt":"2025-03-26T15:39:27","slug":"ayecode-user-interface-aui","status":"publish","type":"gd_place","link":"https:\/\/userswp.io\/documentation\/article\/first-steps\/ayecode-user-interface-aui\/","title":{"rendered":"AyeCode User Interface (AUI)"},"content":{"rendered":"<p>\n\t AyeCode User Interface, or AUI, is an easy to use and nimble UI design based on the popular Bootstrap framework. AyeCode UI loads the bare minimum amount of CSS and JS, thereby providing better pagespeed results and an overall faster performance.&nbsp;<\/p>\n<p>\n\t More importantly, AUI offers a neat look across all browsers and devices, regardless of which theme you are using.&nbsp;<\/p>\n<h2> How to Activate AUI in UsersWP?&nbsp;<\/h2>\n<section class=\"alert alert-info\">\n\t If you are a new user, AUI is activated by default (for all the latest versions of UsersWP).&nbsp;<\/section>\n<p>\n\t For existing UWP users, the legacy styles are retained and AUI is deactivated by default to avoid messing up your site design. You can manually switch to AUI as follows:&nbsp;<\/p>\n<dl>\n<dt>\n\t1\n\t<\/dt>\n<dd>\n\tHead to <strong>UsersWP &gt; Settings &gt; General &gt; Developer.&nbsp;<\/strong> <\/dd>\n<dt>\n\t2\n\t<\/dt>\n<dd>\n\tSelect <strong>Bootstrap <\/strong>in <strong>Default Design Style <\/strong>and save your settings.&nbsp;\n\t<\/dd>\n<dt>\n\t3\n\t<\/dt>\n<dd>\n\tAUI is now active on your site.&nbsp;\n\t<\/dd>\n<\/dl>\n<h2>AUI Color Settings&nbsp;<\/h2>\n<p>\n\t You can tweak the API color settings from the Customizer.&nbsp;<\/p>\n<dl>\n<dt>\n\t1\n\t<\/dt>\n<dd>\n\tNavigate to <strong>Appearance &gt; Customize. <\/strong>Locate the <strong>AyeCode UI <\/strong>field.&nbsp;\n\t<\/dd>\n<p>\t<img width=\"292\" height=\"655\" src=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2020\/10\/file-42W7zkUPz2-1.png\" class=\"attachment-large size-large\" alt=\"\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2020\/10\/file-42W7zkUPz2-1.png 292w, https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2020\/10\/file-42W7zkUPz2-1-134x300.png 134w\" sizes=\"auto, (max-width: 292px) 100vw, 292px\" \/><\/p>\n<dt>\n\t2\n\t<\/dt>\n<dd>\n\tYou can adjust the <strong>Color Settings <\/strong>as per your wishes, and then save your changes.&nbsp;\n\t<\/dd>\n<\/dl>\n<p>\n\t<img width=\"290\" height=\"286\" src=\"https:\/\/userswp.io\/documentation\/wp-content\/uploads\/2020\/10\/file-LInQOummEX-1.png\" class=\"attachment-large size-large\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AyeCode User Interface, or AUI, is an easy to use and nimble UI design based on the popular Bootstrap framework. AyeCode UI loads the bare minimum amount of CSS and JS, thereby providing better pagespeed results and an overall faster performance.&nbsp; More importantly, AUI offers a neat look across all browsers and devices, regardless of [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[3,8],"class_list":["post-28","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-getting-started","gd_placecategory-first-steps"],"_links":{"self":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"replies":[{"embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":0,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/28\/revisions"}],"wp:attachment":[{"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/tags?post=28"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/userswp.io\/documentation\/wp-json\/wp\/v2\/article\/categories?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}