Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
zdhr committed Jun 18, 2018
0 parents commit e80db22
Showing 167 changed files with 13,644 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
js/node_modules
.sass-cache
24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Mergado UI Library

## Styles

Stylesheet is available as both SASS source and compiled/minified CSS.
We included basics like css reset, typography, icons and of course styles for individual UI components.

## Images / Icons

All (two) images needed are inlined into CSS. Only icons are as extra files.

We use technique called SVG sprite. That means all icons are in a single svg file. We included this file, source svg files for each icons and script which will generate sprite file from source icons, it's in `bin` folder.

## Javascript

Checkboxes and radiobuttons are notoriously hard to style.
We use some JS magic, to help us with that and decided to share it with you.
Just put `script` tag pointing to this JS script this in your HTML and you're good to go.

Unless you're using React or similar framework. In that case, you are better of writing your own component in your framework style.

## Docs

[Mergado Docs](https://mergado.github.io/docs/design/intro.html)
82 changes: 82 additions & 0 deletions bin/crateSvgSprite.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
#!/usr/bin/env php
<?php

/**
* For icons, we're using SVG sprite technique. This big svg would be PITA to
* maintain, so source icons are in single files. This script takes all .svg
* files from given folder (recursively) and combines them into that svg sprite.
*/

// Some setup.
$inputPath = __DIR__ . '/../icons';
$outputPath = realpath(__DIR__ . '/../build') . '/muil.icons.svg';


/**
* Read directory recursively and return it's content in array filename => file content.
*
* @param string Icon directory location.
* @param string Icon prefix (directory name) - used when called recursively.
* @return array<iconName, svgCode>
*/
function readIcons(string $path, string $prefix = ''): array {
$icons = [];

foreach (new FilesystemIterator($path) as $fileInfo) {
if ($fileInfo->getExtension() === 'svg') {
$id = $fileInfo->getBasename('.svg');
$id = $prefix ? $prefix . '-' . $id : $id;
$icons[$id] = file_get_contents($fileInfo->getPathname());
} elseif ($fileInfo->isDir()) {
$dirName = $fileInfo->getFilename();
$icons = array_merge($icons, readIcons($fileInfo->getRealPath(), $dirName));
}
}

return $icons;
}

/**
* Convert SVG file into SVG symbol tag.
*
* @param string Icon SVG source.
* @param string Icon name
* @return string
*/
function fileToSymbol(string $svg, string $id): string {
$svg = str_replace(' ', null, $svg);
$svg = str_replace("\n", null, $svg);
$svg = str_replace(' xmlns="http://www.w3.org/2000/svg"', null, $svg);
$svg = str_replace('<svg ', sprintf('<symbol id="%s" ', $id), $svg);
$svg = str_replace('</svg>', '</symbol>', $svg);

// Unfuck firefox.
$svg = preg_replace('/ width="[0-9]+"/', null, $svg);
$svg = preg_replace('/ height="[0-9]+"/', null, $svg);

return trim($svg) . PHP_EOL;
}


// Read symbols.
$symbols = [];
$icons = readIcons($inputPath);
$count = count($icons);
echo "Processing $count files \n";
foreach ($icons as $id => $svg) {
$symbols[$id] = fileToSymbol($svg, $id);
echo ".";
}

ksort($symbols);

echo "\n";
echo "Exporting sprite: $outputPath";

// Write sprite.
file_put_contents($outputPath, sprintf(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">%s</svg>%s',
implode('', $symbols), PHP_EOL
));
echo "\n";

Loading

0 comments on commit e80db22

Please sign in to comment.