From f7690fe08e2e1e2fed7519fdb238ef1f3b78df8f Mon Sep 17 00:00:00 2001 From: Dries Beerten Date: Tue, 12 Oct 2021 16:40:34 +0200 Subject: [PATCH] [GeneratorBundle] Add webpack encore option - keep Groundcontrol as default --- .github/workflows/ci-frontend.yml | 2 +- groundcontrol/tasks/build-gc-skeleton.js | 2 - .../Command/GenerateDefaultSiteCommand.php | 12 + .../Command/GenerateLayoutCommand.php | 3 +- .../Command/InstallCommand.php | 18 +- .../Generator/DefaultSiteGenerator.php | 9 +- .../Generator/LayoutGenerator.php | 125 ++++-- .../admin/{js => }/admin-bundle-extra.js | 21 +- .../layout/Resources/admin/admin-style.scss | 72 ++++ .../skeleton/layout/Resources/ui/js/app.js | 20 +- .../layout/Resources/ui/scss/admin-style.scss | 68 --- .../ui/scss/components/blocks/_buttons.scss | 2 +- .../ui/scss/config/general/_paths.scss | 6 +- .../config/general/typography/_fonts.scss | 6 +- .../Resources/ui/styleguide/js/MobileNav.js | 58 --- .../Resources/ui/styleguide/js/Scrollspy.js | 12 - .../Resources/ui/styleguide/js/Toggle.js | 80 ---- .../Resources/ui/styleguide/js/styleguide.js | 15 - .../scss/components/_components.scss | 36 -- .../scss/components/blocks/_code.scss | 30 -- .../scss/components/blocks/_img.scss | 19 - .../scss/components/blocks/_links.scss | 17 - .../components/content/_main-content.scss | 16 - .../scss/components/header/_main-header.scss | 387 ------------------ .../scss/components/structures/_cards.scss | 236 ----------- .../components/structures/_code-snippet.scss | 116 ------ .../scss/components/structures/_colors.scss | 68 --- .../scss/components/structures/_icons.scss | 58 --- .../scss/components/structures/_sections.scss | 17 - .../vendors/bootstrap-components/_grid.scss | 11 - .../ui/styleguide/scss/config/_config.scss | 21 - .../scss/config/general/_colors.scss | 26 -- .../scss/config/general/_sizes.scss | 13 - .../config/general/typography/_bodycopy.scss | 23 -- .../config/general/typography/_fonts.scss | 26 -- .../config/general/typography/_headings.scss | 17 - .../config/vendors/_bootstrap-imports.scss | 68 --- .../scss/config/vendors/_bootstrap-vars.scss | 82 ---- .../ui/styleguide/scss/general/_base.scss | 21 - .../ui/styleguide/scss/general/_general.scss | 15 - .../scss/general/typography/_headings.scss | 13 - .../ui/styleguide/scss/helpers/_helpers.scss | 15 - .../ui/styleguide/scss/styleguide.scss | 27 -- .../ui/styleguide/templates/layout.hbs | 83 ---- .../templates/partials/childSection.hbs | 40 -- .../styleguide/templates/partials/color.hbs | 10 - .../styleguide/templates/partials/section.hbs | 67 --- .../templates/partials/webfonts.hbs | 1 - .../Resources/views/Layout/_css.html.twig | 4 + .../Resources/views/Layout/_js.html.twig | 3 + .../Resources/views/Layout/layout.html.twig | 7 + .../.eslintrc | 0 .../skeleton/layout/frontend-config/.nvmrc | 1 + .../.stylelintrc | 0 .../buildUI.sh | 0 .../skeleton/layout/groundcontrol/.nvmrc | 1 - .../bin/config/webpack.config.styleguide.js | 14 - .../groundcontrol/bin/configured-tasks.js | 39 -- .../groundcontrol/bin/tasks/livingcss.js | 86 ---- .../layout/groundcontrol/gulpfile.babel.js | 15 +- .../layout/groundcontrol/package.json | 1 - .../layout/webpack-encore/package.json | 51 +++ .../layout/webpack-encore/postcss.config.js | 5 + .../layout/webpack-encore/webpack.config.js | 114 ++++++ 64 files changed, 437 insertions(+), 2014 deletions(-) rename src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/{js => }/admin-bundle-extra.js (53%) create mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/admin-style.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/admin-style.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/MobileNav.js delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/Scrollspy.js delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/Toggle.js delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/styleguide.js delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/_components.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_code.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_img.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_links.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/content/_main-content.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/header/_main-header.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_cards.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_code-snippet.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_colors.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_icons.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_sections.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/vendors/bootstrap-components/_grid.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/_config.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/_colors.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/_sizes.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_bodycopy.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_fonts.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_headings.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/vendors/_bootstrap-imports.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/vendors/_bootstrap-vars.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/_base.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/_general.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/typography/_headings.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/helpers/_helpers.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/styleguide.scss delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/layout.hbs delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/childSection.hbs delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/color.hbs delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/section.hbs delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/webfonts.hbs create mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/_js.html.twig rename src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/{groundcontrol => frontend-config}/.eslintrc (100%) create mode 100755 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/.nvmrc rename src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/{groundcontrol => frontend-config}/.stylelintrc (100%) rename src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/{groundcontrol => frontend-config}/buildUI.sh (100%) delete mode 100755 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/.nvmrc delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/config/webpack.config.styleguide.js delete mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/tasks/livingcss.js create mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/package.json create mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/postcss.config.js create mode 100644 src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/webpack.config.js diff --git a/.github/workflows/ci-frontend.yml b/.github/workflows/ci-frontend.yml index 3894a2d469..26940ef530 100644 --- a/.github/workflows/ci-frontend.yml +++ b/.github/workflows/ci-frontend.yml @@ -13,7 +13,7 @@ jobs: - uses: actions/setup-node@v2-beta with: - node-version: '12' + node-version: '14' - uses: actions/cache@v2 with: diff --git a/groundcontrol/tasks/build-gc-skeleton.js b/groundcontrol/tasks/build-gc-skeleton.js index 7e4db387d0..c540f7c2c0 100644 --- a/groundcontrol/tasks/build-gc-skeleton.js +++ b/groundcontrol/tasks/build-gc-skeleton.js @@ -56,8 +56,6 @@ export default function createBuildGroundControlSkeletonTask(skeletonPath, names fs.writeFileSync(adminJsPath + '/admin-bundle-extra.js', 'console.log(\'Hello world from admin\');\n'); fs.ensureDirSync(scssPath); fs.writeFileSync(scssPath + '/style.scss', 'body { font-size: 20px; }\n'); - // Style guide - fs.copySync(skeletonPath + '/../Resources/ui/styleguide', appPath + '/Resources/ui/styleguide'); // Index.html const html = ` diff --git a/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php b/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php index 1b8d79b867..8a430fb623 100644 --- a/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php +++ b/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php @@ -27,6 +27,11 @@ class GenerateDefaultSiteCommand extends KunstmaanGenerateCommand */ private $demosite; + /** + * @var bool + */ + private $webpackEncore; + /** * @see Command */ @@ -47,6 +52,7 @@ protected function configure() ->addOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace to generate the default website in') ->addOption('prefix', '', InputOption::VALUE_OPTIONAL, 'The prefix to be used in the table names of the generated entities') ->addOption('demosite', '', InputOption::VALUE_NONE, 'Whether to generate a website with demo contents or a basic website') + ->addOption('webpack-encore', '', InputOption::VALUE_NONE, 'Whether to use Webpack Encore or Groundcontrol as FE build tools') ->addOption('browsersync', '', InputOption::VALUE_OPTIONAL, 'The URI that will be used for browsersync to connect') ->addOption('articleoverviewpageparent', '', InputOption::VALUE_OPTIONAL, 'Shortnames of the pages that can have the article overview page as a child (comma separated)') ->setName('kuma:generate:default-site'); @@ -86,12 +92,18 @@ protected function doExecute() $browserSyncUrl = $this->assistant->getOptionOrDefault('browsersync', null); + /* + * If we need to generate a full site, or only the basic structure + */ + $this->webpackEncore = $this->assistant->getOption('webpack-encore'); + // First we generate the layout if it is not yet generated $command = $this->getApplication()->find('kuma:generate:layout'); $arguments = [ 'command' => 'kuma:generate:layout', '--namespace' => str_replace('\\', '/', $this->bundle->getNamespace()), '--demosite' => $this->demosite, + '--webpack-encore' => $this->webpackEncore, '--browsersync' => $browserSyncUrl, '--subcommand' => true, ]; diff --git a/src/Kunstmaan/GeneratorBundle/Command/GenerateLayoutCommand.php b/src/Kunstmaan/GeneratorBundle/Command/GenerateLayoutCommand.php index cbb07f7ccd..230e6aff42 100644 --- a/src/Kunstmaan/GeneratorBundle/Command/GenerateLayoutCommand.php +++ b/src/Kunstmaan/GeneratorBundle/Command/GenerateLayoutCommand.php @@ -36,6 +36,7 @@ protected function configure() ->addOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace of the bundle where we need to create the layout in') ->addOption('subcommand', '', InputOption::VALUE_OPTIONAL, 'Whether the command is called from an other command or not') ->addOption('demosite', '', InputOption::VALUE_NONE, 'Pass this parameter when the demosite styles/javascipt should be generated') + ->addOption('webpack-encore', '', InputOption::VALUE_NONE, 'Pass this parameter to use Webpack Encore in favor of Groundcontrol') ->addOption('browsersync', '', InputOption::VALUE_OPTIONAL, 'The URI that will be used for browsersync to connect') ->setName('kuma:generate:layout'); } @@ -62,7 +63,7 @@ protected function doExecute() } $rootDir = $this->getApplication()->getKernel()->getProjectDir() . '/'; - $this->createGenerator()->generate($this->bundle, $rootDir, $this->assistant->getOption('demosite'), $this->browserSyncUrl); + $this->createGenerator()->generate($this->bundle, $rootDir, $this->assistant->getOption('demosite'), $this->browserSyncUrl, $this->assistant->getOption('webpack-encore')); if (!$this->isSubCommand()) { $this->assistant->writeSection('Layout successfully created', 'bg=green;fg=black'); diff --git a/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php b/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php index c5a30c93f2..aca48dc496 100644 --- a/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php +++ b/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php @@ -55,6 +55,7 @@ protected function configure() [ new InputOption('db-installed', '', InputOption::VALUE_NONE, 'Acknowledge that you have setup your database"'), new InputOption('demosite', '', InputOption::VALUE_REQUIRED, 'Do you want to create a "demosite"'), + new InputOption('webpack-encore', '', InputOption::VALUE_REQUIRED, 'Do you want to use Webpack Encore in stead of Groundcontrol'), new InputOption('create-tests', '', InputOption::VALUE_REQUIRED, 'Do you want to create tests for you pages/pageparts'), new InputOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace of the bundle to create (only for SF3)'), new InputOption('dir', '', InputOption::VALUE_OPTIONAL, 'The directory where to create the bundle (only for SF3)'), @@ -112,6 +113,11 @@ protected function interact(InputInterface $input, OutputInterface $output) $input->setOption('demosite', $demoSiteOption === true ? 'Yes' : 'No'); } + if (null === $input->getOption('webpack-encore')) { + $webpackEncoreOption = $this->assistant->askConfirmation('Do you want to use Webpack Encore in stead of Groundcontrol? (y/n)', 'n'); + $input->setOption('webpack-encore', $webpackEncoreOption === true ? 'Yes' : 'No'); + } + if (null === $input->getOption('create-tests')) { $createTests = $this->assistant->askConfirmation('Do you want to create tests for you pages/pageparts? (y/n)', 'n', '?', false); $input->setOption('create-tests', $createTests === true ? 'Yes' : 'No'); @@ -138,6 +144,10 @@ protected function execute(InputInterface $input, OutputInterface $output) $defaultSiteOptions['--demosite'] = true; } + if ($input->getOption('webpack-encore') === 'Yes') { + $defaultSiteOptions['--webpack-encore'] = true; + } + if (Kernel::VERSION_ID < 40000) { $defaultSiteOptions = ['--namespace' => $input->getOption('namespace')]; @@ -207,14 +217,14 @@ protected function executeCommand(OutputInterface $output, $command, array $opti protected function getKunstmaanLogo() { return ' - /$$ /$$ /$$ /$$$$$$ - | $$ /$$/ | $$ /$$__ $$ + /$$ /$$ /$$ /$$$$$$ + | $$ /$$/ | $$ /$$__ $$ | $$ /$$/ /$$ /$$ /$$$$$$$ /$$$$$$$ /$$$$$$ /$$$$$$/$$$$ /$$$$$$ /$$$$$$ /$$$$$$$ | $$ \__/ /$$$$$$/$$$$ /$$$$$$$ | $$$$$/ | $$ | $$| $$__ $$ /$$_____/|_ $$_/ | $$_ $$_ $$ |____ $$ |____ $$| $$__ $$| $$ | $$_ $$_ $$ /$$_____/ - | $$ $$ | $$ | $$| $$ \ $$| $$$$$$ | $$ | $$ \ $$ \ $$ /$$$$$$$ /$$$$$$$| $$ \ $$| $$ | $$ \ $$ \ $$| $$$$$$ + | $$ $$ | $$ | $$| $$ \ $$| $$$$$$ | $$ | $$ \ $$ \ $$ /$$$$$$$ /$$$$$$$| $$ \ $$| $$ | $$ \ $$ \ $$| $$$$$$ | $$\ $$ | $$ | $$| $$ | $$ \____ $$ | $$ /$$| $$ | $$ | $$ /$$__ $$ /$$__ $$| $$ | $$| $$ $$| $$ | $$ | $$ \____ $$ | $$ \ $$| $$$$$$/| $$ | $$ /$$$$$$$/ | $$$$/| $$ | $$ | $$| $$$$$$$| $$$$$$$| $$ | $$| $$$$$$/| $$ | $$ | $$ /$$$$$$$/ - |__/ \__/ \______/ |__/ |__/|_______/ \___/ |__/ |__/ |__/ \_______/ \_______/|__/ |__/ \______/ |__/ |__/ |__/|_______/ + |__/ \__/ \______/ |__/ |__/|_______/ \___/ |__/ |__/ |__/ \_______/ \_______/|__/ |__/ \______/ |__/ |__/ |__/|_______/ '; } diff --git a/src/Kunstmaan/GeneratorBundle/Generator/DefaultSiteGenerator.php b/src/Kunstmaan/GeneratorBundle/Generator/DefaultSiteGenerator.php index d35a0bfeac..1341c43a63 100644 --- a/src/Kunstmaan/GeneratorBundle/Generator/DefaultSiteGenerator.php +++ b/src/Kunstmaan/GeneratorBundle/Generator/DefaultSiteGenerator.php @@ -31,6 +31,11 @@ class DefaultSiteGenerator extends KunstmaanGenerator */ private $demosite; + /** + * @var bool + */ + private $webpackEncore; + /** * Generate the website. * @@ -38,12 +43,13 @@ class DefaultSiteGenerator extends KunstmaanGenerator * @param string $rootDir * @param bool $demosite */ - public function generate(BundleInterface $bundle, $prefix, $rootDir, $demosite = false) + public function generate(BundleInterface $bundle, $prefix, $rootDir, $demosite = false, $webpackEncore = false) { $this->bundle = $bundle; $this->prefix = GeneratorUtils::cleanPrefix($prefix); $this->rootDir = $rootDir; $this->demosite = $demosite; + $this->webpackEncore = $webpackEncore; $parameters = [ 'namespace' => $this->bundle->getNamespace(), @@ -53,6 +59,7 @@ public function generate(BundleInterface $bundle, $prefix, $rootDir, $demosite = 'demosite' => $this->demosite, 'multilanguage' => $this->isMultiLangEnvironment(), 'isV4' => $this->isSymfony4(), + 'webpackEncore' => $this->webpackEncore, ]; $this->generateControllers($parameters); diff --git a/src/Kunstmaan/GeneratorBundle/Generator/LayoutGenerator.php b/src/Kunstmaan/GeneratorBundle/Generator/LayoutGenerator.php index 59288ecaee..05fdd1a58b 100644 --- a/src/Kunstmaan/GeneratorBundle/Generator/LayoutGenerator.php +++ b/src/Kunstmaan/GeneratorBundle/Generator/LayoutGenerator.php @@ -34,22 +34,33 @@ class LayoutGenerator extends KunstmaanGenerator */ private $browserSyncUrl; + /** + * @var bool + */ + private $webpackEncore; + /** * Generate the basic layout. * * @param BundleInterface $bundle The bundle * @param string $rootDir The root directory of the application */ - public function generate(BundleInterface $bundle, $rootDir, $demosite, $browserSyncUrl) + public function generate(BundleInterface $bundle, $rootDir, $demosite, $browserSyncUrl, $webpackEncore) { $this->bundle = $bundle; $this->rootDir = $rootDir; $this->demosite = $demosite; $this->browserSyncUrl = $browserSyncUrl; + $this->webpackEncore = $webpackEncore; $this->shortBundleName = '@' . str_replace('Bundle', '', $bundle->getName()); - $this->generateGroundcontrolFiles(); + $this->generateSharedConfigFiles(); + if ($webpackEncore) { + $this->generateWebpackEncoreFiles(); + } else { + $this->generateGroundcontrolFiles(); + } $this->generateAssets(); $this->generateTemplate(); } @@ -68,53 +79,89 @@ private function generateGroundcontrolFiles() $this->renderSingleFile( $this->skeletonDir . '/groundcontrol/', $this->rootDir, - '.babelrc', - ['bundle' => $this->bundle], + 'gulpfile.babel.js', + ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'isV4' => $this->isSymfony4()], true ); $this->renderSingleFile( $this->skeletonDir . '/groundcontrol/', $this->rootDir, - '.eslintrc', + 'package.json', ['bundle' => $this->bundle, 'demosite' => $this->demosite], true ); + $this->assistant->writeLine('Generating groundcontrol configuration : OK'); + } + + /** + * Generate the Webpack Encore configuration files. + */ + private function generateWebpackEncoreFiles() + { $this->renderSingleFile( - $this->skeletonDir . '/groundcontrol/', + $this->skeletonDir . '/webpack-encore/', $this->rootDir, - '.nvmrc', - ['bundle' => $this->bundle], + 'package.json', + ['bundle' => $this->bundle, 'demosite' => $this->demosite], true ); $this->renderSingleFile( - $this->skeletonDir . '/groundcontrol/', + $this->skeletonDir . '/webpack-encore/', $this->rootDir, - '.stylelintrc', - ['bundle' => $this->bundle], + 'postcss.config.js', + [], true ); - $this->renderExecutableFile( - $this->skeletonDir . '/groundcontrol/', + $this->renderSingleFile( + $this->skeletonDir . '/webpack-encore/', $this->rootDir, - 'buildUI.sh', - ['bundle' => $this->bundle], + 'webpack.config.js', + ['browserSyncUrl' => $this->browserSyncUrl], true ); + $this->assistant->writeLine('Generating webpack encore configuration : OK'); + } + + /** + * Generate shared (groundcontrol & webpack encore) configuration files. + */ + private function generateSharedConfigFiles() + { $this->renderSingleFile( - $this->skeletonDir . '/groundcontrol/', + $this->skeletonDir . '/frontend-config/', $this->rootDir, - 'gulpfile.babel.js', - ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'isV4' => $this->isSymfony4()], + '.babelrc', + ['bundle' => $this->bundle], true ); $this->renderSingleFile( - $this->skeletonDir . '/groundcontrol/', + $this->skeletonDir . '/frontend-config/', $this->rootDir, - 'package.json', + '.eslintrc', ['bundle' => $this->bundle, 'demosite' => $this->demosite], true ); - $this->assistant->writeLine('Generating groundcontrol configuration : OK'); + $this->renderSingleFile( + $this->skeletonDir . '/frontend-config/', + $this->rootDir, + '.nvmrc', + ['bundle' => $this->bundle], + true + ); + $this->renderSingleFile( + $this->skeletonDir . '/frontend-config/', + $this->rootDir, + '.stylelintrc', + ['bundle' => $this->bundle], + true + ); + $this->renderExecutableFile( + $this->skeletonDir . '/frontend-config/', + $this->rootDir, + 'buildUI.sh', + ['bundle' => $this->bundle], + true + ); } /** @@ -129,13 +176,19 @@ private function generateAssets() $this->renderFiles( $sourceDir . $relPath . '/js/', $this->getAssetsDir($this->bundle) . '/ui/js/', - ['bundle' => $this->bundle, 'demosite' => $this->demosite], + ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'webpack' => $this->webpackEncore], true ); $this->renderFiles( $sourceDir . $relPath . '/scss/', $this->getAssetsDir($this->bundle) . '/ui/scss/', - ['bundle' => $this->bundle, 'demosite' => $this->demosite], + ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'webpack' => $this->webpackEncore], + true + ); + $this->renderFiles( + $sourceDir . '/Resources/admin/', + $this->getAssetsDir($this->bundle) . '/admin/', + ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'webpack' => $this->webpackEncore], true ); @@ -204,8 +257,16 @@ private function generateAssets() $this->removeDirectory($this->getAssetsDir($this->bundle) . '/ui/scss/helpers/mixins/'); } - $relPath = '/Resources/admin/'; - $this->copyFiles($sourceDir . $relPath, $this->getAssetsDir($this->bundle) . '/admin', true); + if ($this->webpackEncore) { + $this->renderSingleFile( + $sourceDir . $relPath . 'js/', + $this->getAssetsDir($this->bundle) . '/ui/', + 'app.js', + ['demosite' => $this->demosite, 'webpack' => $this->webpackEncore], + true + ); + $this->removeFile($this->getAssetsDir($this->bundle) . '/ui/js/app.js'); + } $this->assistant->writeLine('Generating ui assets : OK'); } @@ -219,7 +280,13 @@ private function generateTemplate() $this->renderFiles( $this->skeletonDir . $relPath, $this->getTemplateDir($this->bundle), - ['bundle' => $this->bundle, 'demosite' => $this->demosite, 'shortBundleName' => $this->shortBundleName, 'isV4' => $this->isSymfony4()], + [ + 'bundle' => $this->bundle, + 'demosite' => $this->demosite, + 'shortBundleName' => $this->shortBundleName, + 'isV4' => $this->isSymfony4(), + 'webpack' => $this->webpackEncore, + ], true ); @@ -229,6 +296,12 @@ private function generateTemplate() $this->removeFile($this->getTemplateDir($this->bundle) . '/Layout/_demositemessage.html.twig'); } + if ($this->webpackEncore) { + $this->removeFile($this->getTemplateDir($this->bundle) . '/Layout/_js_footer.html.twig'); + } else { + $this->removeFile($this->getTemplateDir($this->bundle) . '/Layout/_js.html.twig'); + } + $this->assistant->writeLine('Generating template files : OK'); } } diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/js/admin-bundle-extra.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/admin-bundle-extra.js similarity index 53% rename from src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/js/admin-bundle-extra.js rename to src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/admin-bundle-extra.js index ceed9da5de..88a9c62636 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/js/admin-bundle-extra.js +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/admin-bundle-extra.js @@ -1,8 +1,25 @@ +{% if webpack %} +/* global $:readonly */ + +import './admin-style.scss'; + +document.onreadystatechange = () => { + // if you want to use jQuery + if (document.readyState === 'complete') { + initExtraAdminJs(); + } +}; + +function initExtraAdminJs() { + console.log($); +} +{% else %} /** - * + * * Extra Javascript that needs to be implemented for the KunstmaanBundlesCMS can be written in this file/folder. * * The Javascript will be bundled & compiled when the `npm run build` command has run. The compiled JS will be at: * web/frontend/js/admin-bundle-extra.js and will be included automatically in all of the KunstmaanBundlesCMS layouts. - * + * */ +{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/admin-style.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/admin-style.scss new file mode 100644 index 0000000000..0a2e0f4be9 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/admin/admin-style.scss @@ -0,0 +1,72 @@ +{% set pathPrefix = '../ui/scss/' %} +{% if webpack -%} +{% set pathPrefix = '~scssRootDir/' %} +{% endif %} +@charset "UTF-8"; + +/* ========================================================================== + Extra Stylesheet for admin + ========================================================================== */ + +/* Config (necessary only) + ========================================================================== */ +@import "{{ pathPrefix }}config/general/colors"; +@import "{{ pathPrefix }}config/general/typography/fonts"; +@import "{{ pathPrefix }}config/general/typography/bodycopy"; +@import "{{ pathPrefix }}config/general/sizes"; +@import "{{ pathPrefix }}config/general/paths"; + +/* Vendors - only vars! + ========================================================================== */ +@import "{{ pathPrefix }}config/vendors/bootstrap-vars"{% if demosite %}; +@import "{{ pathPrefix }}config/vendors/cargobay-vars"{% endif %}; + +/* General + ========================================================================== */ +@import "{{ pathPrefix }}general/typography/iconfont"; + +/* Helpers + ========================================================================== */ +@import "{{ pathPrefix }}helpers/helpers"; + + +/* Use these styling only in the pagepart previews + ========================================================================== */ +.page-template__region .admin-region, +.pp__view .pp__view__block:first-child { + + /* General + ========================================================================== */ + @import "{{ pathPrefix }}general/typography/bodycopy"; + + /* Blocks + ========================================================================== */ + @import "{{ pathPrefix }}components/blocks/img"; + @import "{{ pathPrefix }}components/blocks/hr"; + @import "{{ pathPrefix }}components/blocks/lists"; + @import "{{ pathPrefix }}components/blocks/links"; + @import "{{ pathPrefix }}components/blocks/buttons"; + @import "{{ pathPrefix }}components/blocks/tables"; + + /* Structures + ========================================================================== */ +{% if demosite %} + @import "{{ pathPrefix }}components/structures/header-visual"; + @import "{{ pathPrefix }}components/structures/submenu"; +{% endif %} + + /* Pageparts + ========================================================================== */ + @import "{{ pathPrefix }}components/pageparts/button-pp"; + @import "{{ pathPrefix }}components/pageparts/download-pp"; + @import "{{ pathPrefix }}components/pageparts/header-pp"; + @import "{{ pathPrefix }}components/pageparts/image-pp"; + @import "{{ pathPrefix }}components/pageparts/introtext-pp"; + @import "{{ pathPrefix }}components/pageparts/link-pp"; +{% if demosite %} + @import "{{ pathPrefix }}components/pageparts/service-pp"; +{% endif %} + @import "{{ pathPrefix }}components/pageparts/text-pp"; + @import "{{ pathPrefix }}components/pageparts/totop-pp"; + @import "{{ pathPrefix }}components/pageparts/video-pp"; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/js/app.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/js/app.js index 2ff3cc89b4..9d476b200b 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/js/app.js +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/js/app.js @@ -1,16 +1,26 @@ +{% set pathPrefix = './' %} +{% if webpack -%} +{% set pathPrefix = './js/' %} +{% endif %} import 'picturefill'; {% if demosite %} -import velocity from 'velocity-animate'; // eslint-disable-line +import 'velocity-animate'; import cbScrollToTop from 'cargobay/src/scroll-to-top/js/jquery.scroll-to-top'; import cbSidebarToggle from 'cargobay/src/sidebar-toggle/js/jquery.sidebar-toggle'; import cbToggle from 'cargobay/src/toggle/js/jquery.toggle'; +{% endif %} + +{% if webpack %} +import './scss/style.scss'; -import search from './search'; -import demoMsg from './demoMsg'; {% endif %} -import cookieConsent from './cookieConsent'; -import videolink from './videolink'; +{% if demosite %} +import search from '{{ pathPrefix }}search'; +import demoMsg from '{{ pathPrefix }}demoMsg'; +{% endif %} +import cookieConsent from '{{ pathPrefix }}cookieConsent'; +import videolink from '{{ pathPrefix }}videolink'; {% if demosite %} $(() => { diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/admin-style.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/admin-style.scss deleted file mode 100644 index c8a9d5274e..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/admin-style.scss +++ /dev/null @@ -1,68 +0,0 @@ -@charset "UTF-8"; - -/* ========================================================================== - Extra Stylesheet for admin - ========================================================================== */ - -/* Config (necessary only) - ========================================================================== */ -@import "config/general/colors"; -@import "config/general/typography/fonts"; -@import "config/general/typography/bodycopy"; -@import "config/general/sizes"; -@import "config/general/paths"; - -/* Vendors - only vars! - ========================================================================== */ -@import "config/vendors/bootstrap-vars"{% if demosite %}; -@import "config/vendors/cargobay-vars"{% endif %}; - -/* General - ========================================================================== */ -@import "general/typography/iconfont"; - -/* Helpers - ========================================================================== */ -@import "helpers/helpers"; - - -/* Use these styling only in the pagepart previews - ========================================================================== */ -.page-template__region .admin-region, -.pp__view .pp__view__block:first-child { - - /* General - ========================================================================== */ - @import "general/typography/bodycopy"; - - /* Blocks - ========================================================================== */ - @import "components/blocks/img"; - @import "components/blocks/hr"; - @import "components/blocks/lists"; - @import "components/blocks/links"; - @import "components/blocks/buttons"; - @import "components/blocks/tables"; - - /* Structures - ========================================================================== */ -{% if demosite %} - @import "components/structures/header-visual"; - @import "components/structures/submenu"; -{% endif %} - - /* Pageparts - ========================================================================== */ - @import "components/pageparts/button-pp"; - @import "components/pageparts/download-pp"; - @import "components/pageparts/header-pp"; - @import "components/pageparts/image-pp"; - @import "components/pageparts/introtext-pp"; - @import "components/pageparts/link-pp"; -{% if demosite %} - @import "components/pageparts/service-pp"; -{% endif %} - @import "components/pageparts/text-pp"; - @import "components/pageparts/totop-pp"; - @import "components/pageparts/video-pp"; -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/components/blocks/_buttons.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/components/blocks/_buttons.scss index d05640b83b..db8b10b7ff 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/components/blocks/_buttons.scss +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/components/blocks/_buttons.scss @@ -30,9 +30,9 @@ text-align: center; text-decoration: none; vertical-align: middle; + white-space: nowrap; cursor: pointer; - white-space: nowrap; user-select: none; transition: background .3s ease-in-out; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/config/general/_paths.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/config/general/_paths.scss index fa95568ac8..da6b620410 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/config/general/_paths.scss +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/config/general/_paths.scss @@ -24,6 +24,10 @@ $general: "#{$root}/img/general"; {% if demosite %} /* Font folders ========================================================================== */ +{% if webpack %} +$iconfont-path: "~scssRootDir/../fonts/iconfont/fonts"; +{% else %} $iconfont-path: "#{$root}/fonts/iconfont/fonts"; +{% endif %} $webfont-path: "#{$root}/fonts/webfont/fonts"; -{% endif %} \ No newline at end of file +{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/config/general/typography/_fonts.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/config/general/typography/_fonts.scss index 93e4e9cc8b..15d82c9dc3 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/config/general/typography/_fonts.scss +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/scss/config/general/typography/_fonts.scss @@ -8,10 +8,10 @@ /* Webfonts ========================================================================== */ {% if demosite %} -$primary-font: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; -$secondary-font: Arial, sans-serif; +$primary-font: "Lato", "Helvetica Neue", helvetica, arial, sans-serif; +$secondary-font: arial, sans-serif; {% else %} -$primary-font: "Helvetica Neue", Helvetica, Arial, sans-serif; +$primary-font: "Helvetica Neue", helvetica, arial, sans-serif; $secondary-font: "Times New Roman", serif; {% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/MobileNav.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/MobileNav.js deleted file mode 100644 index cfedaa58eb..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/MobileNav.js +++ /dev/null @@ -1,58 +0,0 @@ -import {TweenLite, Power4} from 'gsap/TweenLite'; -import 'gsap/ScrollToPlugin'; - -export default class MobileNav { - - constructor() { - const CLASSES = { - button: 'js-mobile-nav-btn', - mobileSubnav: 'js-mobile-subnav', - mobileNav: 'js-mobile-nav', - activeClass: 'mobile-nav-open' - }; - const scrollOffset = 80; - const toTopOffset = 150; - - const button = document.querySelectorAll(`.${CLASSES.button}`)[0]; - const nav = document.querySelectorAll(`.${CLASSES.mobileNav}`)[0]; - const subnav = document.querySelectorAll(`.${CLASSES.mobileSubnav}`)[0]; - - this.CLASSES = CLASSES; - this.scrollOffset = scrollOffset; - this.toTopOffset = toTopOffset; - this.button = button; - this.nav = nav; - this.subnav = subnav; - - button && this._initMobileNav(); - subnav && this._initMobileSubnav(); - } - - _initMobileNav() { - this.button.addEventListener('click', () => { - if (this.button.classList.contains(this.CLASSES.activeClass)) { - this.nav.classList.remove(this.CLASSES.activeClass); - this.button.classList.remove(this.CLASSES.activeClass); - } else { - this.nav.classList.add(this.CLASSES.activeClass); - this.button.classList.add(this.CLASSES.activeClass); - } - }); - }; - - _initMobileSubnav() { - this.subnav.addEventListener('change', (e) => { - const target = (e.currentTarget).value; - - if (target) { - TweenLite.to(window, .3, { - scrollTo: { - y: `${target}`, - offsetY: this.scrollOffset - }, - ease: Power4.easeOut - }); - } - }, false); - }; -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/Scrollspy.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/Scrollspy.js deleted file mode 100644 index 71289c0831..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/Scrollspy.js +++ /dev/null @@ -1,12 +0,0 @@ -import 'bootstrap.native/dist/polyfill'; -import bsn from 'bootstrap.native'; - -export default class Scrollspy { - - constructor() { - // Add scrollspy to subnav - new bsn.ScrollSpy(document.getElementById('spy-content'), { - target: document.getElementById('subnav') - }); - } -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/Toggle.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/Toggle.js deleted file mode 100644 index 021c9aeed9..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/Toggle.js +++ /dev/null @@ -1,80 +0,0 @@ -import {TweenLite, Power4} from 'gsap/TweenLite'; -import 'gsap/CSSPlugin'; - -export default class Toggle { - - constructor() { - const CLASSES = { - trigger: 'js-sg-toggle-trigger', - content: 'js-sg-toggle-content' - }; - const defaultDuration = 0.3; // in seconds - - Array.prototype.forEach.call(document.querySelectorAll(`.${CLASSES.trigger}`), (el) => { - const target = document.querySelectorAll(el.getAttribute('data-target'))[0]; - - this.addMultiEventistener(el, 'click touchstart mousedown', (e) => { - e.preventDefault(); - }); - - this.addMultiEventistener(el, 'touchend mouseup', () => { - const targetContent = target.querySelectorAll(`.${CLASSES.content}`)[0]; - const currentTargetIsOpen = el.getAttribute('aria-expanded') === 'true'; - - currentTargetIsOpen ? this.hideContent(el, target, targetContent, true) : this.showContent(el, target, targetContent, true); - }); - - // Check if hide/show on load - if (target) { - const targetContent = target.querySelectorAll(`.${CLASSES.content}`)[0]; - - if (targetContent && el.getAttribute('aria-expanded') === 'true') { - this.showContent(el, target, targetContent); - } else if (targetContent) { - this.hideContent(el, target, targetContent); - } - } - }); - - this.defaultDuration = defaultDuration; - } - - hideContent(trigger, target, targetContent, smoothAnimation, animationDuration) { - trigger.setAttribute('aria-expanded', false); - - if (smoothAnimation) { - TweenLite.to(targetContent, animationDuration || this.defaultDuration, { - height: 0, - ease: Power4.easeOut - }); - } else { - targetContent.style.height = 0; - } - } - - showContent(trigger, target, targetContent, smoothAnimation, animationDuration) { - trigger.setAttribute('aria-expanded', true); - - if (smoothAnimation) { - TweenLite.set(targetContent, { - height: 'auto', - ease: Power4.easeOut - }); - TweenLite.from(targetContent, animationDuration || this.defaultDuration, { - height: 0, - ease: Power4.easeOut - }); - } else { - targetContent.style.height = 'auto'; - } - } - - // Add multiple listeners - addMultiEventistener(el, s, fn) { - const evts = s.split(' '); - - for (let i = 0, iLen = evts.length; i < iLen; i += 1) { - el.addEventListener(evts[i], fn, false); - } - } -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/styleguide.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/styleguide.js deleted file mode 100644 index 2a21bb8051..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/js/styleguide.js +++ /dev/null @@ -1,15 +0,0 @@ -import 'prismjs'; -import 'prismjs/components/prism-markup'; -import Clipboard from 'clipboard'; - -import Scrollspy from './Scrollspy'; -import MobileNav from './MobileNav'; -import Toggle from './Toggle'; - -document.addEventListener('DOMContentLoaded', () => { - new Clipboard('.js-clipboard-code'); - - new Scrollspy(); - new MobileNav(); - new Toggle(); -}); diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/_components.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/_components.scss deleted file mode 100644 index 4a283c5b6e..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/_components.scss +++ /dev/null @@ -1,36 +0,0 @@ -/* ========================================================================== - Components - - Never add styles directly to this file - set up imports - ========================================================================== */ - - -/* Blocks - ========================================================================== */ -@import "blocks/code"; -@import "blocks/img"; -@import "blocks/links"; - - -/* Structures - ========================================================================== */ -@import "structures/cards"; -@import "structures/colors"; -@import "structures/icons"; -@import "structures/sections"; -@import "structures/code-snippet"; - - -/* Header - ========================================================================== */ -@import "header/main-header"; - - -/* Content - ========================================================================== */ -@import "content/main-content"; - - -/* Vendors - ========================================================================== */ -@import "vendors/bootstrap-components/grid"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_code.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_code.scss deleted file mode 100644 index 7e72f24e4a..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_code.scss +++ /dev/null @@ -1,30 +0,0 @@ -/* ========================================================================== - Blocks - Code - ========================================================================== */ - -/* General - ========================================================================== */ -.sg-styleguide { - - code:not(.sg-code) { - padding: 1px 3px; - - background: $grey--light; - - border: 1px solid $grey; - border-radius: 3px; - - color: $red; - font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', 'monospace'; - font-size: 12px; - - white-space: nowrap; - } - - pre { - background: $primary-color--dark; - - code:not(.sg-code) { - } - } -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_img.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_img.scss deleted file mode 100644 index 3a10c7c59d..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_img.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* ========================================================================== - Images - ========================================================================== */ - -/* Shared - ========================================================================== */ -img { - max-width: 100%; - height: auto; - max-height: 100%; -} - -figure { - margin: 0; - - img { - display: block; - } -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_links.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_links.scss deleted file mode 100644 index aa1caf3975..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/blocks/_links.scss +++ /dev/null @@ -1,17 +0,0 @@ -/* ========================================================================== - Links - ========================================================================== */ - -/* Shared - ========================================================================== */ -a { - transition: color .3s ease; - - color: $link-color; - text-decoration: underline; - - &:hover { - text-decoration: none; - color: $link-color--hover; - } -} \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/content/_main-content.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/content/_main-content.scss deleted file mode 100644 index 1c4786fb61..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/content/_main-content.scss +++ /dev/null @@ -1,16 +0,0 @@ -/* ========================================================================== - Main content - ========================================================================== */ - -/* General - ========================================================================== */ -.sg-content { - position: relative; - - padding: 100px 20px 50px; - overflow: hidden; - - @media (min-width: $screen-md-min) { - padding: 20px 50px 20px 410px; - } -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/header/_main-header.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/header/_main-header.scss deleted file mode 100644 index cd0cd7b83e..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/header/_main-header.scss +++ /dev/null @@ -1,387 +0,0 @@ -/* ========================================================================== - Header - Main header - ========================================================================== */ - -/* General - ========================================================================== */ -.sg-header { - position: fixed; - z-index: 1000; - - display: block; - width: 100%; - padding: 0 20px; - margin: 0 0 50px; - - background: $white; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .12), 0 2px 10px 0 rgba(0, 0, 0, .08); - - border-bottom: 1px solid $grey; - - font-family: $primary-font; - - @media (min-width: $screen-md-min) { - position: fixed; - top: 0; - bottom: 0; - left: 0; - - display: flex; - flex-direction: column; - width: 360px; - height: 100%; - padding: 0; - margin: 0; - overflow-y: auto; - } -} - - -/* Brand - ========================================================================== */ -.sg-header__brand { - position: relative; - z-index: 1; - - display: inline-block; - width: 180px; - margin-top: 8px; - - text-decoration: none; - - a { - display: inline-block; - padding: 10px 0; - - span { - display: none; - } - - &:hover { - text-decoration: none; - } - } - - @media (min-width: $screen-md-min) { - display: block; - width: 100%; - - a { - display: block; - padding: 20px 50px; - - text-align: left; - } - } -} - -.sg-header__brand__logo { - display: inline-block; - width: 100%; -} - -/* Navigation - ========================================================================== */ -.sg-header__nav { - max-height: 0; - overflow: auto; - - transition: max-height .3s ease; - - &.mobile-nav-open { - max-height: 500px; // big enough - - border-top: 1px solid $grey--light; - } - - @media (min-width: $screen-md-min) { - max-height: none; - - border-top: none; - } -} - -/* Mobile toggle button - ========================================================================== */ -.sg-header__nav__btn { - float: right; - margin: 10px 0 0; - padding: 1.25em 1em; - - box-shadow: none; - border: none; - appearance: none; - background: none; - - font-size: 12px; - line-height: 1; - color: $grey; - - transition: color .3s ease; - - &:focus, &:active { - color: $grey; - outline: none; - } - - &:hover { - color: $white; - } - - @media (min-width: $screen-md-min) { - display: none; - } -} - -/* Hamburger - ========================================================================== */ -.sg-header__nav__btn__icon { - position: relative; - - width: 28px; - height: 20px; - padding: 0; - margin: 0; - transform: rotate(0deg); - - box-shadow: none; - - line-height: 1; - - transition: .5s ease-in-out; - cursor: pointer; - - span { - position: absolute; - - display: block; - height: 2px; - width: 50%; - - background: $black; - - opacity: 1; - transform: rotate(0deg); - transition: .25s ease-in-out; - - &:nth-child(even) { - left: 50%; - - border-radius: 0 2px 2px 0; - } - - &:nth-child(odd) { - left: 0; - - border-radius: 2px 0 0 2px; - } - - &:nth-child(1), - &:nth-child(2) { - top: 0; - } - - &:nth-child(3), - &:nth-child(4) { - top: 8px; - } - - &:nth-child(5), - &:nth-child(6) { - top: 16px; - } - } - - .mobile-nav-open & { - - span { - - &:nth-child(1), - &:nth-child(6) { - transform: rotate(45deg); - } - - &:nth-child(2), - &:nth-child(5) { - transform: rotate(-45deg); - } - - &:nth-child(1) { - left: 3px; - top: 6px; - } - - &:nth-child(2) { - left: calc(50% - 3px); - top: 6px; - } - - &:nth-child(3) { - left: -50%; - - opacity: 0; - } - - &:nth-child(4) { - left: 100%; - - opacity: 0; - } - - &:nth-child(5) { - top: 14px; - left: 3px; - } - - &:nth-child(6) { - top: 14px; - left: calc(50% - 3px); - } - } - } -} - - -/* Navigation - ========================================================================== */ -.sg-header__nav__list { - margin: 0 0 20px; - - text-align: right; - - ul, & { - padding: 0; - list-style: none; - } - - @media (max-width: $screen-sm-max) { - ul { - display: none; - } - } -} - -.sg-header__nav__list__item { - display: block; - margin: 20px 0 0; - - text-align: left; - - a { - display: block; - padding: 5px 10px; - - color: $black; - font-size: 16px; - font-weight: bold; - text-decoration: none; - - transition: color .3s ease, border .3s ease; - - &:hover { - border-color: $grey; - - color: $black; - text-decoration: none; - } - } - - &.active { - border-bottom: 0; - - > ul { - display: block; - - border-top: 1px solid $grey; - } - - > a { - margin-bottom: -1px; - - border-color: $primary-color; - - color: $primary-color--dark; - } - } - - ul { - - li { - position: relative; - - &.children { - > a:before { - display: block; - } - } - - a { - position: relative; - - padding: 6px 24px; - - border-bottom: 1px solid $grey; - - font-weight: normal; - font-size: 14px; - - &:before { - content: ' '; - - position: absolute; - top: 0; - bottom: 0; - left: -5px; - - width: 5px; - - background: $grey--dark; - - transition: transform .25s ease; - } - - &:hover { - - &:before { - transform: translate3d(5px, 0, 0); - } - } - } - - &.active { - - > a { - font-weight: bold; - - &:before { - transform: translate3d(5px, 0, 0); - } - } - - ul { - display: block; - } - } - - ul { - display: none; - - background: $grey--light; - - li { - - a { - padding: 6px 24px 6px 36px; - - &:hover { - - &:before { - display: block; - } - } - } - } - } - } - } -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_cards.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_cards.scss deleted file mode 100644 index e2fa0509ce..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_cards.scss +++ /dev/null @@ -1,236 +0,0 @@ -/* ========================================================================== - Structures - Cards - ========================================================================== */ - -/* General - ========================================================================== */ -.sg-card { - position: relative; - - margin: 0 0 15px; - - background: $white; - border: 1px solid $grey; - - border-radius: 4px; - - & + & { - margin-top: 30px; - } -} - -.sg-card__anchor { - position: relative; - - padding: 30px 0 10px; -} - -/* Title - ========================================================================== */ -.sg-card__heading { - padding: 10px 15px; - margin: 0; - - border-radius: 4px 4px 0 0; - border-bottom: 1px solid $grey; - - color: $black; - font-family: $primary-font; - font-size: 21px; - - &:target:before { - content: ' '; - - display: block; - height: 100px; - margin: -100px 0 0; - } -} - - -/* Body - ========================================================================== */ -.sg-card__body { - - @media (min-width: $screen-sm-min) { - display: flex; - width: 100%; - } - - &--full-width { - display: block; - - .sg-card__example, - .sg-card__description { - width: 100%; - } - } -} - -.sg-card__example { - flex: 1 1 auto; - padding: 15px; - //max-width: 1190px; - - small { - display: block; - margin: 0 0 5px; - - font-size: 12px; - color: $black; - } - - > p:first-child { - margin-top: 0; - } - - @media (min-width: $screen-sm-min) { - width: 60%; - } - - // override the bootstrap container width as this conflicts with the IotaCSS container class - .container { - width: auto; - } -} - -.sg-card__description { - flex: 1 1 auto; - - font-size: 14px; - line-height: 1.4; - - p { - margin: 1em 0; - - + strong { - display: block; - margin-top: 2em; - } - } - - ul { - padding: 0; - margin: 0 10px; - - list-style: none; - - li { - position: relative; - - padding: 0 0 15px 15px; - margin: 0; - - line-height: 1.6; - - &:before { - content: '-'; - - position: absolute; - left: 0; - } - } - } - - blockquote { - padding-left: 16px; - margin: 16px 0 16px 2px; - - border-left: 3px solid $grey; - } - - @media (min-width: $screen-sm-min) { - width: 40%; - } -} - -.sg-card__description__inner { - padding: 15px; - - > p:first-child + .sg-title { - margin-top: 0; - } - - pre { - background: none; - - code { - display: block; - } - } -} - -/* Toggle - ========================================================================== */ -.sg-card__footer { - background: lighten($grey--light, 2.5); - - border-radius: 0 0 4px 4px; -} - -.sg-card__footer__toggle { - line-height: 1; -} - -.sg-card__footer__toggle__button { - position: relative; - - display: inline-block; - width: 100%; - padding: 8px 20px; - margin: 0; - - background: none; - - border: none; - border-top: 1px solid $grey; - border-bottom: 1px solid $grey; - border-radius: 0; - outline: none; - - color: $grey--dark; - font-size: 14px; - line-height: 1; - text-align: center; - text-transform: uppercase; - - appearance: none; - cursor: pointer; - user-select: none; - vertical-align: middle; - white-space: nowrap; - - transition: color .3s ease; - - &:hover { - color: $black; - } - - .hide-code { - display: none; - } - - &.active { - - .hide-code { - display: block; - } - - .show-code { - display: none; - } - } -} - -.sg-card__footer__toggle__content { - position: relative; - - display: block; - overflow: hidden; -} - -/* Markup - ========================================================================== */ -.sg-card__footer__toggle__content__code-snippet { - position: relative; -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_code-snippet.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_code-snippet.scss deleted file mode 100644 index b29b6a2ef0..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_code-snippet.scss +++ /dev/null @@ -1,116 +0,0 @@ -$code-block-gutter: 2px; - -.code-snippet-container { - display: flex; - margin: -#{$code-block-gutter / 2}; -} - -.code-snippet { - position: relative; - - display: flex; - flex: 1 1 0; - padding: 0 #{$code-block-gutter / 2}; - max-height: 500px; - min-width: 0; -} - -pre.code-snippet__code-block { - width: 100%; - margin: 0; - - background: $primary-color--dark;//#192E47; - - font-size: 13px; -} - -/* Clipboard - ========================================================================== */ -.code-snippet__copy { - position: absolute; - top: 10px; - right: 10px; - - > button { - position: relative; - z-index: 1; - - display: inline-block; - padding: .15em .5em; - - background: $primary-color--dark; - - border: 0; - border-radius: 8px; - - color: $grey; - font-size: 14px; - - appearance: none; - - transition: background-color .3s ease, color .3s ease; - - &:hover { - background: $white; - - color: $primary-color--dark; - - .tooltip--info { - transform: translate3d(-50%, 0, 0); - - opacity: 1; - } - } - - &:focus { - outline: none; - - .tooltip--success { - transform: translate3d(-50%, 0, 0); - - opacity: 1; - } - - .tooltip--info { - opacity: 0; - } - } - } - - .tooltip { - position: absolute; - bottom: -50px; - left: 50%; - z-index: -1; - - display: inline-block; - padding: .5em 1em; - transform: translate3d(-50%, -20px, 0); - - background: $primary-color; - opacity: 0; - - border-radius: 3px; - - color: $white; - font-weight: bold; - white-space: nowrap; - - transition: opacity .2s ease, transform .3s ease; - - &:after { - content: ' '; - - position: absolute; - top: -6px; - left: calc(50% - 6px); - - display: block; - width: 12px; - height: 12px; - transform: rotate3d(0, 0, 1, 45deg); - - background: $primary-color; - } - } -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_colors.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_colors.scss deleted file mode 100644 index 144770b1c1..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_colors.scss +++ /dev/null @@ -1,68 +0,0 @@ -/* ========================================================================== - Structures - Color cards - ========================================================================== */ - -/* General - ========================================================================== */ -.sg-color { - display: inline-block; - width: calc((100% - 60px) / 3); - max-width: 140px; - margin: 10px; - - border-radius: 4px; - - box-shadow: 0 0 4px 0 rgba(0, 0, 0, .35), 0 3px 2px 0 rgba(0, 0, 0, .18); -} - - -/* Wrapper - ========================================================================== */ -.sg-color__wrapper { - display: flex; - flex-wrap: wrap; -} - - -/* Color - ========================================================================== */ -.sg-color__color { - display: block; - height: 100px; - - border-radius: 4px 4px 0 0; - border-bottom: 1px solid $grey; - - color: $white; - vertical-align: middle; - text-align: center; -} - -.sg-color__color__text { - position: relative; - top: 50%; - - transform: translateY(-50%); -} - -/* Description - ========================================================================== */ -.sg-color__description { - padding: 0 8px 8px; -} - -.sg-color__description__title { - margin-top: 10px; - - color: $black; - font-size: 14px; - font-family: $primary-font; - font-weight: bold; -} - -.sg-color__description__value { - margin-bottom: 5px; - - color: $grey--dark; - font-size: 15px; -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_icons.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_icons.scss deleted file mode 100644 index 5bd7112626..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_icons.scss +++ /dev/null @@ -1,58 +0,0 @@ -/* ========================================================================== - Structures - Icons - ========================================================================== */ - -/* General - ========================================================================== */ -.sg-icon-wrapper { - display: flex; - flex-wrap: wrap; -} - -.sg-icon { - display: inline-block; - flex: 0 1 auto; - width: auto; - margin: 10px 20px 10px 0; - - border-radius: 4px; - - box-shadow: 0 0 4px 0 rgba(0, 0, 0, .35), 0 3px 2px 0 rgba(0, 0, 0, .18); -} - -/* Color - ========================================================================== */ -.sg-icon__icon { - display: flex; - align-items: center; - justify-content: center; - height: 60px; - - border-bottom: 1px solid $grey; - - text-align: center; - vertical-align: middle; - - img { - display: block; - margin: 20px; - max-height: 80%; - } -} - -/* Description - ========================================================================== */ -.sg-icon__description { - padding: 10px; - - background: rgba($grey--light, .5); - - border-radius: 0 0 4px 4px; - - color: $red; - font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', 'monospace'; - font-size: 12px; - text-align: center; - - white-space: nowrap; -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_sections.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_sections.scss deleted file mode 100644 index b1d1edaf93..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/structures/_sections.scss +++ /dev/null @@ -1,17 +0,0 @@ -/* ========================================================================== - Structures - Sections - ========================================================================== */ - -.section { - - & + & { - margin-top: 50px; - } -} - -.section__title { - margin-bottom: 20px; - - color: $black; - font-family: $primary-font; -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/vendors/bootstrap-components/_grid.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/vendors/bootstrap-components/_grid.scss deleted file mode 100644 index d9643b079f..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/components/vendors/bootstrap-components/_grid.scss +++ /dev/null @@ -1,11 +0,0 @@ -/* ========================================================================== - Bootstrap grid adjustments - ========================================================================== */ - - -/* Container - ========================================================================== */ -.container--styleguide { - width: 100% !important; - max-width: 1700px !important; -} \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/_config.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/_config.scss deleted file mode 100644 index 7dcb3e6c16..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/_config.scss +++ /dev/null @@ -1,21 +0,0 @@ -/* ========================================================================== - Config - - This file is exclusively intended for setting up imports - Never add styles directly to this file - ========================================================================== */ - -/* General - ========================================================================== */ -@import "general/colors", - "general/sizes"; - -@import "general/typography/fonts", - "general/typography/bodycopy", - "general/typography/headings"; - - -/* Vendors - ========================================================================== */ -@import "vendors/bootstrap-vars"; -@import "vendors/bootstrap-imports"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/_colors.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/_colors.scss deleted file mode 100644 index f3a7e0910c..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/_colors.scss +++ /dev/null @@ -1,26 +0,0 @@ -/* ========================================================================== - Colors - - This file is exclusively intended for setting up variables - Never add styles directly to this file - ========================================================================== */ - -/* Colors - ========================================================================== */ -$black: #373737; -$white: #FFFFFF; - -$grey--dark: #808080; -$grey: #D8D8D8; -$grey--light: #f3f3f3; - -$red: #dd1144; - -$primary-color--dark: #1D2948; -$primary-color: #009EE3; - -/* Specifics - ========================================================================== */ -$text-color: $black; -$link-color: $primary-color; -$link-color--hover: darken($primary-color, 15%); diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/_sizes.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/_sizes.scss deleted file mode 100644 index cc584c09d7..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/_sizes.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* ========================================================================== - Sizes - - This file is exclusively intended for setting up variables - Never add styles directly to this file - ========================================================================== */ - - -/* Margins - ========================================================================== */ -$default-margin: 15px; - - diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_bodycopy.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_bodycopy.scss deleted file mode 100644 index 372deb428c..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_bodycopy.scss +++ /dev/null @@ -1,23 +0,0 @@ -/* ========================================================================== - Bodycopy - - This file is exclusively intended for setting up variables - Never add styles directly to this file - ========================================================================== */ - -/* Line-height - ========================================================================== */ -$line-height--base: 1.6; - -$line-height--small: 1.1; -$line-height--medium: 1.2; - -$line-height--headers: 1; - - -/* Font sizes - ========================================================================== */ -$font-size--base: 10px; -$font-size--default: 16px; -$font-size--small: 12px; -$font-size--big: 18px; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_fonts.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_fonts.scss deleted file mode 100644 index 8ad9d9ef8b..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_fonts.scss +++ /dev/null @@ -1,26 +0,0 @@ -/* ========================================================================== - Fonts - - This file is exclusively intended for setting up variables - Never add styles directly to this file - ========================================================================== */ - -/* Webfonts - ========================================================================== */ -$primary-font: 'Lato', Helvetica, Arial, sans-serif; - - -/* Iconfonts - ========================================================================== */ -@font-face { - font-family: 'icomoon'; - src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfsAAAC8AAAAYGNtYXAXVtKTAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZpDnbsgAAAF4AAAKYGhlYWQLuTCrAAAL2AAAADZoaGVhCVEFmQAADBAAAAAkaG10eDjAAXkAAAw0AAAARGxvY2ER4hRwAAAMeAAAACRtYXhwABgAwQAADJwAAAAgbmFtZZlKCfsAAAy8AAABhnBvc3QAAwAAAAAORAAAACAAAwPFAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpDAPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qz//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAFgAJgWOA2kAIAAAARcWFAcBBiIvAS4BIzQwMS4BMwEmND8BNjIXCQE2MhcxBTBeHx/9sR9XH1MHAwECAQH+Dh8fXR9YHwGpAacfVx8DaF0fVx/9sB8fUgcDAQEBAfEfVx9dHx/+VwGqHh8AAAAABAAA/8IDjAOoAAoALQA7AEkAACUUBiMhIiY1ESERAyMVFAYjIiY9ASEVFAYjIiY9ASMiBhURFBYzITI2NRE0JiMHMjY9ATQmIyIGHQEUFiEyNj0BNCYjIgYdARQWAzsaE/1wExoC6i0dKB0dJv6zJx4cJBk0Sko0ApA0Sko0YA4TEw4OFBT+Og4UFA4OExNAExoaEwGx/k8DDmsYJiYYa2sYJiYYa0o0/XA0Sko0ApA0SowUDqIOFBQOog4UFA6iDhQUDqIOFAACAAD/0gJMA7MADgAzAAA3FBYzITI2NTQmIyEiBhUBIgYPARE0JiMiBhURJyYiBwYUHwEeATMyNj8BPgE1NCYnLgEjACwfAbYfLCwf/kofLAHsER0LPC8iITA8F0IYFxfHDB0QEB4LwwwMDAwLHRAeHy0tHyAtLSACFQwMPAGCIjAwIv6CPRcXGEMYygsNDQvGCx4QEB4LDAwAAAAEAAf/0gWPA7wAAwARABUAIQAAJQkBEQcOASMhIiYvAQEFJQEHCQIRNzQ2MyEyFjEVCQE3BY/+gwF9Fg4pF/tBFykOBwGbARkBFQGgB/qOAXz+hBUhLwS/OBT9VP1OA1cBegFl/SFfEhQUEggBnvX1/mIIAz7+mf6IAt9dASgyBf2SAnUHAAAAAQAA/9EB3AO1ABYAAAEjNTQ2OwE1IyIOAh0BIxUzETMRMzcB3KIfDnOeQlMwEmVl1ZASAnNnHROrKj9JHnKw/g4B8rAAAAAABQAA/+QD1QO5AEgAkACcALEAvgAAASIGBw4BBw4BBw4BBw4BBw4BFRQWFx4BFx4BFx4BFx4BFx4BMzI2Nz4BNz4BNz4BNz4BNz4BNTQmJy4BJy4BJy4BJy4BJy4BIxUyFhceARceARceARceARceARUUBgcOAQcOAQcOAQcOAQcOASMiJicuAScuAScuAScuAScuATU0Njc+ATc+ATc+ATc+ATc+ARMiJjU0NjMyFhUUBgMiDgIVFB4CMzI+AjU0LgIjJRQGIyImNTQ2MzIWFQHrZD8oJzgYGCoVFBsJCQwCAgEBAgIMCQkbFBUqGBg4Jyg/ZGQ/Jyc5FxgrFBUaCgkMAgEBAQECDAkKGhUUKxgXOScnP2RiPSckKg0RGw0MEgYFCwECAQECAQsFBhIMDRsRDSokJz1iYz0nIysNERoNDREHBQoCAQICAQIKBQcRDQ0aEQ0rIyc9Y0RgYEREX19ENFxFJydFXDQ0XEQoKERcNAFBIxgZIiIZGCMDuQECAQwJChsUFCsYFzknJz9kZD8oJzgYGCoVFBsJCQwCAgEBAgIMCQkbFBUqGBg4Jyg/ZGQ/Jyc5FxgrFBQbCgkMAQIBWAECAgoFBhIMDRsRDSokJz1iYz0nJCoNERoNDREHBQoCAgEBAgIKBQcRDQ0aEQ0qJCc9Y2I9JyQqDREbDQwSBgUKAgIB/cpgRENgYENEYAGgKERcNDVbRScnRVs1NFxEKAoZIiIZGCIiGAAAAAABAAD/3gQnA8AAqgAABSoBIzEqASMiJicuAScuASMiBgcOASMiJicuAScuAScuAScuATU0Njc+Azc4ATE+AScuAScuAScuATc+ATMyFhceATMyNjMuATUuATc+AzM6ATEzMh4CFxYGBxUOARUyFhcxPgE3PgEzMhYXMR4BFRQGBw4BBw4BBwYWFxQwMR4DFx4BFRQGBw4BBw4BBw4BBw4BKwEiJicuASMiBgcOAQcOASMCGgIEAgEDATBBHhQoFgsWCxMeCgcLBQQJAgIDAQQGB0s3BAEBBQQ6VDccAQcDBQgqEQQIAyIPAQMaDQQGAhAbDBEPAQEBBAESGUtMQRABEgMQQktLGhEBAwEBAQ4PCxoOBQgDBQoEDA4SHgMIBBErCAQDBwEcN1Q5BQUBAQQ4SwYGBAEDAgEHBgEECwgMHhIKFgsWKBQeQi8iJBQOGAQCAgUCAQIEBwYMBhASAQsdCwEEAQQHAQk8QDQDDxgKExMFAgIBDhkHDA8BAgcHCggQCTZ5JjpCIQkJIUI6Jnk2AwgPBwkBAQcGAgICAgQPCQgWDAECAgUTEwoYDgEDNEA8CQEHBAEEAQsdCwEREAYMBwUFAQEDBAICBBcPFCQAAAYAAP/GA0kDsAAQAB8AIwAoACwAPQAAASEiBhUXHgEzITI2NTc0JiMlMhYVMzQmIyIGFTM0NjMbATMDIxEzESMDEyMDJxwBFxMeATMhMjY3EzY0NSEDOvzVBgkDAQkHAyAGCgUJBv5qHyxUXUJBXVQsHnYrOCvJNzeFKjcrlQFRAhwSAdASHAJUAf0pAvkJBmYGCgoGZgYJbCcbOlNTOhsn/LsBzP40Acz+NAHM/jQBzFkECQX9vxMZGRMCQQUJBAAAAAABAAr/0QTpA7UATQAAAT4BNw4BBy4BIyIOAhUUFhcuAycOARUUFhcuASccARUUHgIXDgEjIiYnHgMXDgMjIiYnHgMzMiQ+ATU8ATU+ATcOAQcEVig6DyVSLCNgODVdRSgDA1CVhnUvERI+NCA6Gh83SywQIhENGAsMLj9MKiFKUFYtEB4PKl1jaDaxAQ+5XyVBGSJKJwMYF0gsFh8IJSonRFw0Dx0NBChEXTkbQCNBbyEBEA4BAQEuUkEtCQQFAwIlQC4bARkoHA4BAhsqHQ+Czv99CBAIG0ImEBQEAAAAAAEATP/3Ao4DkwAhAAAlBwYiJwEmND8BPgExOAExNjAxATYyHwEWFAcJARYUBzkBAo5BFT0V/mYVFTkFAgIBWBU9FUEVFf7ZAScVFThBFRUBmRY8FToFAgIBWRUVQRU9Ff7Z/tsVPRUAAQBM//cCjgOTACEAABM3NjIXARYUDwEOATE4ARUGFDUBBiIvASY0NwkBJjQ3OQFMQRU9FQGaFRU5BQIC/qgVPRVBFRUBJv7aFRUDUkEVFf5nFjwWOQUCAQEBAf6nFRVBFT0VAScBJRU8FgAAAQBYACYFjgNoACEAADcnJjQ3ATYyHwEeARc4ATMeATUBFhQPAQYiJwkBBiInOQG1XR8fAk8fVx9SBwMBAQEBAfIfH14fVx/+Vv5ZHlgfJl4eVx8CUB8fUgcCAQIBAf4OH1ceXh8fAan+Vx8fAAAAAAEAIP/YA6oDwAAwAAABNzY0LwEuASMiBg8BJy4BIyIGDwEGFB8BBwYUHwEeATMyNj8BFx4BMzI2PwE2NC8BAq78ICA9ECcWFSgP7+4PKBUWJxA+Hx/8/CAgPRAnFhUoD+/uDygVFigPPh8f/AHM/SBaHz4QEBAQ7+8QEBAQPh9aIP3+H1ogPg8QEA/w8A8QEA8+IFof/gAAAQAAAAEAAN1yknlfDzz1AAsEAAAAAADThXYWAAAAANOFdhYAAP/CBY8DwAAAAAgAAgAAAAAAAAABAAADwP/AAAAFxwAAAAAFjwABAAAAAAAAAAAAAAAAAAAAEQQAAAAAAAAAAAAAAAIAAAAFxwBYA6cAAAJVAAAFqwAHAewAAAPXAAAEKQAAA1UAAAT2AAoCxQBMAsUATAXHAFgDygAgAAAAAAAKABQAHgBWALoBCAFMAXACiANwA9IEQgR2BKwE5AUwAAEAAAARAL8ABgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA") format('truetype'); - font-weight: normal; - font-style: normal; -} - -/* Defaults - ========================================================================== */ -$font-family--base: $primary-font; -$font-family--headings: $font-family--base; -$font-family--buttons: $font-family--base; \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_headings.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_headings.scss deleted file mode 100644 index 987daeb93a..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/general/typography/_headings.scss +++ /dev/null @@ -1,17 +0,0 @@ -/* ========================================================================== - Headings - - This file is exclusively intended for setting up variables - Never add styles directly to this file - sizes are defined without unit to enable the use of the rem function - ========================================================================== */ - -$line-height--headers: 1.2; - -$font-size-h1: 45px; -$font-size-h1--small: 32px; -$font-size-h2: 32px; -$font-size-h3: 23px; -$font-size-h4: 23px; -$font-size-h5: 18px; -$font-size-h6: 14px; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/vendors/_bootstrap-imports.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/vendors/_bootstrap-imports.scss deleted file mode 100644 index 0fd3fd7638..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/vendors/_bootstrap-imports.scss +++ /dev/null @@ -1,68 +0,0 @@ -/* ========================================================================== - Imports for Bootstrap - - This file is exclusively intended for setting up imports - Never add styles directly to this file - ========================================================================== */ - -/* Vars and mixins - ========================================================================== */ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables'; -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins'; - - -/* Reset and dependencies - ========================================================================== */ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons'; - - -/* Core CSS - ========================================================================== */ -// @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding'; -// @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type'; -// @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code'; -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables'; -// @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons'; - - -/* Components - ========================================================================== */ -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-gro ups'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pager'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close'; - - -/* Components /w javascript - ========================================================================== */ -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tooltip'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/popovers'; -//@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/carousel'; - - -/* Utility classes - ========================================================================== */ -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities'; -@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities'; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/vendors/_bootstrap-vars.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/vendors/_bootstrap-vars.scss deleted file mode 100644 index 78abb1754e..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/config/vendors/_bootstrap-vars.scss +++ /dev/null @@ -1,82 +0,0 @@ -/* ========================================================================== - Boostrap Variables - - This file is exclusively intended for setting up variables - Never add styles directly to this file - ========================================================================== */ - - -/* Grid - ========================================================================== */ -//== Media queries breakpoints -// -//## Define the breakpoints at which your layout will change, adapting to different screen sizes. - -// Extra small screen / phone -//** Deprecated `$screen-xs` as of v3.0.1 -$screen-xs: 480px; -//** Deprecated `$screen-xs-min` as of v3.2.0 -$screen-xs-min: $screen-xs; -//** Deprecated `$screen-phone` as of v3.0.1 -$screen-phone: $screen-xs-min; - -// Small screen / tablet -//** Deprecated `$screen-sm` as of v3.0.1 -$screen-sm: 768px; -$screen-sm-min: $screen-sm; -//** Deprecated `$screen-tablet` as of v3.0.1 -$screen-tablet: $screen-sm-min; - -// Medium screen / desktop -//** Deprecated `$screen-md` as of v3.0.1 -$screen-md: 992px; -$screen-md-min: $screen-md; -//** Deprecated `$screen-desktop` as of v3.0.1 -$screen-desktop: $screen-md-min; - -// Large screen / wide desktop -//** Deprecated `$screen-lg` as of v3.0.1 -$screen-lg: 1200px; -$screen-lg-min: $screen-lg; -//** Deprecated `$screen-lg-desktop` as of v3.0.1 -$screen-lg-desktop: $screen-lg-min; - -// So media queries don't overlap when required, provide a maximum -$screen-xs-max: ($screen-sm-min - 1); -$screen-sm-max: ($screen-md-min - 1); -$screen-md-max: ($screen-lg-min - 1); - - -//== Grid system -// -//## Define your custom responsive grid. - -//** Number of columns in the grid. -$grid-columns: 12; -//** Padding between columns. Gets divided in half for the left and right. -$grid-gutter-width: 30px; -// Navbar collapse -//** Point at which the navbar becomes uncollapsed. -$grid-float-breakpoint: $screen-sm-min; -//** Point at which the navbar begins collapsing. -$grid-float-breakpoint-max: ($grid-float-breakpoint - 1); - - -//== Container sizes -// -//## Define the maximum width of `.container` for different screen sizes. - -// Small screen / tablet -$container-tablet: ((720px + $grid-gutter-width)); -//** For `$screen-sm-min` and up. -$container-sm: $container-tablet; - -// Medium screen / desktop -$container-desktop: ((940px + $grid-gutter-width)); -//** For `$screen-md-min` and up. -$container-md: $container-desktop; - -// Large screen / wide desktop -$container-large-desktop: ((1140px + $grid-gutter-width)); -//** For `$screen-lg-min` and up. -$container-lg: $container-large-desktop; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/_base.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/_base.scss deleted file mode 100644 index 0482bd3820..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/_base.scss +++ /dev/null @@ -1,21 +0,0 @@ -/* ========================================================================== - Base - ========================================================================== */ - -/* Box model - ========================================================================== */ -// Defined in frontend scss which is also included in the styleguide - - -/* Html & body - ========================================================================== */ -html.sg-styleguide { - - body { - position: relative; - - overflow-x: hidden; - - background-color: $white; - } -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/_general.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/_general.scss deleted file mode 100644 index 9d63801cc3..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/_general.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* ========================================================================== - General - - This file is exclusively intended for setting up imports - Never add styles directly to this file - ========================================================================== */ - -/* Base - ========================================================================== */ -@import "base"; - - -/* Typography - ========================================================================== */ -@import "typography/headings"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/typography/_headings.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/typography/_headings.scss deleted file mode 100644 index 7faa3bac6a..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/general/typography/_headings.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* ========================================================================== - Headings - ========================================================================== */ - -/* Shared - ========================================================================== */ - -h1, h2, h3, h4, h5, h6 { - - &.sg-title { - font-family: $primary-font; - } -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/helpers/_helpers.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/helpers/_helpers.scss deleted file mode 100644 index f8a63b13b1..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/helpers/_helpers.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* ========================================================================== - Helpers - - Never add styles directly to this file - set up imports - ========================================================================== */ - - -/* Placeholders - ========================================================================== */ -// @import "placeholders/.."; - - -/* Mixins - ========================================================================== */ -// @import ""; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/styleguide.scss b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/styleguide.scss deleted file mode 100644 index 9603d33b17..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/scss/styleguide.scss +++ /dev/null @@ -1,27 +0,0 @@ -@charset "UTF-8"; - -/* ========================================================================== - Stylesheet for all browsers - - Never add styles directly to this file - set up imports - Style guide: https://github.com/necolas/idiomatic-css - ========================================================================== */ - -/* Config - ========================================================================== */ -@import "config/config"; - - -/* Helpers - ========================================================================== */ -@import "helpers/helpers"; - - -/* General - ========================================================================== */ -@import "general/general"; - - -/* Pages - ========================================================================== */ -@import "components/components"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/layout.hbs b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/layout.hbs deleted file mode 100644 index a4a3987cc0..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/layout.hbs +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - Styleguide - - - - - - - - {{~> webfonts}} - - -
-
- - - -
- - - -
-
    - {{#each sections}} -
  • - {{name}} - {{#if children}} - - {{/if}} -
    • - {{/each}} -
-
-
- -
- {{#each sections}} -
-

{{ clean name }}

- {{~> section}} - - {{#children}} - {{~> childSection}} - {{/children}} -
- {{/each}} -
- - - - - diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/childSection.hbs b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/childSection.hbs deleted file mode 100644 index 5efc92aec7..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/childSection.hbs +++ /dev/null @@ -1,40 +0,0 @@ -
- {{#if code }} -
- {{clean name}} - {{~> section}} - - {{#children}} - {{~> childSection}} - {{/children}} -
- {{else}} - {{#if description }} -
- {{clean name}} - {{~> section}} - - {{#children}} - {{~> childSection}} - {{/children}} -
- {{else}} - {{#if colors }} -
- {{clean name}} - {{~> section}} - - {{#children}} - {{~> childSection}} - {{/children}} -
- {{else}} - {{clean name}} - - {{#children}} - {{~> childSection}} - {{/children}} - {{/if}} - {{/if}} - {{/if}} -
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/color.hbs b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/color.hbs deleted file mode 100644 index b6642ccf43..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/color.hbs +++ /dev/null @@ -1,10 +0,0 @@ -
-
-
{{ this.description }}
-
-
-
{{ this.name }}
- HEX {{ this.hex }} - RGB {{ this.rgb }} -
-
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/section.hbs b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/section.hbs deleted file mode 100644 index dd7508900a..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/section.hbs +++ /dev/null @@ -1,67 +0,0 @@ -{{#xif depth '==' '1'}} - {{#xif example '||' description}} -
-
- {{/xif}} -{{/xif}} - -
- {{#if example}} -
- {{#if example}} - {{{ example.description }}} - {{/if}} -
- {{/if}} - - {{#if colors}} -
-
- {{#each colors}} - {{~> color}} - {{/each}} -
-
- {{/if}} - - {{#if description}} -
-
- {{{description}}} -
-
- {{/if}} -
- -{{#if code}} -
-
- -
-
-
-
-
-
- -
- 
{{code.description}}
-
-
-
-
-
-{{/if}} - -{{#xif depth '==' '1'}} - {{#xif example '||' description}} -
- {{/xif}} -{{/xif}} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/webfonts.hbs b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/webfonts.hbs deleted file mode 100644 index b5fb0e9f7c..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/ui/styleguide/templates/partials/webfonts.hbs +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/_css.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/_css.html.twig index e39a2dde67..28a7fe9e97 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/_css.html.twig +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/_css.html.twig @@ -1,3 +1,7 @@ {% block css %} +<% if webpack %> + {{ encore_entry_link_tags('app') }} +<% else %> +<% endif %> {% endblock %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/_js.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/_js.html.twig new file mode 100644 index 0000000000..3e7550d2cf --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/_js.html.twig @@ -0,0 +1,3 @@ +{% block jsBundle %} + {{ encore_entry_script_tags('app') }} +{% endblock %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/layout.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/layout.html.twig index 955a566e11..a204786417 100755 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/layout.html.twig +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/Resources/views/Layout/layout.html.twig @@ -38,6 +38,11 @@ {# CSS #} {% include '<% if not isV4 %><%= shortBundleName %>/<% endif %>Layout/_css.html.twig' %} +<% if webpack %> + + {# JS #} + {% include '<% if not isV4 %><%= shortBundleName %>/<% endif %>Layout/_js.html.twig' %} +<% endif %> {% endapply %} @@ -89,10 +94,12 @@ {% include '<% if not isV4 %><%= shortBundleName %>/<% endif %>Layout/_cookieconsent.html.twig' %} {% endblock %} +<% if not webpack %> {# JS Footer #} {% block jsBundle %} {% include '<% if not isV4 %><%= shortBundleName %>/<% endif %>Layout/_js_footer.html.twig' %} {% endblock %} +<% endif %> <% if demosite %> diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/.eslintrc b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/.eslintrc similarity index 100% rename from src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/.eslintrc rename to src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/.eslintrc diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/.nvmrc b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/.nvmrc new file mode 100755 index 0000000000..958b5a36e1 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/.nvmrc @@ -0,0 +1 @@ +v14 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/.stylelintrc b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/.stylelintrc similarity index 100% rename from src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/.stylelintrc rename to src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/.stylelintrc diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/buildUI.sh b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/buildUI.sh similarity index 100% rename from src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/buildUI.sh rename to src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/frontend-config/buildUI.sh diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/.nvmrc b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/.nvmrc deleted file mode 100755 index dae199aecb..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v12 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/config/webpack.config.styleguide.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/config/webpack.config.styleguide.js deleted file mode 100644 index 1d4bbfc757..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/config/webpack.config.styleguide.js +++ /dev/null @@ -1,14 +0,0 @@ -import path from 'path'; -import defaultConfig from './webpack.config.default'; - -export default function webpackConfigStyleguide(speedupLocalDevelopment, optimize = false) { - const config = defaultConfig(speedupLocalDevelopment, optimize); - - config.entry = './{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/styleguide/js/styleguide.js'; - config.output = { - path: path.resolve(__dirname, '../../{% if isV4 %}public{% else %}web{% endif %}/frontend/styleguide/js'), - filename: 'styleguide.js', - }; - - return config; -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/configured-tasks.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/configured-tasks.js index 670d88a43e..7ea0ca2150 100755 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/configured-tasks.js +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/configured-tasks.js @@ -10,10 +10,8 @@ import createCopyTask from './tasks/copy'; import { createCssLocalTask, createCssOptimizedTask } from './tasks/css'; import createBundleTask from './tasks/bundle'; import createServerTask from './tasks/server'; -import createStyleguideTask from './tasks/livingcss'; import webpackConfigApp from './config/webpack.config.app'; import webpackConfigAdminExtra from './config/webpack.config.admin-extra'; -import webpackConfigStyleguide from './config/webpack.config.styleguide'; export const images = createImagesTask({ src: './{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/img/**', @@ -75,7 +73,6 @@ export const server = createServerTask({ '{% if isV4 %}public{% else %}web{% endif %}/frontend/css/*.css', '{% if isV4 %}public{% else %}web{% endif %}/frontend/js/*.js', '{% if isV4 %}public{% else %}web{% endif %}/frontend/img/**/*', - '{% if isV4 %}public{% else %}web{% endif %}/frontend/styleguide/*.html', ], open: false, reloadOnRestart: true, @@ -92,37 +89,6 @@ export const server = createServerTask({ }, }); -export const generateStyleguide = createStyleguideTask({ - src: './{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/scss/**/*.scss', - dest: './{% if isV4 %}public{% else %}web{% endif %}/frontend/styleguide', - template: './{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/styleguide/templates/layout.hbs', - partials: './{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/styleguide/templates/partials/*.hbs', - sortOrder: [ - { - Index: [ - 'Colors', - 'Typography', - 'Blocks', - 'Pageparts', - ], - }, - ], -}); - -export const copyStyleguide = createCopyTask({ - src: ['./node_modules/prismjs/themes/prism-okaidia.css'], - dest: './{% if isV4 %}public{% else %}web{% endif %}/frontend/styleguide/css', -}); - -export const cssStyleguideOptimized = createCssOptimizedTask({ - src: './{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/styleguide/scss/*.scss', - dest: './{% if isV4 %}public{% else %}web{% endif %}/frontend/styleguide/css', -}); - -export const bundleStyleguideOptimized = createBundleTask({ - config: webpackConfigStyleguide(consoleArguments.speedupLocalDevelopment, true), -}); - export function buildOnChange(done) { gulp.watch('./{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/js/**/!(*.spec).js', bundleLocal); gulp.watch('./{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/admin/js/**/!(*.spec).js', bundleAdminExtraLocal); @@ -135,10 +101,5 @@ export function testOnChange(done) { gulp.watch('./{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/js/**/*.js', eslint); gulp.watch('./{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/scss/**/*.scss', stylelint); gulp.watch('./{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/scss/**/*.scss', cssLocal); - gulp.watch([ - './{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/scss/**/*.md', - './{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/styleguide/**/*.hbs', - ], generateStyleguide); - gulp.watch('./{% if isV4 %}assets{% else %}src/{{ bundle.namespace|replace({'\\':'/'}) }}/Resources{% endif %}/ui/styleguide/scss/**/*.scss', cssStyleguideOptimized); done(); } diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/tasks/livingcss.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/tasks/livingcss.js deleted file mode 100644 index 169581fce5..0000000000 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/bin/tasks/livingcss.js +++ /dev/null @@ -1,86 +0,0 @@ -import gulp from 'gulp'; -import livingcss from 'gulp-livingcss'; -import path from 'path'; - -export default function createStyleguideTask({ - src = undefined, - dest = undefined, - template = undefined, - sortOrder = undefined, - partials = undefined, -}) { - return function styleguide() { - return gulp.src(src) - .pipe(livingcss(dest, { - template, - sortOrder, - preprocess(context, tmpl, Handlebars) { - Handlebars.registerHelper('json', (data) => JSON.stringify(data)); - Handlebars.registerHelper('clean', (data) => data.replace(/(\\|%5[cC])/g, '')); - - return livingcss.utils.readFileGlobs(partials, (data, file) => { - // make the name of the partial the name of the file - const partialName = path.basename(file, path.extname(file)); - Handlebars.registerPartial(partialName, data); - Handlebars.registerHelper('xif', (v1, operator, v2, options) => { - switch (operator) { - case '==': - // eslint-disable-next-line eqeqeq - return (v1 == v2) ? options.fn(this) : options.inverse(this); - case '===': - return (v1 === v2) ? options.fn(this) : options.inverse(this); - case '<': - return (v1 < v2) ? options.fn(this) : options.inverse(this); - case '<=': - return (v1 <= v2) ? options.fn(this) : options.inverse(this); - case '>': - return (v1 > v2) ? options.fn(this) : options.inverse(this); - case '>=': - return (v1 >= v2) ? options.fn(this) : options.inverse(this); - case '&&': - return (v1 && v2) ? options.fn(this) : options.inverse(this); - case '||': - return (v1 || v2) ? options.fn(this) : options.inverse(this); - default: - return options.inverse(this); - } - }); - - Handlebars.registerHelper('counter', (index) => index + 1); - Handlebars.registerHelper('version', (filename) => `${filename}?${Date.now()}`); - }); - }, - tags: { - color() { - const matches = (this.tag.description).match(/\[(.*?)\]/); - - if (matches) { - const section = this.sections[matches[1]]; - - if (section) { - section.colors = section.colors || []; - section.colors.push({ - name: this.tag.name, - hex: this.tag.type, - rgb: hexToRgb(this.tag.type), - }); - } - } - }, - }, - })) - .pipe(gulp.dest(dest)); - }; -} - -function hexToRgb(hex) { - const strippedHex = hex.replace(/[^0-9A-F]/gi, ''); - const bigint = parseInt(strippedHex, 16); - /* eslint-disable no-bitwise */ - const r = (bigint >> 16) & 255; - const g = (bigint >> 8) & 255; - const b = bigint & 255; - /* eslint-enable no-bitwise */ - - return `${r}, ${g}, ${b}`; -} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/gulpfile.babel.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/gulpfile.babel.js index f246d04f0e..842b1aa639 100755 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/gulpfile.babel.js +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/gulpfile.babel.js @@ -11,11 +11,7 @@ import { bundleLocal, bundleOptimized, bundleAdminExtraLocal, - bundleAdminExtraOptimized, - generateStyleguide, - cssStyleguideOptimized, - bundleStyleguideOptimized, - copyStyleguide, + bundleAdminExtraOptimized, , server, buildOnChange, testOnChange, @@ -28,13 +24,6 @@ const analyze = gulp.series( const test = gulp.series(analyze); -const buildStyleguide = gulp.series( - cssStyleguideOptimized, - bundleStyleguideOptimized, - generateStyleguide, - copyStyleguide, -); - const buildLocal = gulp.series( clean, images, @@ -42,7 +31,6 @@ const buildLocal = gulp.series( cssLocal, bundleLocal, bundleAdminExtraLocal, - buildStyleguide, ); const buildOptimized = gulp.series( @@ -52,7 +40,6 @@ const buildOptimized = gulp.series( cssOptimized, bundleOptimized, bundleAdminExtraOptimized, - buildStyleguide, ); const testAndBuildOptimized = gulp.series( diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/package.json b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/package.json index f9e6dea5ca..21d10ea5ba 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/package.json +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol/package.json @@ -39,7 +39,6 @@ "gulp-if": "^2.0.2", "gulp-imagemin": "^4.1.0", "gulp-inject": "^4.2.0", - "gulp-livingcss": "^2.1.0", "gulp-postcss": "^6.3.0", "gulp-sass": "^4.0.0", "gulp-sourcemaps": "^2.4.1", diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/package.json b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/package.json new file mode 100644 index 0000000000..d03df9d4ee --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/package.json @@ -0,0 +1,51 @@ +{ + "author": "Kunstmaan", + "license": "ISC", + "private": true, + "scripts": { + "dev": "encore dev", + "start": "encore dev --watch", + "build": "encore production --progress" + }, + "browserslist": [ + "> 1%", + "last 2 Chrome major versions", + "last 2 Firefox major versions", + "last 2 Safari major versions", + "last 2 Edge major versions", + "not dead", + "not IE 11" + ], + "dependencies": { + "picturefill": "^3.0.3", + "bootstrap-sass": "^3.3.7", + "svgxuse": "^1.2.6", + "gsap": "^1.19.1"{% if demosite %}, + "ramda": "^0.23.0", + "cargobay": "Kunstmaan/cargobay#0.8.6-support", + "jquery": "^3.1.1", + "velocity-animate": "1.2.3"{% endif %} + + }, + "devDependencies": { + "@kunstmaan/eslint-config": "^1.1.0", + "@kunstmaan/stylelint-config": "^2.0.1", + "@symfony/stimulus-bridge": "^2.0.0", + "@symfony/webpack-encore": "^1.0.0", + "browser-sync": "^2.27.4", + "browser-sync-webpack-plugin": "^2.3.0", + "core-js": "^3.0.0", + "eslint": "^4.19.1", + "eslint-loader": "^4.0.2", + "file-loader": "^6.2.0", + "postcss": "^8.3.7", + "postcss-loader": "^6.1.1", + "regenerator-runtime": "^0.13.2", + "sass": "^1.42.0", + "sass-loader": "^12.1.0", + "stimulus": "^2.0.0", + "stylelint": "^13.13.1", + "stylelint-webpack-plugin": "^2.2.2", + "webpack-notifier": "^1.6.0" + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/postcss.config.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/postcss.config.js new file mode 100644 index 0000000000..a3db8ae972 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + autoprefixer: {}, + }, +}; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/webpack.config.js b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/webpack.config.js new file mode 100644 index 0000000000..2f5099fe0c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/webpack-encore/webpack.config.js @@ -0,0 +1,114 @@ +const path = require('path'); +const os = require('os'); + +const Encore = require('@symfony/webpack-encore'); +const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); +const StylelintPlugin = require('stylelint-webpack-plugin'); + +// Manually configure the runtime environment if not already configured yet by the "encore" command. +// It's useful when you use tools that rely on webpack.config.js file. +if (!Encore.isRuntimeEnvironmentConfigured()) { + Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev'); +} + +Encore + .addAliases({ + scssRootDir: path.resolve(__dirname, 'assets/ui/scss'), + }) + // directory where compiled assets will be stored + .setOutputPath('public/frontend/') + // public path used by the web server to access the output path + .setPublicPath('/frontend') + // only needed for CDN's or sub-directory deploy + // .setManifestKeyPrefix('build/') + + /* + * ENTRY CONFIG + * + * Each entry will result in one JavaScript file (e.g. app.js) + * and one CSS file (e.g. app.scss) if your JavaScript imports CSS. + */ + .addEntry('app', './assets/ui/app.js') + .addEntry('admin', './assets/admin/admin-bundle-extra.js') + + // When enabled, Webpack "splits" your files into smaller pieces for greater optimization. + .splitEntryChunks() + + // will require an extra script tag for runtime.js + // but, you probably want this, unless you're building a single-page app + .enableSingleRuntimeChunk() + + /* + * FEATURE CONFIG + * + * Enable & configure other features below. For a full + * list of features, see: + * https://symfony.com/doc/current/frontend.html#adding-more-features + */ + .cleanupOutputBeforeBuild() + .enableBuildNotifications() + .enableSourceMaps(!Encore.isProduction()) + // enables hashed filenames (e.g. app.abc123.css) + .enableVersioning(Encore.isProduction()) + + .enableEslintLoader() + .addPlugin(new StylelintPlugin({ + files: ['./assets/**/*.scss'], + })) + + .configureBabel((config) => { + config.plugins.push('@babel/plugin-proposal-class-properties'); + }) + + // enables @babel/preset-env polyfills + .configureBabelPresetEnv((config) => { + // eslint-disable-next-line no-param-reassign + config.useBuiltIns = 'usage'; + // eslint-disable-next-line no-param-reassign + config.corejs = 3; + }) + + .enablePostCssLoader() + + // enables Sass/SCSS support + .enableSassLoader(() => {}, { resolveUrlLoader: false }) + + // Copy static files + .copyFiles({ + from: './assets/ui/img', + to: 'img/[path][name].[hash:8].[ext]', + }) + + // uncomment to get integrity="..." attributes on your script & link tags + // requires WebpackEncoreBundle 1.4 or higher + // .enableIntegrityHashes(Encore.isProduction()) + + .addPlugin(new BrowserSyncPlugin( + { + open: 'external', + https: { + key: path.join(os.homedir(), '/.dinghy/certs/dinghy.key'), + cert: path.join(os.homedir(), '/.dinghy/certs/dinghy.crt'), + }, + // host: 'kumacmssite.dev.kunstmaan.be', + // proxy: 'https://kumacmssite.dev.kunstmaan.be', +{% if browserSyncUrl %} + host: '{{ browserSyncUrl|replace({'https://': '', 'http://': ''}) }}', + proxy: '{{ browserSyncUrl }}', +{% else %} + server: { + baseDir: '.', + }, +{% endif %} + files: [ + 'public/frontend/*.js', + 'public/frontend/*.css', + ], + }, + { + reload: false, // this allow webpack server to take care of instead browser sync + name: 'bs-webpack-plugin', + }, + )); + +module.exports = Encore.getWebpackConfig();