This is a school project – website for elderly people. It's a prototype of the website. The texts are in Slovak language.
The live version is hosted here on Github using URL chuckeles.github.io/elder-assistant.
Don't push directly to
master, others will hate you.
- Create a separate branch for your changes.
- Make and commit your changes.
- Push the branch.
- Create a new pull request here on Github.
- Wait for someone to approve.
- Merge the pull request.
There's a handful of technologies and libraries used in this project.
- Jekyll - used to generate the website and host it here on Github
- Bootstrap - style framework with a lot of components and a layout system
- Font awesome - icons
- jQuery - scripting library, makes it easier to do common tasks, nicer Javascript
- Vue - frontend library, makes dynamic components super-easy
- SASS - better CSS with nesting and variables
In order to develop the website, you need to install Jekyll locally. It's worth it, because it allows you to see your changes on the website.
- Install Ruby
- Install Jekyll and its dependencies -
gem install bundler jekyll jekyll-seo-tag - Clone the repository -
git clone [email protected]:chuckeles/elder-assistant.git - Go into the repo directory -
cd elder-assistant - Start Jekyll -
jekyll serve
NOTE: If you get an error about a certificate when installing the Jekyll gem (on Windows), check this StackOverflow question. The first answer's solution worked for us.
You can leave Jekyll running, it will update the website as you change it and serve it on localhost:4000.
Also, get yourself at least a little familiar with Bootstrap components. There's a lot of them that we can use in the project.
The HTML files in the root directory make the webpages visible to the user. Note that these files are wrapped in _layouts/page.html by Jekyll (right where the {{ content }} is present). If you want to add something that should be visible on every page, modify _layouts/page.html.
Styles are in the css folder. Our custom styles are in css/global.scss, other files are for Bootstrap and Font Awesome (icons).
Scripts are in the js folder. Our scripts are, again, in js/global.js, other files are libraries.
Don't modify the library files. If you want to override something (i. e. a CSS class styling), do it in our project files.
css/global.scss and js/global.js contain styles and scripts that should run on every page. If you have any page-specific styles and scripts, put them into separate files named after the page and load them in the page. Add the script to the bottom of the page's HTML file, i. e. <script src={{ site.github.url}}/js/your-script-name.js.