Download the PHP package melasistema/hyde-layouts-manager without Composer

On this page you can find all versions of the php package melasistema/hyde-layouts-manager. 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?

Example code of melasistema/hyde-layouts-manager

Informations about the package hyde-layouts-manager

HydePHP Layouts Manager

Simplify layout and component management in your HydePHP projects.

HydePHP Layouts Manager is a powerful package designed to simplify the management of layouts and reusable components in your HydePHP projects. It provides an intuitive way to organize and customize themes, layouts, and components with centralized presets and easy override, enhancing your workflow while keeping your codebase clean and maintainable.

Check it out in action: HydePHP Layouts Manager

🌟 Features

📋 Requirements

Before installing this package, make sure your project meets the following prerequisites:

Core Requirements

Font Manager Requirements

Why These Requirements Matter

These prerequisites ensure that the package functions as intended, especially for dynamic font management, layout switching, and integration with HydePHP. Proper setup guarantees a seamless and feature-rich experience.

🛠️ Installation

1. Install via Composer

Use Composer to add the package to your project:

2. Set the Default Layout in .env

To ensure the package works as intended, add the DEFAULT_LAYOUT variable to your project's .env file. This value is critical for enabling dynamic typography management.

You can change this value to hyde or any custom layout defined in HydePHP Layouts Manager. Refer to the README Usage Section for more details.

2. Publish the Configuration

Publish the package's configuration file to your app's config directory for customization:

3. Merge Tailwind Configuration

Manual Merge

Manually include the Layouts Manager configuration in your tailwind.config.js file:

Automated Merge

Automate the process with the tailwind:merge command. This replaces your existing tailwind.config.js file with the default configuration from HydeLayoutsManager.

⚠️ Warning: This will overwrite your existing file. Back it up if you have custom configurations.

Run the command:

4. Install Required JavaScript Dependencies

The default theme and components shipped with HydeLayoutsManager use Flowbite. You can add these dependencies manually or by using the package-json:merge command.

Manual Installation

Add the following Flowbite dependencies to your package.json file:

Then, install the dependencies:

Automated Merge

Use the package-json:merge command to automatically merge the Flowbite dependencies into your existing package.json.

⚠️ Safe in Fresh Projects: This command modifies your package.json. Ensure to back it up if you have custom dependencies.

Run the command:

Afterward, run:

5. Add Flowbite Styles and Scripts to Laravel Mix Webpack

Add Flowbite styles and scripts in you webpack.mix.js file:

Run the Laravel Mix build:

6. Modify the @extends Directive

Add dynamic @extends() directive to your pages for the "Layout Switching" es. index.blade.php:

If you are using a post page, you can use the active layout blog post feed:

7. (Optional) Publish Views

If you want to customize the default views, publish them to your application:

Final Steps

After completing the installation, you’re ready to build dynamic layouts and reusable components with HydePHP Layouts Manager! 🎉

🧩 Usage

Setting the Default Layout

The default layout for your site is determined by the DEFAULT_LAYOUT value in the .env file. This ensures centralized and dynamic configuration across all functionality, including the "HydePHP Layouts Manager" and "Typo Manager."

To set or switch the default layout, update your .env file:

Note: Setting this value in the .env file is crucial for proper functionality, as the Tailwind JavaScript configuration uses process.env to dynamically apply styles and fonts.

Customizing Layouts

Layouts are defined in the layouts section of the configuration file. Each layout can include unique views, styles, scripts, and navigation settings:

Tip: Define multiple layouts (Themes) in the configuration file to suit different pages or sections of your site, and switch them easily via the .env file.

📋 Example Project Structure

Below is an example of how your project could be structured after installing the package:

🆎 Managing Typography

Typography is a crucial aspect of design, shaping the visual identity and readability of your site. The Font Manager in HydePHP Layouts Manager provides access to 1,790 Google Fonts, enabling you to customize and manage fonts dynamically. Each Layout (Theme) can have its own font settings and mapping, allowing you to tailor typography to match your design vision.

