framework/bedrock
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add option to select CSS framework, add Foundation as an option (#1813)

Browse Source 
* Add option to select CSS framework, add Foundation as an option
This commit is contained in:
Ben Word
2017-01-18 09:05:56 -07:00
committed by GitHub
parent 89b4d1c75d
commit 3909bf76f0
4 changed files with 45 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -1,4 +1,5 @@
### 9.0.0-beta.2: TBD ### 9.0.0-beta.2: TBD
* Add option to select CSS framework, add Foundation as an option ([#1813](https://github.com/roots/sage/pull/1813))
* Add option to add Font Awesome ([#1812](https://github.com/roots/sage/pull/1812)) * Add option to add Font Awesome ([#1812](https://github.com/roots/sage/pull/1812))
* Add option to change theme file headers ([#1811](https://github.com/roots/sage/pull/1811)) * Add option to change theme file headers ([#1811](https://github.com/roots/sage/pull/1811))
* Add option to remove Bootstrap ([#1810](https://github.com/roots/sage/pull/1810)) * Add option to remove Bootstrap ([#1810](https://github.com/roots/sage/pull/1810))

9
README.md
View File

@@ -13,8 +13,12 @@ Sage is a WordPress starter theme with a modern development workflow.
* ES6 for JavaScript * ES6 for JavaScript
* [Webpack](https://webpack.github.io/) for compiling assets, optimizing images, and concatenating and minifying files * [Webpack](https://webpack.github.io/) for compiling assets, optimizing images, and concatenating and minifying files
* [Browsersync](http://www.browsersync.io/) for synchronized browser testing * [Browsersync](http://www.browsersync.io/) for synchronized browser testing
* [Bootstrap 4](http://getbootstrap.com/) for a front-end framework (option to remove during installation)
* [Laravel's Blade](https://laravel.com/docs/5.3/blade) as a templating engine * [Laravel's Blade](https://laravel.com/docs/5.3/blade) as a templating engine
* CSS framework options:
* [Bootstrap 4](http://getbootstrap.com/)
* [Foundation](http://foundation.zurb.com/)
* None (blank slate)
See a working example at [roots-example-project.com](https://roots-example-project.com/). See a working example at [roots-example-project.com](https://roots-example-project.com/).
@@ -39,7 +43,8 @@ $ composer create-project roots/sage your-theme-name dev-master
During theme installation you will have the options to: During theme installation you will have the options to:
* Update theme headers (theme name, description, author, etc.) * Update theme headers (theme name, description, author, etc.)
* Remove Bootstrap * Select a CSS framework (Bootstrap, Foundation, none)
* Add Font Awesome
## Theme structure ## Theme structure

2
composer.json
View File

@@ -43,7 +43,7 @@
], ],
"post-create-project-cmd": [ "post-create-project-cmd": [
"Roots\\Sage\\PostCreateProject::updateHeaders", "Roots\\Sage\\PostCreateProject::updateHeaders",
"Roots\\Sage\\PostCreateProject::removeBootstrap", "Roots\\Sage\\PostCreateProject::selectFramework",
"Roots\\Sage\\PostCreateProject::addFontAwesome" "Roots\\Sage\\PostCreateProject::addFontAwesome"
] ]
} }

45
src/lib/Sage/PostCreateProject.php
View File

@@ -35,19 +35,46 @@ class PostCreateProject
} }
} }
public static function removeBootstrap(Event $event) public static function selectFramework(Event $event)
{ {
$io = $event->getIO(); $io = $event->getIO();
$default_framework_pattern = '"bootstrap": ".*"';
$files_to_clear = [
'assets/styles/components/_comments.scss',
'assets/styles/components/_forms.scss',
'assets/styles/components/_wp-classes.scss',
'assets/styles/layouts/_header.scss',
];
if ($io->isInteractive()) { if ($io->isInteractive()) {
if ($io->askConfirmation('<info>Remove Bootstrap?</info> [<comment>y,N</comment>]? ', false)) { $frameworks = [
file_put_contents('package.json', str_replace(' "bootstrap": "^4.0.0-alpha.6",' . "\n", '', file_get_contents('package.json'))); 'Bootstrap',
file_put_contents('assets/styles/main.scss', str_replace('@import "~bootstrap/scss/bootstrap";' . "\n", '', file_get_contents('assets/styles/main.scss'))); 'Foundation',
file_put_contents('assets/scripts/main.js', str_replace('import \'bootstrap/dist/js/bootstrap\';' . "\n", '', file_get_contents('assets/scripts/main.js'))); 'None'
file_put_contents('assets/styles/components/_comments.scss', ''); ];
file_put_contents('assets/styles/components/_forms.scss', ''); $framework = $io->select('<info>Select a CSS framework</info> <comment>(Default: Bootstrap)</comment>', $frameworks, 0);
file_put_contents('assets/styles/components/_wp-classes.scss', '');
file_put_contents('assets/styles/layouts/_header.scss', ''); switch($framework) {
case 0:
break;
case 1:
file_put_contents('package.json', preg_replace("/{$default_framework_pattern}/", '"foundation-sites": "6.3.0"', file_get_contents('package.json')));
file_put_contents('assets/styles/main.scss', str_replace('@import "~bootstrap/scss/bootstrap";' . "\n", '@import "~foundation-sites/scss/foundation";' . "\n" . '@include foundation-everything;' . "\n", file_get_contents('assets/styles/main.scss')));
file_put_contents('assets/scripts/main.js', str_replace("import 'bootstrap/dist/js/bootstrap'\n", "import 'foundation-sites/dist/js/foundation';\n", file_get_contents('assets/scripts/main.js')));
foreach($files_to_clear as $file) {
file_put_contents($file, '');
}
break;
case 2:
file_put_contents('package.json', preg_replace("/\s+{$default_framework_pattern},/", '', file_get_contents('package.json')));
file_put_contents('assets/styles/main.scss', str_replace('@import "~bootstrap/scss/bootstrap";' . "\n", '', file_get_contents('assets/styles/main.scss')));
file_put_contents('assets/scripts/main.js', str_replace("import 'bootstrap/dist/js/bootstrap';\n", '', file_get_contents('assets/scripts/main.js')));
foreach($files_to_clear as $file) {
file_put_contents($file, '');
}
break;
} }
} }
} }