Download the PHP package zicht/htmldev-bundle without Composer

On this page you can find all versions of the php package zicht/htmldev-bundle. 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 htmldev-bundle

Htmldev Bundle

Create living Styleguides with Symfony and Twig! ✨


Goals

Install

  1. Require via composer.

How to use

Setup

  1. Load the bundle into your AppKernel.

  2. Configure routing.

    Add the following Yaml to your app's route configuration.

    ⚠️ if you combine this bundle with the zicht/page-bundle, make sure this configuration is placed above any routing containing /{locale}.

  3. Add an app/config/bundles/ bundle configuration file to configure a Twig namespace and add project specific assets to the Styleguide (optionally you can configure much more, see down below):

    For the Styleguide, there are two asset types: stylesheet and script. For both you can either configure a path which will be passed through the Twig asset() function, or you can configure a URL (to an external stylesheet or script for instance) or you can configure a body to add inline CSS or scripting.

  4. Create a directory data/styleguide/ in the htmldev/ directory. Add a file navigation.yml containing at least the following:

  5. Go to the styleguide's URL at /htmldev (e.g. http://localhost/htmldev) and you should see a basic setup of the styleguide:

  6. Optionally you can change the styleguide's title and its output.

    • To change the Styleguide title, edit the config and add a title: '...' element:

    • To change the Styleguide's subtitle, or add a (SVG) logo, edit the config and add a subtitle: '...' element:

      Or you can use raw SVG-code, but don't forget to define a height that doesn't exceed 35px:

    • To change the Styleguide output, edit the config and add an output: [] section:

      Default (when not explicitly configured) is output: ['example', 'twig']

  7. By default SVG's will be cached on every other environment then development. This is due to performance reasons. It makes use of file caching for the rendered SVG files. In order to disable this on development you may want this to be array. To achieve this you could set the config param just like this:

    other supported options are file and apcu or a service id where the class implements the PSR-16.

Adding stuff to the styleguide

Components

Components are simple Twig templates which represent a small peace of the design of a project, for example a button or a card. The HtmldevBundle looks for these components in the htmldev/components/ folder. Inside this directory, you're free to structure them how you want.

The component is rendered inside a Twig control structure {% strict false %} block from the zicht/framework-extra-bundle which means there's no need for strict null or empty checks on variables inside a component: a simple {% if variable %} will suffice.

Recommended: for easy conditional CSS classes, the HtmldevBundle automaticall loads the zicht/twig-classes helper function:

Rendering components in the Styleguide

The HtmldevBundle loads the example/dummy data for the components from Yaml files from the htmldev/data/ directory.

For example, it loads a htmldev/data/buttons.yml:

This way, you can add components to the styleguide without typing Twig code. The keys that start with styleguide_ are only used to influence rendering of the component in the styleguide. The other keys are properties of the component itself.

The available options for rendering in the styleguide are:

Responsive image component

Please refer to the HTMLdev components folder for documentation on the installation and usage of the Zicht responsive image component.

Pages

The bundle renders default pages for all the components that are added to the navigation.yml and their own data Yaml files. The templates for the Styleguide reside within the HtmldevBundle's own Resources/views/styleguide/ directory and can be overridden within the project's htmldev/pages/ directory. Both directory's structures look like below. The HtmldevBundle has a base component.html.twig template for all components. You can override this template in your project's htmldev/pages/ directory to do global changes. In your project's htmldev/pages/ directory you can create a components/ subdirectory and add custom templates for specific components (the base name part of the template file should be the same as the base name of the Yaml file). The design elements do have their own template within the HtmldevBundle, which are all based on the component.html.twig template (either the one in your project's htmldev/pages/ directory or the one of the Htmldev bundle).

You could also add a homepage/introduction page instead of going to the page of the first component in the list as homepage. You can do so by adding a template at htmldev/pages/styleguide_intro.html.twig. This will then be rendered as a homepage (at the https://example.com/htmldev/ URL).

Relative directory structure:

Adding navigation

The HtmldevBundle supports two levels of navigation in the styleguide. The items that make up the menu should be added to htmldev/data/styleguide/navigation.yml.

Example of a navigation structure:

Colors

The HtmldevBundle Styleguide page Design Elements > Colors will read the color Sass map inside the file htmldev/sass/variables/_zss-overrides.scss and renders these colors inside a grid.

The page is using a Twig function color_palette() and passes the filename _zss-overrides.scss. You can override this page (see Pages) to change/add the files it is reading from.

The default color service assumes variables of the ZSS framework, but feel free to use a different service. See the Customising section.

Icons

The HtmldevBundle Styleguide page Design Elements > Icons will render the icons in the directory htmldev/images/icons/ (no subdirectories).

Typography

The HtmldevBundle Styleguide page Design Elements > Typography contains a static set of typographical elements such as <h1>, <h2>, <h3> and <h4> headings, a few <p> paragraphs, a <blockquote> quote with a <footer> and a few <ul> unordered lists. The paragraphs and lists contain some <a> links.

You can override this page (see Pages) to customize the HTML specially for your project.

Using the styleguide in the project

Rendering components

Rendering components through the component macro (ui.component()) is deprecated

To render components, simply use a Twig include like below:

This wil load htmldev/components/cards/cover.html.twig with the given properties:

Rendering SVG files

The HtmldevBundle svg macro (ui.svg()) to inline render SVG's is deprecated

The HtmldevBundle provides a inline_images filter to inline render SVG's within the string subject. This allows easy coloring of the SVG with currentColor and CSS.

This will render the contents of htmldev/images/icons/arrow--right.svg in the HTML:

The following attributes can be used within the <img /> tag:

Customising

There are several Symfony parameters available to override, to add a different implementation.

Alternative structure

It is possible to move everything out of the HtmldevBundle's default htmldev/ directory by changing a few configurations. For instance, to adhere to a more industry standard structure in a Symfony 4+ project:

Add to config/packages/zicht_htmldev.yaml:

And move stuff around accordingly.

Development

CSS

The bundle contains a CSS file to provide default styling for the styleguide.

Run npm run build to add your features or bug fixes to the compiled CSS file, and don't forget to commit the resulting files in ~/Resources/public/css.

Maintainer


All versions of htmldev-bundle with dependencies

PHP Build Version
Package Version
Requires php Version ^8.0
knplabs/knp-menu-bundle Version ^3
psr/simple-cache Version ^1.0
symfony/cache Version ^6.4
symfony/framework-bundle Version ^6.4
symfony/routing Version ^6.4
symfony/yaml Version ^6.4
twig/twig Version ^3
zicht/framework-extra-bundle Version ^11
zicht/twig-classes Version ^1.1
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 zicht/htmldev-bundle contains the following files

Loading the files please wait ....