Download the PHP package snowdog/module-alpaca-components without Composer

On this page you can find all versions of the php package snowdog/module-alpaca-components. 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 module-alpaca-components

Greenkeeper badge Browser Status

⚠️ This project is deprecated. Please use Alpaca 2.0 instead.


Introduction

Components library of Alpaca design system created to speed up the process of working with design on Magento 2 stores, by creating each UI element, module, and view in a simplified, front-end developer friendly, environment.

This components liblary is built on top of Fractal.js.

Magento 2 experience isn't required to work with this code.

Demo / Preview

https://alpaca-components.now.sh/

Installation

How to create a components library on top of Alpaca

It's necessary only to work outside the Magento.

  1. Copy-paste package.json, gulpfile.js, .eslintignore, .eslintrc, .sass-lint.yml, .stylelintrc, .gitignore files to the new project
  2. Create modules.json file with an array of paths to parent components libraries. In most cases it will look like this:

  3. Customize or add new files following the same structure as in Alpaca components library
  4. Run gulp dev

Directory structure

Core concepts

Components architecture

Components are divided into 4 groups:

  1. Globals
    • Contains code that other components can use in any place, for example, typography, icons or SASS variables.
  2. Elements
    • Smallest UI parts, for example, buttons
    • Element can't depend on other elements
    • Element shouldn't have any layout
  3. Modules
    • More complex UI parts like search form or header
    • Takes elements or modules and combine them together adding layout and context
  4. Views
    • Takes elements or modules and combine them together adding final layout and context
    • You should be able to show it to client/PM as a preview of ready to use store
    • You shouldn't create any new UI elements, everything needs to be reusable.

Naming

Colors

SASS Variables naming

Follow BEM-like naming convention i.e. when you component name is button and you are creating a variable for a padding it should be $button__padding.

Same as in BEM, you are not allowed to build construction like $button__icon__padding, it should be $button__icon-padding.

Variables related to the pseudo-classes and pseudo-selectors should be treated as a BEM elements $button__color-hover.

Also, BEM modificators are allowed in variables $button__padding--secondary, you can even stack them like this $button__padding--secondary--dark.

To target variable to specific breakpoint adding \@breakpoint at the end of the variable name $button__padding\@medium. Always use small, medium, large etc. to describe the breakpoint.

Examples of proper variables names:

Accessibility

You can run gulp a11y to run dev server with accessibility tests enabled.

If on some view there is no a11y message, please go to the component config and comment out preview: '@docs-only-styles'


All versions of module-alpaca-components with dependencies

PHP Build Version
Package Version
No informations.
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 snowdog/module-alpaca-components contains the following files

Loading the files please wait ....