Quick Start GuideΒΆ
This guide rapidly shows you how to:
- Setup a virtual environment.
- Install
blowdrycss
. - Walk through the
/examplesite
demo. - Auto-generate DRY CSS with blowdrycss.
- Rapidly style HTML with encoded class syntax.
- Access more in-depth information.
Note
If this guide seems too quick, then head over to the Tutorial instead.
> pip install virtualenv
> mkdir blowdrycss_tutorial
> cd blowdrycss_tutorial
> virtualenv
> source bin/activate
> Install pandoc `click here for os-specific instructions <https://pypi.python.org/pypi/pypandoc/1.1.3#installing-pandoc>`__.
> pip install blowdrycss
Download the zipped version of
blowdrycss
from the github repository.Copy and paste the entire
examplesite
folder from the downloaded zip file to the newblowdrycss_tutorial
folder.Look at the files inside of the
examplesite
folder. There should be the following:blowdrycss_tutorial/ examplesite/ images/ index.html test.aspx test.html test.jinja2
Open a new Command Line Interface (CLI).
> cd <path to>/blowdrycss_tutorial/examplesite > python -m http.server 8080 # (Python 3.x) > python -m SimpleHTTPServer 8080 # (Python 2.x)
Open a web browser and go to localhost:8080 by clicking here.
The page should contain lots of unstyled text and images. It should basically be a mess.
Leave the web server running, and go back to the original CLI.
Ensure that the current folder is
blowdrycss_tutorial
. Run blowdrycss.> blowdrycss
Look at the files inside of the
examplesite
folder again. There should be a new subfolder calledcss
containing the filesblowdry.css
andblowdry.min.css
.blowdrycss_tutorial/ examplesite/ css/ blowdry.css blowdry.min.css images/ clashing_aliases.html index.html property_aliases.html test.aspx test.html test.jinja2 blowdrycss_settings.py
Navigate to
<path>/blowdrycss_tutorial/examplesite/css
, and verify thatblowdry.css
andblowdry.min.css
now exist.A file
blowdrycss_settings.py
appears. This file can be used to modify or override default settings. Use of this file is documented in the Advanced Topics section.Two new HTML files
property_aliases.html
andclashing_aliases.html
also appear. There is more about these files in the Advanced Topics.Open
<path>/blowdrycss_tutorial/examplesite/index.html
Go to line 12 and find:
<h1 class="c-blue text-align-center display-medium-up font-size-48-s">
From the class attribute delete
c-blue
and replace it with the wordgreen
.Change
font-size-48-s
tofont-size-148-s
.The line should now look like this:
<h1 class="green text-align-center display-medium-up font-size-148-s">
Save the changes.
Ensure that the current folder is
<path>/blowdrycss_tutorial
.Run
> blowdrycss
Now refresh the browser for the web page running on localhost:8080.
The title at the top of the page should be large and green.