In earlier posts (Part 1 here, Part 2 here, Part 3 here, Part 4 here and Part 5 here) I have set about building a "Hello World" Python/Django application.
While the app itself does nothing it does have Compass and Twitter's Bootstrap framework enabled and I was able to successfully modify the framework. After uploading this to github it seems sensible to leave the app alone. So the next step is to create a fork of the code. Amazingly github makes it easier to "fork" someone else's code than to fork your own code. However, it is possible. So let's work through that process.
The first step is to create somewhere locally to store the code. We need to clone the github repository in to a new folder.
Here is my process:
- Go to my PyCharm Project directory
- Go to the virtualenv sub-folder
virtualenv --no-site-packages {folder short name}
I use a short name for my new folder to avoid the confusion of multiple levels of folder with the same name. It also keeps the command prompt shorter when virtualenv is on since the folder name is used as the name for the virtualenv.
cd {folder short name}
source bin/activate
To perform the cloning and forking with Git I am using the instructions from Ryan Pobasco - Fork Your Own Project on GitHub.
Go to github and create a new project.
on my local machine I clone the helloworld application:
git clone git@github.com:ekivemark/helloworld.git {new application name}
This creates a new folder and copies in the content from the helloworld application. Next I change directory in to the new folder to edit the .git/config file.
Change the remote "origin" lines url reference to point to the new git repository instead of the original helloworld.git.
To keep a link with the original helloworld application we can issue an "upstream" command
git remote add upstream git@github.com:ekivemark/helloworld.git
Because on github I had created a README.md and .gitignore files I found I had a conflict when I tried to merge the cloned helloworld app with the new app on github.
A quick git commit -a fixed that:
git commit -a
git push -u origin master
I also moved to the parent directory and installed django
pip install django
Let's test everything works:
cd {new application folder}
mkdir db
python manage.py syncdb
python manage.py runserver
I make some quick tweaks to index.html and the topnav.html files and we have a modified application
Load the browser and go to localhost:8000. Everything appears to be working. We have a successfully cloned application.
I wanted to apply a different color scheme to this application. Rather than develop something from scratch I went to bootswatch.com and downloaded a theme. The problem with this is that bootswatch themes are built for LESS and not SASS. So I need to edit the files so they will compile in SASS via Compass. When you are not a CSS ninja this can be a little daunting. As with many things 95% of the transition is straightforward. The transition from LESS to SCSS involved changing variable prefixes from @ to $. However, the compilation is stumbling on one particular line of converted code:
.navbar-inner {
#gradient > .vertical-three-colors($navbarBackground, $navbarBackground, 90%, $navbarBackgroundHighlight);
}
generating this error:
Syntax error: Invalid CSS after "...al-three-colors": expected "{", was "($navbarBackgro..."
on line 21 of ..../mainstatic/sass/partials/bootswatch-cerulean.scss
from line 15 of ..../mainstatic/sass/screen.scss
This challenge has drawn me in to the LESS versus SASS debate. As far as I can tell the differences between LESS and SASS are:
- Less is closer to standard CSS
- You can take CSS and Lessify it. This seems to be an advantage in migrating from a SASS. I can take the working CSS and reverse engineer it.
- LESS has client-side javascript to compile the .less files to CSS.
- There are server side compilers and even command line tools. I might even look at CodeKit for the Mac which can work with SASS and LESS.
- Twitter's Bootstrap is built on LESS.
I think it is time for a HelloLessWorld fork where we replace SASS with LESS.
