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

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

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 PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • 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.
Please rate this library. Is it a good library?

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:

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:


All versions of fjord-ui-kit with dependencies

PHP Build Version
Package Version
Requires cbl/blade-script Version ~0.0
cbl/blade-style Version ~0.2
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package aw-studio/fjord-ui-kit contains the following files

Loading the files please wait ....