A design which makes you start your own front-end development without hurt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure dolores id, vel nihil unde, fugit, doloribus eligendi voluptates eos ad laboriosam excepturi voluptatibus culpa eaque quaerat officia eius corporis consequatur.
Make sure you installed yarn in your machine!
- Clone this repo and set rename the folder with whatever you want,
git clone [email protected]:muslih/ipau.git myweb
cd myweb/- Run install command
yarn install && bower install- Ready to go for development!
yarn run devBelow the directory structure
.
├── app
│ ├── 404.html
│ ├── LICENSE.txt
│ ├── apple-touch-icon.png
│ ├── browserconfig.xml
│ ├── crossdomain.xml
│ ├── css
│ │ └── main.css
│ ├── favicon.ico
│ ├── fonts
│ │ └── bootstrap
│ │ ├── glyphicons-halflings-regular.eot
│ │ ├── glyphicons-halflings-regular.svg
│ │ ├── glyphicons-halflings-regular.ttf
│ │ ├── glyphicons-halflings-regular.woff
│ │ └── glyphicons-halflings-regular.woff2
│ ├── humans.txt
│ ├── img
│ ├── index.html
│ ├── js
│ │ ├── main.js
│ │ └── plugins.js
│ ├── robots.txt
│ ├── tile-wide.png
│ └── tile.png
├── bower.json
├── gulpfile.js
├── package.json
├── readme.md
├── src
│ ├── concat
│ │ └── concat.js
│ ├── css
│ │ ├── _variable.scss
│ │ └── main.scss
│ ├── js
│ │ ├── main.js
│ │ └── waluh.js
│ ├── pages
│ │ └── index.ipau
│ └── templates
│ └── layout.ipau
└── yarn.lockAll web generated in app directory don't change files in this directory because it will change automatically once we changed any file in src directory
To add new page just create a file with ipau extension inside src/pages directory, and make sure you exteds the layout and put the content inside the blocks as below
{% extends "main-layout.ipau" %}
{% block content %}
<h1>This is the new page</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit, eum libero molestias repudiandae quis rerum. Rerum nesciunt cupiditate, molestiae consectetur cum laborum hic laudantium omnis, delectus alias molestias debitis.
</p>
{% endblock %}You can find all the layouts in src/templates just pick one and put it above the file as explained before.
To add new layout you can create new file inside src/templates/ and make sure the file with ipau extension. Don't forget to add block content inside new layout file, so it can be called in page file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
{% block content %} {% endblock %}
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>Ipau is licensed under the ☺ license..
You, the licensee, are hereby granted free usage in both personal and commerical environments, without any obligation of attribution or payment (monetary or otherwise). The licensee is free to use, copy, modify, publish, distribute, sublicence, and/or merchandise the work, subject to the licensee inflecting a positive message unto someone. This includes (but is not limited to): smiling, being nice, saying “thank you”, assisting other persons, or any similar actions percolating the given concept.
The above copyright notice serves as a permissions notice also, and may optionally be included in copies or portions of the work.
The work is provided “as is”, without warranty or support, express or implied. The author(s) are not liable for any damages, misuse, or other claim, whether from or as a consequence of usage of the given work.