PHPackages aw-studio/fjord-ui-kit - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. aw-studio/fjord-ui-kit ActiveLibrary[Utility & Helpers](/categories/utility) aw-studio/fjord-ui-kit ====================== v0.0.3(5y ago)0137[2 PRs](https://github.com/litstack/bladesmith/pulls)1MITPHP Since Jun 24Pushed 7mo ago2 watchersCompare [ Source](https://github.com/litstack/bladesmith)[ Packagist](https://packagist.org/packages/aw-studio/fjord-ui-kit)[ RSS](/packages/aw-studio-fjord-ui-kit/feed)WikiDiscussions 1.x Synced 2d ago READMEChangelog (10)Dependencies (2)Versions (5)Used By (1) Bladesmith ========== [](#bladesmith) A package with helpful Blade components for your [litstack](https://github.com/litstack/litstack) project. Official Documentation ---------------------- [](#official-documentation) Documentation for Bladesmith can be found on [litstack.io](https://litstack.io/docs/packages/bladesmith). License ------- [](#license) Bladesmith was created by **[Lennart Carstens-Behrens](https://twitter.com/lennartcb)** under the **[Sponsorware license](https://github.com/sponsorware/docs)**. Setup ----- [](#setup) To include all styles and scripts the `x-styles` tag must be placed in the head and the `x-scripts` tag at the end of the body. ``` > ... ... ``` Customize --------- [](#customize) If you want to customize the blade components, you can simply publish them and edit them as desired. ``` php artisan vendor:publish --provider="Fjord\Ui\FjordUiServiceProvider" --tag=views ``` Image ----- [](#image) The image component uses lazy loading and prints a base64 string of the image before loading it. It also outputs the appropriate media conversion for the corresponding screen sizes. The component requires an image parameter with a media model: ``` ``` The component lazy loads images and previews a minified base64 version of the image untill it is loaded. [![fjord lazy loading](./lazy.png)](./lazy.png) You may disable lazy loading by setting the `lazy` attribute to false: ``` ``` Building Navigations in Fjord ----------------------------- [](#building-navigations-in-fjord) Every page needs a navigation. Building it often takes time, especially if the design has to be adapted exactly to your needs. The Ui kit comes with a simple extensive solution to include all possible navigations types that are built with a `list` field in a short time. We start by creating a form in that we can build our navigation: ``` php artisan fjord:form --collection=navigations --form=main_navigation ``` The next step is to add a `nav` field to the newly created config file: ``` namespace FjordApp\Config\Form\Navigations; class MainNavigationConfig extends FormConfig { public function show(CrudShow $page) { $page->card(function ($form) { $form->nav('main')->title('Main Navigation')->maxDepth(3); }); } } ``` [![](./nav-field.png)](./nav-field.png) Now we can simply pass the list field to the `x-fj-nav-list` component and a navigation is created that can be build in the fjord backend: ``` use Fjord\Support\Facades\Form; $nav = Form::load('navigations', 'main_navigation'); ``` This will result in the following simple horizontal navigation: [![](./nav-result.png)](./nav-result.png) Customize the table using the following options MethodDescription`layout`Can be `horizontal` or `vertical`. (default is `vertial`)`dropdown`Wether the navigation should be a dropdown menue on `mouseover`.`depth`Max depth.`subLevel`Start depth.`expandable`Only display's level one, all child levels can be expanded on `click`.`class`Navigation class.`activeClass`Class of active items. (default is: `fj--active`)Translatable Routes ------------------- [](#translatable-routes) Build translated routes in the form of `/en/home`, `/de/startseite` made easy. Make shure to translate your routes within your translation-files in the `resources` directory, for example: ``` // lang/de/routes.php return [ 'home' => 'startseite' ]; ``` You can now simply add translated Routes to your preferred routes file using the `__()` helper in the uri string like this: ``` Route::trans('/__(routes.home)', 'HomeController@show')->name('home'); ``` A translated route will be created for all locales defined in your `translatable` config. The locale will be prepended to the given **uri** and **name**. So the routes for the previous example would be: - `en.home` => `/en/home` - `de.home` => `/de/startseite` The `__route` helper prepends the current locale to the given name and returns the corresponding route: ``` ... ``` ### Switching Languages [](#switching-languages) You may want to place a link to the different language route on your website. To do this, the `translate` method can be applied to the current route with the desired locale. ``` Deutsch ``` #### With Parameters [](#with-parameters) For routes with parameters a translator must be specified. A translator is a controller method that returns the route parameters for the desired locale. The translator method receives the desired locale and the parameters for the current locale. ``` // ./routes/web.php Route::trans('/{slug}', 'MyController@show')->translator('getSlug')->name('home'); // ./app/Http/Controllers/MyController.php ... class MyController extends Controller { ... public function getSlug($locale, $slug) { $slug = Post::whereTranslation('slug', $slug) ->first() ->translate($locale) ->slug; return ['slug' => $slug]; } } ``` Localize -------- [](#localize) The Blade componend `x-fj-localize` creates a link to the translated routes of all locales. ``` ``` Result: ``` EN DE ``` You may change the content of the link By passing a slot with the name of the locale: ``` English Deutsch ``` Result: ``` English Deutsch ``` Helpers ------- [](#helpers) ### `child_is_active` [](#child_is_active) The child is active determines wether a list item has a child with an active route. The following example will add the `is-active` class when a list item has an active `route` that is added from route field. ``` $form->route('route_field')->collection('app')->title('Pick a route.'); ``` ``` @foreach($data->list as $item) {{ $item->title }} @endforeach ``` ### (Google)-Bot detection [](#google-bot-detection) For bot-detection in your templates use the custom Blade-If: ``` @bot i'm a bot @else i'm human @endbot ``` ### Health Score 31 — LowBetter than 68% of packages Maintenance44 Moderate activity, may be stable Popularity10 Limited adoption so far Community15 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 65.1% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~7 days Total 3 Last Release 2134d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/29352871?v=4)[Lennart Carstens-Behrens](/maintainers/cbl)[@cbl](https://github.com/cbl) --- Top Contributors [![cbl](https://avatars.githubusercontent.com/u/29352871?v=4)](https://github.com/cbl "cbl (84 commits)")[![jannescb](https://avatars.githubusercontent.com/u/17292622?v=4)](https://github.com/jannescb "jannescb (27 commits)")[![aw-gerrit](https://avatars.githubusercontent.com/u/67461498?v=4)](https://github.com/aw-gerrit "aw-gerrit (9 commits)")[![lpheller](https://avatars.githubusercontent.com/u/36259611?v=4)](https://github.com/lpheller "lpheller (7 commits)")[![Chrissle28](https://avatars.githubusercontent.com/u/69738385?v=4)](https://github.com/Chrissle28 "Chrissle28 (2 commits)") ### Embed Badge ![Health badge](/badges/aw-studio-fjord-ui-kit/health.svg) ``` [![Health](https://phpackages.com/badges/aw-studio-fjord-ui-kit/health.svg)](https://phpackages.com/packages/aw-studio-fjord-ui-kit) ``` ### Alternatives [kubotak-is/php-del Tool to remove code based on specific comments. 1640.8k](/packages/kubotak-is-php-del)[turanjanin/serbian-transliterator Transliterate between Serbian Cyrillic and Latin scripts. 1217.0k](/packages/turanjanin-serbian-transliterator)[mobiosolutions/metatags A Laravel package to fetch webpage metadata ( Open Graph | Twitter | Facebook | Article ) ect... 231.5k](/packages/mobiosolutions-metatags) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)