-
Notifications
You must be signed in to change notification settings - Fork 4
Home
Skeleton is a frontend boilerplate. It embraces modularity and generates a living styleguide that facilitates the communication between the parties involved in the development process.
The skeleton includes some CSS and JS helpers/libraries to help you. It also includes a set of gulp tasks that are pre-configured to get you going.
To unify all the projects you work on, skeleton defines a folder structure to put your files in.
The skeleton includes grunt tasks to compile jade templates with data files.
Skeleton also defines a way to write components that you can re-use in your project.
A style-guide containing all components and base styles will be generated automatically while you develop. It creates a common language for all project members and a quick overview over your projects components and explains their usage.
To start a new project, create a new repository on git and add the skeleton repository as remote:
git remote add skeleton https://github.com/ginetta/skeleton.git
Fetch the data from skeleton:
git pull skeleton/master
That's it, you should have the boilerplate in your project.
Find and replace "project-name" by your real project name in the whole project (CMD + SHIFT + F on Sublime Text).
You can also add more information about the project's team on src/meta/humans.txt. If you don't plan to use it, you can delete this file.
You can now check in all those files in your repo and push them to your git:
git commit -a
git push -u origin master
You will need
Install all the project dependencies:
npm install
To build the project, just run
gulp
It will generate all the files, start a server and open your browser with the project index
All frontend dependencies are managed through bower and are optional.
- sensible Handles responsiveness and provides a very simple grid
.
├── .editorconfig
├── .eslintrc
├── .gitignore
├── assets/ The assets for the app/website that are not content
│ ├── favicons/
│ ├── fonts/
│ ├── icons/
├── bower.json
├── build/ Builded app (HTML,CSS,JS etc..)
├── content/ The content (images & texts) to appear in the app/website
│ ├── images/
│ ├── texts/
│ │ ├── en/
│ │ │ ├── index.yml
├── gulp/ The set of gulp tasks
├── gulpfile.js
├── package.json
├── readme.md
├── src/ The source code of the app/website
│ ├── elements/
│ ├── layouts/
│ ├── modules/
│ ├── pages/
│ ├── scripts/
│ ├── styles/
│ │ ├── 0.settings.scss
│ │ ├── 1.typography.scss
│ │ ├── 2.color.scss
│ │ ├── 3.base.scss
│ │ ├── 4.layout.scss
│ │ ├── 5.helpers.scss
│ │ ├── 6.print.scss
│ │ ├── 7.shame.scss
│ │ ├── styles.scss
In order to write maintainable, generic and reusable code we like to write our code in components. Where each components have their own:
- jade file that contains the markup
- SCSS contains the specific styles
- JS file for the behaviour
- YML file to define the data model and it's options
Every component can have sub-components. We recommend to limit the encapsulation to reduce the complexity (dependencies).
** This is in development for now **
We choose jade because it always renders valid HTML and it makes it easy to work in a modular way. It brings some key features (e.g. mixins and blocks) that promotes code reuse and maintainability.
Finally you can store data (even languages specific data) in a YML file. This file is located under content/texts//*.yml. The data stored in this file will be available in all jade files under the data variable: data.filename.keyinyml
If you have more that one languages, it will generate each language in a seperate folder.
Some editors or specific setups will generate extra files in the project directory. If they are not produced by skeleton, consider adding them to your global gitignore