Styling ATK with Semantic UI themes

Projects with ATK UI are easy to make, but they inherit default look & feel from Semantic UI:

Default “Admin” interface for ATK

Don’t forget “fonts” and “icon” files

If you need to change this default look, with the help of Semantic UI theming guide (and perhaps following this wonderful guide) you will end up with the CSS files.

By default ATK takes all of it’s styles from the CDN (Content Delivery Network). This is done specifically to simplify easy-of-use for new user but as a more advanced user you might want to change this behaviour.

First, lets find out where your ATK apps are currently loading static content from. Open browser’s “inspector” and look for “semantic.css”:

Class \atk4\ui\App contains an array property $cdn where the locations of static files are stored: https://github.com/atk4/ui/blob/develop/src/App.php#L18

It is then further used inside initIncludes() method like this:

// Semantic UI        
$url = isset($this->cdn['semantic-ui']) 
   ? $this->cdn['semantic-ui'] 
   : '../public';      
  
$this->requireJS($url.'/semantic.min.js');        
$this->requireCSS($url.'/semantic.css');

Let’s modify the $cdn property:

$app = new \atk4\ui\App();
$app->cdn['semantic-ui'] = '/myfolder/public';
$app->initLayout('Admin');

Now instead of using CDN, the local “semantic-ui.css” will be used. Even though fonts and icons are not explicitly loaded from PHP, they must also reside inside your public folder relative to semantic-ui.css file.

Next — you may want to include more CSS files, so add this:

$app->requireCSS('/myfolder/public/my.css');

With some styling your UI will look unique and fresh and without any need to modify any HTML templates.