Tutorial¶
This guide teaches you how to:
- Setup the tutorial’s 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
Part 1 - Setup virtualenv and install blowdrycss¶
Python is required. Python 3.x is preferred. It can be downloaded here.
Check your python installation or version number. Open a command line interface (CLI), and enter the following command.
> python
Something like the following should appear.
Python 3.5.1 (v3.5.1:37a07cee5969, Dec 6 2015, 01:38:48) [MSC v.1900 32 bit (Intel)] on win32 Type "help", "copyright", "credits" or "license" for more information. >>>
To exit type:
exit()
.Create a virtual environment. (For the purposes of this tutorial the project folder should be initially empty.)
> pip install virtualenv > mkdir blowdrycss_tutorial > cd blowdrycss_tutorial > virtualenv
Activate the virtual environment. Verify initial state.
> source bin/activate (linux, osx) or scripts\activate.bat (windows) > python >>> exit() > pip freeze
Install pandoc click here for os-specific instructions.
Install
blowdrycss
.> pip install blowdrycss > pip freeze
Deactivate virtual environment.
> deactivate
Explanation:
pip install virtualenv
Install virtual environment package from PyPi.mkdir blowdrycss_tutorial
Create a folder for this tutorial.cd blowdrycss_tutorial
Sets the current working directory to your web projects directory.virtualenv
Setup your project up as a virtual environment.source bin/activate
Activates the new virtual environment.python
Confirm the version of python that is installed.exit()
Exit python console.pip freeze
Shows all of the python packages that are currently installed in the virtual environment.pip install blowdrycss
Installs blowdrycss and related dependencies ‘inside’ of your virtual environment.pip freeze
Shows blowdrycss and the related dependencies after the install.deactivate
deactivates the virtual environment.Good References:
Part 2 - Setup examplesite and run a local webserver.¶
- Download the zip version of
blowdrycss
from the github repository. - Copy and paste the
examplesite
folder into theblowdrycss_tutorial
folder created in Step 1. cd examplesite
- Run
python -m http.server 8080
(Python 3.x) orpython -m SimpleHTTPServer 8080
(Python 2.x) depending on your version of python. On Windows the firewall might complain. Tell it to allow this server to run. - 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.
- Go back to the command line interface (CLI). The local webserver can be stopped by pressing
Ctrl + C
or closing the window. If you want to keep the webserver running then you will need to open a separate CLI.
Part 3 - Auto-generate CSS¶
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
Ensure that the current folder is
blowdrycss_tutorial
.> cd ..
Reactivate the virtualenv and run blowdrycss.
> source bin/activate > 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. In general, they document syntax that can (property_aliases) and cannot be used (clashing_aliases).Open a web browser and go to localhost:8080.
The page should now be styled better. Keep in mind that some elements are intentionally left un-styled for tutorial purposes.
Note
blowdry.css
and blowdry.min.css
are auto-generated and not intended to be edited by humans.blowdrycss
is run.css
folder, and run blowdrycss
. The css
will automatically appear
under examplesite.Part 4 - Apply new styles in index.html
¶
Usage of Encoded Classes in HTML Tags¶
<div class="text-align-center margin-top-30">
<p class="font-size-25">
The font-size is 25px. <span class="green">Green Text</span>
</p>
</div>
blowdrycss
decodes the class names text-align-center
,
margin-top-30
, font-size-25
, and green
; and generates the
following CSS in blowdry.css
:
.text-align-center { text-align: center }
.margin-top-30 { margin-top: 30px }
.font-size-25 { font-size: 25px }
.green { color: green }
Lets actually style something.¶
Navigate to
<path>/blowdrycss_tutorial/examplesite/
Open
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.
Now refresh the web page running on localhost:8080.
What happened? Nothing happened because you need to run
blowdrycss
first. Sorry for the trick, but this is the most common reason why it doesn’t seem to be working.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.
Part 5 - Exploring the auto-generated CSS¶
Navigate to
<path>/blowdrycss_tutorial/examplesite/css
.List the items in the directory
ls
ordir
.The following files should appear:
blowdry.css blowdry.min.css
Both of these files contain the exact same style rules. The only difference is that the one with the
*.min.css
extension in minified. This means that it is smaller and takes less time to upload and download over the Internet. However, minified files are not designed to be human-readable. The*.css
is designed to be human-readable.Open each file and see the difference. The
blowdry.css
contains line breaks and whitespace. Whereas,blowdry.min.css
is written as a single line with whitespace removed.
CSS is Auto-Generated¶
Look in
blowdry.css
for.green
..green { color: green }
This is the actual CSS that was generated as a result of adding the
green
CSS class selector to the<h1>
tag.Change
color: green
tocolor: black
.Save
blowdry.css
.Navigate back to
<path>/blowdrycss_tutorial
Run
blowdrycss
.Navigate to
<path>/blowdrycss_tutorial/examplesite/css
.Look in
blowdry.css
for the.green
class selector. The CSS is automatically changed fromcolor: black
back tocolor: green
. The reason is thatblowdry.css
andblowdry.min.css
are auto-generated. They are both completely overwritten every timeblowdrycss
is run. The auto-generated CSS files are not human-editable..green { color: green }
Important
The auto-generated CSS files blowdry.css and blowdry.min.css are not human-editable. They are both overwritten each time blowdrycss is run.
Link Tag¶
Navigate back to
<path>/examplesite
Open
index.html
The following is on line 7:
<link rel="stylesheet" type="text/css" href="css/blowdry.min.css" />
This line tells the browser which CSS file to use. In this case, it is
css/blowdry.min.css
. Though this could be replaced withcss/blowdry.css
and the page would still look the same. The minified version causes the web page to load faster since the file is smaller.Change line 7 of
index.html
to:<link rel="stylesheet" type="text/css" href="css/blowdry.css" />
Save
index.html
.Now refresh the web page running on localhost:8080.
The page should still look the same.
Change line 7 of
index.html
back to the way it was.<link rel="stylesheet" type="text/css" href="css/blowdry.min.css" />
Save
index.html
.
Part 6 - Experimentation¶
- Center the image below the title with the class
text-align-center
in the<div>
containing the image. - Now (without running
blowdrycss
) refresh the web page running on localhost:8080. - It worked. But why? The reason it worked is that
text-align-center
is already used inindex.html
, and is already defined inblowdry.min.css
.
Padding Percentages and Decimals¶
Go back to
index.html
and find the ‘+ sign’ images namedimages/plus.png
, and add the classpadding-bottom-3p
directly to theimg
class attribute to both of them. They are located at lines 19 and 21.Ensure that the current folder is
blowdrycss_tutorial
.Run
> blowdrycss
Now refresh the web page running on localhost:8080.
The ‘+ sign’ images now appear closer to the vertical center, but not quite.
Open
index.html
and change one of the ‘+ sign’ image class selectors frompadding-bottom-3p
topadding-bottom-4_5p
.Ensure that the current folder is
blowdrycss_tutorial
.Run
> blowdrycss
Now refresh the web page running on localhost:8080.
The ‘+ sign’ image with the
padding-bottom-4_5p
is now closer to the vertical center.What is going on here, and what do the
p
and the_
do?To understand this better open up
blowdry.css
and search forpadding-bottom-3p
. The following CSS is found:.padding-bottom-3p { padding-bottom: 3% }
The
3p
property value is converted into3%
. So the letterp
allows the percentage sign%
to be encoded.Now search for
padding-bottom-4_5p
. The following CSS is found:.padding-bottom-4_5p { padding-bottom: 4.5% }
The
4_5p
property value is converted into4.5%
. Meaning that the underscore_
represents the decimal point.
character.Generally, these encodings are necessary because characters like
.
and%
are not allowed in class selector names (See here).On an advanced note, it is possible to escape the
.
and the%
characters in the CSS file like so:.padding-bottom-4\.5\%
However, this is hard to read and non-standard CSS. Though it is valid. Therefore, escape characters are ignored and unsupported by
blowdrycss
. It is possible to learn more about escape characters here.
Shortcut and Multi-value CSS Properties¶
Apply these encoded class selectors to an image:
border-10px-solid-black p-20-30-20-30 w-50
Decomposition
border-10px-solid-black
Add a solid black border that is 10px thick.p-20-30-20-30
Add 20px padding top and bottom. Add 30px padding left and right.w-50
Make the image 50px wide.Ensure that the current folder is
<path>/blowdrycss_tutorial
.Run
> blowdrycss
More Practice¶
Change
border-10px-solid-black
toborder-10px-dashed-cornflowerblue
.Apply
display-none
to a div.Apply
uppercase
to any paragraph tag.Feel free to continue experimenting with different property names and values.
More information about how to write well-form encoded class names is found on the Syntax – Encoded Class Formatting Rules page.