Package: blowdrycss
blowdrycssis a rapid styling tool that compiles DRY CSS from encoded class selectors in your web project files.Getting StartedQuick Start DocsFull documentationVersion ChangelogSeeversion.pyfor full changelog.1.0.0– Enabled support for*.phpextension and added integration tests. Incremented to 1.0.0 since the
code is stable and working well.1.0.1– Enabled support for output file_name and extension customization. Created settings validation
utility functions and unit tests. Custom output file examples: _blowdry.scss and custom.css. Added support for
Python 3.6.1.0.2– Fixed file extension printing error. Now it uses the settings output_extension. Updated unit test.Why the name blowdrycss?Inspiration for the name came from the blow dryer. A blow dryer rapidly drys and styles hair.Similarly,blowdrycssis used to rapidly style HTML and generate DRY CSS files using encoded class names.Example Usage in HTML Tags:Use the CSS level 1, 2.1, and 3 syntax that you already know.<divclass="text-align-center margin-top-30"><pclass="font-size-25">The font-size is 25px.<spanclass="green">Green Text</span></p></div>blowdrycssdecodes the class namestext-align-center,margin-top-30,font-size-25, andgreen; and generates the
following atomic CSS inblowdry.css:.text-align-center { text-align: center }
.margin-top-30 { margin-top: 30px }
.font-size-25 { font-size: 25px }
.green { color: green }Advantages of blowdrycssRapid Development:Less time spent writing CSS, and cleaning up unused style rules.DRY (Don’t Repeat Yourself):Reduces CSS file size by only defining properties once.Symbiotic:Can be integrated with the current ecosystem of CSS compilers and frameworks.
Compatible with SASS, SCSS, PostCSS, LESS, Foundation, Bootstrap.Supports class selector discovery within HTML, JINJA, XHTML, .NET, Ruby ERB Templates, Javascript, and C#.Documented:Hands-ontutorialand sphinxdocumentationto get you up and running fast.Robust:Built for the real world in which deadlines and division of labor is not always taken into account. Can be used across all phases of a products lifecycle from prototype to production.Customizable:Features can be turned on and off inside ofblowdrycss_settings.py. Examples include:Watchdog file monitoringLoggingUnit parsingColor parsingFont parsingCSS MinificationMedia query parsing.Atomic:Generates atomic CSS declarations.Standardized:HTML5 compatible. AllW3C CSSLevel 2.1, and Level 3 properties implemented. PEP8 Compliant.Tested:UnitTest CoveragePermissive:MIT licenseRequirementsPython 2.7.x or 3.3+(required)cssutils 1.0.1+(required)future 0.15.2+(required - for Python 2.7)pandoc(required - file type conversion)pypandoc 1.1.2+(required - file type conversion)watchdog 0.8.2+(required - monitor directory and auto-generate CSS)Optionaltox 2.3.1+ (Multi-environment testing)tox-travis 0.4+(Allows tox to be used on Travis CI.)coverage 4.0.2+ (Check test coverage)coveralls 1.1+(Used to report coverage when tox is run via Travis CI.)sphinx 1.3.3+ (docs)Pre-Requisite KnowledgeBasic HTML and CSSZero programming experience required.MotivationThis tool was created after seeing how many companies manage their CSS files. The following are some scenarios:Scenario 1 - WET (Write Everything Twice) CSSInside a CSS file you find the following:.header-1{font-weight:bold;font-size:12px;font-color:red;}.header-2{font-weight:bold;font-size:16px;font-color:blue;}.header-3{font-weight:bold;font-size:12px;font-color:green;}The propertyfont-weight:bold;appears three times, andfont-size:12px;appears twice. This is not DRY (Don’t Repeat
Yourself).Scenario 2 - Stale or Unused CSSInside a CSS file you find the following:.banner-video{position:absolute;top:48%;left:50%;min-width:100%;min-height:100%;/*width: auto;*//*max-height: 30.5em;*/z-index:-100;transform:translateX(-50%)translateY(-50%);background-color:rgba(0,0,0,1);background-size:contain;transition:1sopacity;}Six months later the person who wrote this CSS is then asked to remove
banner-video from the homepage. More often than not the
front-end developer will remove the CSS class from the HTML file, but
not from the CSS file. This leaves unused CSS lurking in the project.Reasons include:Forgetting to delete the rule from the CSS file.Fear that the class is used somewhere else and that it might break
the site.Being too busy to search all of the files in their project for other
potential use cases.Now 326 bytes worth of stale CSS data lurks in the style files.Scenario 3 - Modern CSS Pre-compiler:CSS compilation with SASS/SCSS, PostCSS, or LESS is awesome, and makes
writing lots of CSS rules easy. Tools like these allow auto-generation
of hundreds of header rules like the ones above. If care is not taken
this leverage can rapidly grow the CSS file.SCSS Mixin example from a recent project:@mixintext($font-color,$font-size,$font-family:"Open Sans",$line-height:inherit){color:$font-color;font-size:$font-size;font-family:$font-family,$default-font-family;line-height:$line-height;}This mixin is called using@includeas follows:@includetext($color-blue,rem-calc(14px),$default-font-family);It turns out that@includetext(...)is called 627 times in our
SCSS. Most of these@includestatements include at least one
matching input parameter resulting in thousands of duplicate CSS
properties.Auto-generatingfont-size:1rem;500 times is now super easy with a
pre-compiler and a for-loop. Some might say,Well we minified it to save space.Yes but,Why did you write the same property 500 times in your main CSS file?CSS File size does matter. For consideration:Longer download times increase user bounce rates especially on mobile
devices.Data pollution on the Internet.Increased likelihood of style bugs.Increased time required to implement new changes and
deprecate features.What it is notThis tool is not designed to replace the need to hand-craft complex CSS property or rule declarations.Custom CSS would need to be written for Multi-rule classes, Background images, url() values, multi-word fonts, and some shorthand properties.The following is an example of something this tool in not intended to
generate, and something that still needs to be written by hand..home-banner{background:url("https://somewhere.net/images/banner/home-mainbanner-bg.jpg")no-repeat;font-family:"Open Sans","Source Sans Pro",Arial;background-repeat:no-repeat;background-size:cover;min-height:7rem;font-weight:bold;font-size:3.5625rem;color:white;line-height:3.6875rem;text-align:center;text-shadow:-2px2px4pxrgba(0,0,0,0.5);}Valuable ReferencesBlowdrycss DocumentationGithub RepoSlides presented at DessertPyW3C Full CSS property tableDon’t Repeat YourselfDownload Pythoncssutils 1.0.1+watchdog 0.8.2+LicenseTheMIT licenseHow to ContributeOpen an Issue first and get community buy-in.Write CodeWrite Unit Tests (All tests must pass. 100% coverage preferred.)