-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit e80db22
Showing
167 changed files
with
13,644 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
js/node_modules | ||
.sass-cache |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"; | ||
|
Oops, something went wrong.