Download the PHP package aw-studio/fjord-ui-kit without Composer
On this page you can find all versions of the php package aw-studio/fjord-ui-kit. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package fjord-ui-kit
Bladesmith
A package with helpful Blade components for your litstack project.
Official Documentation
Documentation for Bladesmith can be found on litstack.io.
License
Bladesmith was created by Lennart Carstens-Behrens under the Sponsorware license.
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
If you want to customize the blade components, you can simply publish them and edit them as desired.
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.
You may disable lazy loading by setting the lazy attribute to false:
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:
The next step is to add a nav field to the newly created config file:
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:
This will result in the following simple horizontal navigation:
Customize the table using the following options
| Method | Description |
|---|---|
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
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:
You can now simply add translated Routes to your preferred routes file using the
__() helper in the uri string like this:
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/homede.home=>/de/startseite
The __route helper prepends the current locale to the given name and returns
the corresponding route:
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.
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.
Localize
The Blade componend x-fj-localize creates a link to the translated routes of
all locales.
Result:
You may change the content of the link By passing a slot with the name of the locale:
Result:
Helpers
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.
(Google)-Bot detection
For bot-detection in your templates use the custom Blade-If:
