Automatic CSS Preview Generator - Have css file, want to automatically generate html to preview styles

Question

I have a fairly large CSS file developed by my web designer.

There are, of course, plenty of IDs, classes and tag properties assigned therein. Are there any tools to automatically generate HTML based on a CSS source file?

For example:

#basicInfoHead{
    background:url(../images/leftHeaders.jpg) no-repeat;
    margin-left: 0px;
    width:185px;
    height:28px;
}

#basicInfoHead span{
    float: left;    
}

Would generate

<div id=basicInfoHead><span>#basicInfoHead span</span></div>

Etc etc. From there, I could preview the generated code in my browser, and see what each of the individual (primarily text) styles would look like.

Thanks in advance!

The CSS would have to be more specific in order to do this i.e. div#basicInfoHead rather than just #basicInfoHead. It's going to be pretty difficult to work out what should and shoudnt contain dummy text though don't you reckon? — Dr. Frankenstein
– Dr. Frankenstein, Commented May 23, 2010 at 22:24

Pekka · Accepted Answer · 2010-05-23 22:32:07Z

2

This doesn't sound really applicable to a real world stylesheet. Your example is straightforward enough (even though it would have to be a div#basicInfoHead for any generator to know what to generate) but what if it becomes more complicated? What about elements that get defined in different was for multiple pages? What about elements that need to be on top of element x, or that need an element y directly following to look well? What about "incomplete" classes e.g. for a <table><tr><th> series that doesn't define anything for the tr? What about specific rules for combined classes .class1.class2.class3?

In the list of style sheets I've been working on, there is not one that could be turned into sensible HTML code by a generator like the one you are looking for. Not sure whether a tool like this exists.

Your designer should be delivering HTML for you to test the CSS. That's the usual way and as far as I can see, the only way that really makes sense.

edited May 23, 2010 at 22:32

answered May 23, 2010 at 22:26

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcel Chastain Over a year ago

True. I have to make a lot of assumptions about how my designer is styling things that wouldn't really apply to other people's sites. For now I'm hacking together a bit of perl -- wish me luck =)

Marcel Chastain · Accepted Answer · 2010-05-23 23:33:52Z

Here we go. I'm making several assumptions that will only hold because my designer uses a certain style:

Everything is a div
I only want to see text styles, so I'll ignore anything that doesn't seem text-related

Not my best stuff, but it works for the majority of my styles. Had to manually edit a few tags, such as ul, ol, li, and remove 'body'.

#!/usr/bin/perl
use warnings;
use strict;
my $css;

open(FILE, '<', 'styles.css') or die();
while (<FILE>) { $css .= $_; }
close(FILE);

my (@css) = $css =~ m/^([a-zA-Z.#][^\n\r]+{.+?})/gmxs;

my @text_css = grep { /\s(h[1-5]|span|font|color|p|a|ol|ul)\b/ } @css;
foreach my $css(@text_css) {
    my ($selector_text) = $css =~ /^([^{]*){/;
    my (@selector) = split(/[\s{]/,(split(/[\n\r]+/,$selector_text))[0]);
    @selector = grep { !/{/ } @selector;
    my $start_html = '';
    my $middle_html = join(" ",@selector);
    my $end_html = '';
    my $result = '';
    for (my $i=0; $i< scalar(@selector); $i++) {
        $selector[$i] =~ s/:[-\w]+//g;
        if (substr($selector[$i],0,1) eq '#') {
            $selector[$i] =~ s/^#//g;
            $start_html .= qq(<div id="$selector[$i]">);
            $end_html = "</div>" . $end_html;
        }
        elsif (substr($selector[$i],0,1) eq '.') {
            $selector[$i] =~ s/^\.//g;
            $start_html .= qq(<div class="$selector[$i]">);
            $end_html = "</div>" . $end_html;
        } 
        else {
            # we have a tag, possibly with an id/class
            my($tag,$extra,$type);
            if ($selector[$i] =~ m/\./) {
                ($tag,$extra) = split('.', $selector[$i]);
                $extra =~ s/^\.//g;
                $type = 'class';
            }
            elsif ($selector[$i] =~ m/#/) {
                ($tag,$extra) = split('#', $selector[$i]);
                $extra =~ s/^#//g;
                $type = 'id';
            }
            else {
                $tag = $selector[$i];
            }

            if ($extra and $type) {
                $start_html .= qq(<$tag $type="$extra">);
            }
            else {
                $start_html .= qq(<$tag>);
            }
            $end_html = "</$tag>" . $end_html;
        }

        # is this the last one?
        if ($i == scalar(@selector) - 1) {
            $result = $start_html . $middle_html . $end_html;
        }


        print "<div>$result</div>\n" if ($result);
    }
}

ccpizza · Accepted Answer · 2020-06-05 10:47:11Z

0

A python-based CSS preview generator: https://github.com/glowinthedark/css_stylesheet_preview_generator

Depends on cssutils (install with pip3 install cssutils).

Usage:

python3 css_preview_generator.py mystyle.css > preview.html

answered Jun 5, 2020 at 10:47

ccpizza

32.4k24 gold badges186 silver badges195 bronze badges

Collectives™ on Stack Overflow

Automatic CSS Preview Generator - Have css file, want to automatically generate html to preview styles

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related