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 yesterday 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 2133d 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 [fntneves/laravel-transactional-events Transaction-aware Event Dispatcher for Laravel 3202.6M2](/packages/fntneves-laravel-transactional-events)[ipinfo/ipinfo The official PHP library for IPinfo, the most reliable, accurate, and in-depth source of IP address data available anywhere. We process terabytes of data to produce our custom IP geolocation, company, carrier and IP type data sets. Visit our developer docs at https://ipinfo.io/developers. 2891.2M11](/packages/ipinfo-ipinfo)[typo3/cms-recordlist TYPO3 CMS Recordlist - Lists database records in the TYPO3 backend module (Web>List). 178.0M48](/packages/typo3-cms-recordlist)[neos/eel The Embedded Expression Language (Eel) is a building block for creating Domain Specific Languages 122.0M27](/packages/neos-eel) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)