devrix / dx-starter-deprecated

Modified underscores starter theme by DevriX

Development setup

Exporting to WordPress.org compilant zip file

To export your development files to the WordPress.org requirements run the following command: bash zip.sh path/name.zip or npm run ziptheme path/name.zip. We can suggest you to suffix your zip file with the version of your theme. Example: ../dx-starter-1.0.0.zip

.gitignore

DX Starter has a rather large .gitignore file. Make sure to check it out in case you have important file types or directories listed there. Part of the TODO for the theme is to create npm script that will auto generate a ZIP of your theme that is fully compatible with WordPress's theme standarts - meaning no .DS_Store files, no hidden .git folders or files, no gulp files or sass ones.

Nodejs

You will need Node.js - Installing it gives you access to NPM. If you don't have the latest version, make sure you get it installed as it's very likley to get errors if you are not running the latest version. The current node version under which this theme is tested is v5.0.0. You can check your version by running & node -v.

Updating installed Node.js is trough NPM :

$ sudo npm cache clean -f
$ sudo npm install -g n
$ sudo n stable

If you have not installed Node.js yet then you will simply get the latest version and work from there.

Gulp

To run the gulpfile.js you will need gulp-cli. It's best to install it globaly. The command for that is $ npm install --global gulp-cli.

Installing dependences

Run $ npm install. This will create node_modules folder. Don't worry, it is ignored from the .gitignore file. On Windows deleting this would be rather tricky, so you will need another globally installed module named rimraf. For linux users it's not an issue.

Running the watch function

Gulpfile.js is taking care of the commands for watch, paths and settings. All you need is to run $ gulp.

Compile Sass without npm

If you have sass command installed, you can run sass --watch assets/sass/master.scss:assets/css/master.min.css --style compressed to compile only the sass file. For JavaScript you will have to use gulp.

Important: using this command, you will NOT generate the same output as from Gulp. Inside the Gulp scripts we have autoprefixing among other packages that do more work than simply translating Sass into CSS. Expect browser support to suffer if you use only the sass command.

Note:

The theme is not 100% ready as there are still small changes to be made in the future. Some of the todos are renaming some of the scss files, better js compile/minification and imgming scripts. That is what's on the radar for now, most likley there will be more to be added/changed. If you have any ideas feel free to open an issue !

DX Stability Framework

Inside the header.php file you will find this meta tag: <meta property="dxcheck:online" content="true" />. We use it to track our sites, you might want to remove it for your projects. If you need more information, make sure to open an issue.

Sass linter

Documentation for the Sass linter can be seen here. It will be failing on !important rule, so try to find a better way to write your stylings. If that's still impossible add // sass-lint:disable-line no-important on the line where you've set it.

dx-starter-deprecated's Issues

Update README.md information with more details

We should update the readme file with adding more details about DX Starter theme, popular helper functions, folder structure, etc

Update all packages

We need to update all our packages to their latest versions 🔥and ensure that our workflow remains the same. There are security issues with the outdated npm packages.

In order to deal with all of them we also need to update Gulp to v4.0, which will require a change in the structure of the file and the tasks there.

Create ZIP generator script

We can use Node for this. I imagine the generate script to look like this:

$ node generate-zip

Which will output a theme-name-v1.0.0.zip file in wp-content/themes. When you bump the theme's version in style.css to v1.1.0 for example - generate new file with that version as suffix. If the version has not been updated simply overwrite the existing ZIP file.

Most important - when generating the ZIP file ignore:

• node_modules/
• assets/sass
• tests/
• all hidden files like .git, .DS_Store, .gitignore, .editorconfig and so on, including sass cached files or any other cached files/folders starting with a dot.
• gulpfile.js
• package.json
• README.md

as these files are not required from WordPress.org

Future version: add flag -build for the script that will not ignore tests/, assets/sass, gulpfile.js and package.json so that the people using the theme can continue development.

Use the reactiongifs.us mobile menu in the starter theme

Here is the screenshot:
http://i.imgur.com/7uoXixA.png

Need to update README file.

Hey @xavortm,
I was following the instructions in the README file and in section Updating installed Node.js is trough NPM: I encountered a command (sudo npm cache clean -f) which I need to run in my console.
After doing that, I received an error with the following message:
/usr/bin/env: ‘node’: No such file or directory
Also, there is a typo in the naming of the section.
Best Regards!

Allow multiple threads of CSS processing (JS as well) for WP Admin

It would be very useful to support out-of-the-box admin styles minification and processing. Right now if you need to compile a second file other than master.css, you need to add multiple lines. Same for the JS compilation.

Here is an example of what needs to be added for a second thread of css minification and prefixing:

gulp.task("admin-cssmin", function() {
	return gulp
	.src(paths.destination.css + "admin-style.css")
	.pipe(sourcemaps.init({ loadMaps: true }))
	.pipe(cleanCSS({compatibility: 'ie8'}))
	.pipe(rename({ suffix: ".min" }))
	.pipe(sourcemaps.write('./'))
	.pipe(gulp.dest(paths.destination.css))
	.pipe(notify({ message: "Successfully minified admin-styles.min.css",onLast: true }))
});

...

// The files to be watched for minifying. If more dev js files are added this
// will have to be updated.
gulp.task("watch", function() {
	...
	gulp.watch(paths.destination.css + "admin-style.css", gulp.series("admin-cssmin"));
});

...

// What will be run with simply writing "$ gulp"
gulp.task("default",
	gulp.series("sass",
		gulp.parallel(
			"minifyScripts",
			"cssmin",
			"admin-cssmin",
			"optimizeImages"
		),
		"watch"
	)
);

Implement a simple versioning for the assets files (styles and scripts)

We are going to add a define variable for the current date/date. It's a straightforward task, but it needs to be done

Add alignleft float rules.

Update coding standards, update _s base structure

We have based the DX Starter on underscores and added some general functionality and lot's of SCSS changes. But since there is still plenty that remains similar to _s, the idea is to view the most recent version of _s and apply any improvements in DX Starter.

Ideally with this also define prettify and editor configs to guide IDEs in our standards. This is not related to PHPCS though

Add .page-loaded class to the body tag

You've added this class to one of our projects and it was a really smart idea.
Let's add this one to our starter theme .page-loaded class to the <body>

Add Browser Detection function

Use this one: https://github.com/metodiew/My-Misc/blob/master/WordPress/functions.php#L10

Fix font builder

The fonts from the source are not transferred to dist. In addition to this, the fonts are different and we need to update Font Awesome to it's latest version.

Bonus points if we integrate it in the build setup from node_modules so that we can update them easily.

"/template-parts" is the same as "/partials"

Inside the template-parts folder we have content-* prefixed files. Should we simply delete the /partials dir and use template-parts instead? Plus the partials directory is supposed to hold snippets of markup that are to be added to page templates. So having template-parts sounds more fitting. It has better name than partials and it's used by the original _s theme.

@metodiew PS: GitHub issues ftw :P

Add current page slug in body classes

It would be very nice to have the page slug outputted in the body tag. With this, developers can easily target specific page without relying on IDs as they are not as dependable.

Generate theme per project

We will need the ability to define basic properties of the theme. Meaning: Name, Author, Description, Text Domain etc.

This could be a basic gulp task for setup or NPM script for setup, must see what is the best solution. With it we can have a basic questionary for different features if they are needed - FontAwesome, Foundation, Prebuilds and such.

Update babel setup needed

npm WARN deprecated [email protected]: We're super 😸 excited that you're trying to use ES2015 syntax, but instead of continuing yearly presets 😭 , we recommend using babel-preset-env: npm install babel-preset-env. preset-env without options will compile ES2015+ down to ES5. And by targeting specific browsers, Babel can do less work and you can ship native ES2015+ to users 😎 ! Also, we are in the process of releasing v7, so give http://babeljs.io/blog/2017/09/12/planning-for-7.0 a read and test it! Thanks so much for using Babel 🙏 , please give us a follow @babeljs for updates, join slack.babeljs.io for discussion and help support at opencollective.com/babel