reluem/contao-uikit

A contao bundle to integrate the UIkit framework.

0.5.3 2023-01-02 14:44 UTC

Requires

• php: ^7.0
• codefog/contao-haste: ~4.20
• contao/core-bundle: ^4.10
• felixpfeiffer/subcolumns: ^3.1
• menatwork/contao-multicolumnwizard-bundle: ^3.4
• npm-asset/uikit: ^3.5
• oveleon/contao-component-style-manager: ~2.4

Requires (Dev)

• contao/manager-plugin: ^2.0
• doctrine/doctrine-cache-bundle: ^1.3
• friendsofphp/php-cs-fixer: ^2.6
• php-http/guzzle6-adapter: ^1.1
• php-http/message-factory: ^1.0.2

Conflicts

• contao/core: *
• contao/manager-plugin: <2.0 || >=3.0

LGPL-3.0-or-later

• Lucas Rech

README

add to root composer.json

"require" : {
    "oomphinc/composer-installers-extender": "^2.0",
    },
"extra": {
    "installer-types": [
      "npm-asset"
    ],
    "installer-paths": {
      "assets/{$name}/": [
        "type:npm-asset"
      ]
    }
  },
  "repositories": [
    {
      "type": "composer",
      "url": "https://asset-packagist.org"
    }
  ]

UIkit assets are loaded automatically with this snippet in the composer.json of this module. You need to have the above mentioned requirements in your root json in order to load the ressources from npm-asset.

"require" : {
    "npm-asset/uikit": "~3.0"
    },

Next, create a custom .scss theme in your files directory, that you reference in your Contao page layout. Your custom file will overwrite the variables of the UIkit core which enables you to change e.g. colors or fonts.

### Your Custom SCSS file

// 1. Your custom variables and variable overwrites.
// e.g. $global-primary-background: rgb(0, 48, 135);

// 2. Import default variables and available mixins.
@import "../../assets/uikit/src/scss/variables-theme.scss";
@import "../../assets/uikit/src/scss/mixins-theme.scss";

// 3. Your custom mixin overwrites.

// 4. Import UIkit.
@import "../../assets/uikit/src/scss/uikit-theme.scss";

// 5. Other Custom SCSS

Features:

Modules

• Navbar with Module Picker
• Columnset
• Fancy Alerts for newsletter subscriptions

Content Elements

• Hero Image
• Link Teaser with Buttons

Others

• Icon Inserttag
• JS automatically moved to end of DOM