file: config/hyde-layouts-manager-fonts.json

Note: If you want to use a layout without Typo Manager (Google Fonts CDN) you can set use_google_fonts to false and empty the families and typography_mapping arrays to fall back to system-ui fonts. npm run dev to compile the assets it's required after those changes.

🧩 Using Components

Components are reusable UI elements with configurable defaults. The package provides a method to dynamically render components in your Blade templates.

Using renderComponent()

The renderComponent() method, provided by the HydePHP Layouts Manager, dynamically renders components with the ability to override default configurations. Keep in mind that all preset groups are merged into the settings.

Example: Overriding the Jumbotron Component

Here's an example of how to override the Jumbotron component's default presets using the styleKey:

This method fetches the component configuration from the hyde-layouts-manager.php configuration file using the presets that can be defined with the styleKey, allowing you to:

  1. Define multiple presets for each component.
  2. Override settings dynamically at runtime.

Configuring Components

You can customize or create multiple presets settings for components in the hyde-layouts-manager.php configuration file within the styles array. For example:

Key Parts of the Configuration

  1. components: The top-level key for all components.
  2. flowbite: The namespace or grouping for Flowbite-based components.
  3. carousel: The specific component being configured.
  4. default-slider: The identifier for this specific preset of the carousel.
  5. view: Specifies the Blade template used to render this preset.
  6. styles: Contains all available style presets for this component.
    • default: The name of the style preset (you can define multiple presets here).
  7. config: Holds the customizable settings for the component:
    • layout: Layout options like showing indicators or controls.
    • settings: Additional configuration options that can be extended.
    • images: Default images to be used in the carousel.

Benefits of renderComponent()

By leveraging these methods, you can build scalable and easily customizable layouts with HydeLayoutsManager. 🎉

CLI Tools

The package includes several Artisan commands to streamline your workflow:

Customization

Adding New Layouts

You can add custom layouts by defining them in the layouts section of the configuration file and placing the corresponding Blade templates in resources/views/vendor/hyde-layouts-manager.

Overriding Default Components templates

To customize components, publish the views and edit the files in resources/views/vendor/hyde-layouts-manager/components.

Dynamic Branding (with shipped default MelaSistema layout)

Customizing the Navigation Brand

The navigation brand (logo) can be customized through the navigation.brand configuration. You can use a text-based logo, an image logo, or a custom HTML logo. You can also configure the logo's behavior in light and dark themes. Below is an example configuration:

Customizing the Call to Action (CTA)

You can configure a CTA button in the navigation to link to an external URL or trigger actions. Below is an example configuration for the CTA button:

Customizing Social Media Links

Social media links can be customized to include icons that link to your social platforms. The configuration allows you to toggle the visibility of each platform (e.g., GitHub, LinkedIn) and adjust the icon colors for light and dark themes. Below is an example configuration:

Footer Customization

The footer can be customized to match your branding, colors, and content. You can set background and text colors for both light and dark themes, as well as modify the footer links and description. Below is an example configuration:

With these options, you have full control over the navigation brand, CTA button, social media links, and footer content, ensuring your site is fully customizable and reflects your brand’s identity.

🌟 Credits

This project is made possible by the inspiration, contributions, and tools of an incredible community. A heartfelt thank you to:

🙌 Special Thanks

To the open-source community and all contributors—your dedication and collaboration inspire innovation and make projects like this possible. 🌟

📝 License

This package is licensed under the MIT License. See the LICENSE file for details.

📖 Changelog

All notable changes to this project are documented in CHANGELOG.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

💡 Contributing

We welcome contributions! Feel free to open an issue or submit a pull request on GitHub.

Support

If you encounter any issues or have questions, please open an issue on GitHub.

All versions of hyde-layouts-manager with dependencies

PHP Build Version
Package Version
Requires hyde/framework Version ^1.7
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 melasistema/hyde-layouts-manager contains the following files

Loading the files please wait ....