The official neos.io website package.
Clone the repository, and setup Neos as always.
Note: We require nvm as well as the npm and node binaries to be installed on your system.
If you've installed nvm make sure that the node LTS version 4.2.2 is correctly installed - You can do so by executing nvm install v4.2.2.
If you need help setting up nvm, npm or if you got any other problems, join our Slack channel and we are most happy to help you with it. :).
We rely on the NPM package manager and it's ecosystem for third party dependencies. We also use npm for building our assets.
As with every project which relies on NPM, execute npm install in the site package directory first - This will fetch and
install all dependencies from the NPM registry.
Afterwards you can run any of the following commands in your favorite shell.
| Command | Description |
|---|---|
npm run build:modernizr |
Scans the whole project for modernizr references and builds a lean Modernizr file. |
npm run build:scripts |
Builds the JavaScript bundle with browserify and transpiles the ES6/7 code via babel. |
npm run fix:amd |
Fixes issues with the current Neos backend when using CommonJS. |
npm run build:sass |
Builds the Scss bundle with node-sass and autoprefixer. |
npm run build:styleguide |
Builds the living styleguide for all Scss components located in Resources/Public/Styleguide/. |
npm run build |
Higher-Order task for all above noted build tasks. |
npm run minify:scritpts |
Minifies all *.js files in Resources/Public/JavaScript/. |
npm run minify:styles |
Minifies all *.css files in Resources/Public/Styles/. |
npm run minify |
Higher-Order task for all above noted minify tasks. |
npm run lint:scripts |
Lints all *.js files in Resources/Private/JavaScript/ via ESLint. |
npm run lint |
Higher-Order task for all above noted lint tasks. |
npm run watch:scripts |
Watches for file-changes and builds the JavaScript bundle on changes. |
npm run watch:sass |
Watches for file-changes and builds the Scss bundle on changes. |
npm run lint |
Higher-Order task for all above noted lint watch. |
npm run test |
Executes the lint task and in the future unit / end-to-end tests. |
You can find all css related sources in Resources/Public/Styles/ and JavaScript related sources in Resources/Public/JavaScript/.
We use Atomic Design for structuring our (S)CSS code base. Atomic Design is basically an abstraction layer, we do not aim at designing pages but components and a design system, which then will be used to create the pages.
If you aren't familiar with the structure, we recommend you to read Atomic Web Design by Brad Frost.
You can generate the css styleguide by executing npm run build:styleguide in your favorite shell. After the command has successfully finished, you can open Resources/Public/Styleguide/index.html in your favorite browser and take a look at all existing components and the respective markup. Documenting your own Atom, Molecule or Organism is pretty straight forward, take a look at their 'documenting css guide'
We always strive for the most performant and modern code base, this also reflects in our JavaScript. We use ES6 and some ES7 features like decorators, in corporation with @reduct/component and @reduct/assembler which reduces the overall complexity and creates a lean and flexible system for creating abstract JavaScript components with a scent of React's code style and logic.
Some general rules:
- Use ES6 features like
const,let, arrow-functions,importandexportsand so on. If you haven't worked with ES6 and need help, just create a PR and we will gladly point you in the right direction! :-) - Do not create hard coded configuration values in your components. Use props/defaultProps instead.
- Do not rely on big frameworks/libraries like jQuery. Instead use the standarized Web API's like
classListand so on. If you find yourself running into troubles with cross-browser optimization, check if there are polyfills for the given API available. - Always bundle your dependencies and do not leak global variables on purpose - So no
<script>tag other than the compiled bundle from browserify since you will run into async troubles and won't have code optimization that way. - Orient yourself on the existing JS components and learn from then, if you have any problems in doing so, ping @inkdpixels or the #guild-website channel on Slack.