2019 version of A&S Magazine theme.
This theme is built off ASMagazine.
$ cd my-wordpress-folder/wp-content/themes/
$ git clone https://github.com/ksascomm/AS-Magazine-2019.git
$ cd AS_Magazine_2019
$ npm install$ npm startWhen building for production, the CSS and JS will be minified. To minify the assets in your /dist folder, run
$ npm run build$ npm run package
Running this command will build and minify the theme's assets and place a .zip archive of the theme in the packaged directory. This excludes the developer files/directories from your theme like /node_modules, /src, etc. to keep the theme lightweight for transferring the theme to a staging or production server.
4. Configuration (Copied from ASMagazine)
The config.yml file is ignored by git so that each environment can use a different configuration with the same git repo.
At the start of the build process a check is done to see if a config.yml file exists. If config.yml exists, the configuration will be loaded from config.yml. If config.yml does not exist, config-default.yml will be used as a fallback.
If you want to take advantage of Browsersync, simply open your config.yml file after creating it in the previous step, and put your local dev-server address and port (e.g http://localhost:8888) in the url property under the BROWSERSYNC object.
If you want to make sure your users see the latest changes after re-deploying your theme, you can enable static asset hashing. In your config.yml, set REVISIONING: true;. Hashing will work on the npm run build and npm run dev commands. It will not be applied on the start command with browsersync. This is by design. Hashing will only change if there are actual changes in the files.
Project structure (Copied from ASMagazine)
In the /src folder you will the working files for all your assets. Every time you make a change to a file that is watched by Gulp, the output will be saved to the /dist folder. The contents of this folder is the compiled code that you should not touch (unless you have a good reason for it).
The /page-templates folder contains templates that can be selected in the Pages section of the WordPress admin panel. To create a new page-template, simply create a new file in this folder and make sure to give it a template name.
-
style.css: Do not worry about this file. (For some reason) it's required by WordPress. All styling are handled in the Sass files described below -
src/assets/scss/app.scss: Make imports for all your styles here -
src/assets/scss/global/*.scss: Global settings -
src/assets/scss/components/*.scss: Buttons etc. -
src/assets/scss/modules/*.scss: Topbar, footer etc. -
src/assets/scss/templates/*.scss: Page template styling -
dist/assets/css/app.css: This file is loaded in the<head>section of your document, and contains the compiled styles for your project.
If you're new to Sass, please note that you need to have Gulp running in the background (npm start), for any changes in your scss files to be compiled to app.css.
JavaScript Compilation (Copied from ASMagazine)
All JavaScript files, including Foundation's modules, are imported through the src/assets/js/app.js file. The files are imported using module dependency with webpack as the module bundler.
If you're unfamiliar with modules and module bundling, check out this resource for node style require/exports and this resource to understand ES6 modules.
Foundation modules are loaded in the src/assets/js/app.js file. By default all components are loaded. You can also pick and choose which modules to include. Just follow the instructions in the file.
If you need to output additional JavaScript files separate from app.js, do the following:
- Create new
custom.jsfile insrc/assets/js/. If you will be using jQuery, addimport $ from 'jquery';at the top of the file. - In
config.yml, addsrc/assets/js/custom.jstoPATHS.entries. - Build (
npm start) - You will now have a
custom.jsfile outputted to thedist/assets/js/directory.
Requirements (Copied from ASMagazine)
This project requires Node.js v4.x.x to v6.11.x to be installed on your machine. Please be aware that you might encounter problems with the installation if you are using the most current Node version (bleeding edge) with all the latest features.
This theme uses Sass (CSS with superpowers). In short, Sass is a CSS pre-processor that allows you to write styles more effectively and tidy.
The Sass is compiled using libsass, which requires the GCC to be installed on your machine. Windows users can install it through MinGW, and Mac users can install it through the Xcode Command-line Tools.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent