Skip to main content
Inspiring
April 18, 2022
Question

convert text files to CSS files

  • April 18, 2022
  • 3 replies
  • 2658 views

Hello All

Belated Happy Easter to all of you.  Can anyone suggest a good text manuplation program that would allow me to feed in a text file and convert the file to a basic CSS file?  I found a web site that lists some basic HTML color pallets, the text name of the color the hex code for the color and the rgb code for the color in a table format.  I copied the values into text files.  I would like to convert them into basic css files without having to do each one by hand as there are several.  I would like to be able to insert "--" in front of the text name and a ":" at the end of the text name at minimum.  I realize that additional steps are needed here but I'm sure you get the idea.  I seem to remember doing something like this before but I can't remember what program I used to do it.  Any suggestions would be helpful.  Here's an example:

 

 

    This topic has been closed for replies.

    3 replies

    Braniac
    April 18, 2022

    I dont know how helpful this will be but if you can get your color txt files down to 1 tab space and 1 color:

     

    lightyellow #FFFFE0
    lemonchiffon #FFFACD
    lightgoldenrodyellow #FAFAD2
    papayawhip #FFEFD5
    moccasin #FFE4B5
    peachpuff #FFDAB9
    palegoldenrod #EEE8AA
    khaki #F0E68C
    darkkhaki #BDB76B
    yellow #FFFF00

     

     

    You could use php to write to a css file:

     

     

    <?php
    $file = "yellows.txt";
    $colors = array();

    $fh = fopen($file, 'r');

    while (($row = fgetcsv($fh, 1000, "\t")) !== false) {
    $colors[] = $row;
    }
    foreach($colors as $color) {
    $colorScheme .= "--$color[0]: $color[1]; \n";
    }

    $colorfile = fopen("yellowScheme.css", "w");

    fwrite($colorfile, ":root {\n");
    fwrite($colorfile, $colorScheme);
    fwrite($colorfile, "}");

    fclose($colorfile);
    ?>

     

     

    Which will output:

     

    :root {
    --lightyellow: #FFFFE0;
    --lemonchiffon: #FFFACD;
    --lightgoldenrodyellow: #FAFAD2;
    --papayawhip: #FFEFD5;
    --moccasin: #FFE4B5;
    --peachpuff: #FFDAB9;
    --palegoldenrod: #EEE8AA;
    --khaki: #F0E68C;
    --darkkhaki: #BDB76B;
    --yellow: #FFFF00;
    }

    Inspiring
    April 19, 2022

    indeed PHP can generate this kind of document, but I wonder why invoke a server script when SCSS handles it locally and simply, and that natively within DW itself?

     

    to see the result in live,  https://www.sassmeister.com/

    $colorbank :
    lightyellow 			#FFFFE0 	rgb(255,255,224),
    lemonchiffon 			#FFFACD 	rgb(255,250,205),
    lightgoldenrodyellow 	#FAFAD2 	rgb(250,250,210),
    papayawhip 				#FFEFD5 	rgb(255,239,213),
    moccasin 				#FFE4B5 	rgb(255,228,181),
    peachpuff 				#FFDAB9 	rgb(255,218,185),
    palegoldenrod 			#EEE8AA 	rgb(238,232,170),
    khaki 					#F0E68C 	rgb(240,230,140),
    darkkhaki 				#BDB76B 	rgb(189,183,107),
    yellow 					#FFFF00 	rgb(255,255,0);
    
    :root {
        @10993877 $name, $hex, $rgb in $colorbank {
          --#{$name}:#{$hex};
        }
    }

     

    Inspiring
    April 20, 2022

    What if I do not have a PHP server running? A lot of developers are turning to NodeJS for various important reasons.


    Hi All

     

    For anyone who is interested, I've created a small Access database with the RGB and Hex Codes for all the color pallets that were lsited on the web site.  The database contains the color name, the variable name the hex code and the RGB code grouped by pallet.  If you'd like a copy I'll happily provide.

    Inspiring
    April 18, 2022

    have you ever heard of Sass... https://sass-lang.com/ ?

     

    from there you can

     

    that way you can employ a Text based table that the mixin will convert as you like.

    this way getting you yellows.txt example

    open sassmeister https://www.sassmeister.com/

    on the left window paste

    $colorbank :
    lightyellow 			#FFFFE0 	rgb(255,255,224),
    lemonchiffon 			#FFFACD 	rgb(255,250,205),
    lightgoldenrodyellow 	#FAFAD2 	rgb(250,250,210),
    papayawhip 				#FFEFD5 	rgb(255,239,213),
    moccasin 				#FFE4B5 	rgb(255,228,181),
    peachpuff 				#FFDAB9 	rgb(255,218,185),
    palegoldenrod 			#EEE8AA 	rgb(238,232,170),
    khaki 					#F0E68C 	rgb(240,230,140),
    darkkhaki 				#BDB76B 	rgb(189,183,107),
    yellow 					#FFFF00 	rgb(255,255,0);
    
    @each $name, $hex, $rgb in $colorbank {
      .color-#{$name} {
        color: $hex;
        color: $rgb;
      }
    }

    and see what happen on the right window

     

    in fact I just added a variable name, a comma on each line, but the last one a semicolon to your text

    then a simple mixin... and you can convert it as you like... 

     

    as you can see, if the rgb value correspond to an existing referenced color, it will be translated to it... change the rgb value and you'll see that the label name wont be used anymore, but an hex value...

     

    in any case, be careful not to reinvent hot water

    Inspiring
    April 18, 2022

    Thanks for this I will certainly check it out.  I'm not a web wiz.  I'm just experimenting with stuff and trying to learn and expand my knowlege in the process.  My hope is to be able to create a web templete that is configurable and maybe be able to do things like change the color scheme by swapping in a color pallet file.  Thanks for not being critical of my question and allowing me to explore.

    Nancy OShea
    Braniac
    April 18, 2022

    What you have there is neither LESS, SASS or SCSS.  So I don't know what you're hoping to do with it.

     

    What you have now is closer to _root.scss variables which are frequently used in Bootstrap Themeing.

    https://getbootstrap.com/docs/4.0/getting-started/theming/

     

    :root {
      --blue: #007bff;
      --indigo: #6610f2;
      --purple: #6f42c1;
      --pink: #e83e8c;
      --red: #dc3545;
      --orange: #fd7e14;
      --yellow: #ffc107;
      --green: #28a745;
      --teal: #20c997;
      --cyan: #17a2b8;
      --white: #fff;
      --gray: #6c757d;
      --gray-dark: #343a40;
      --primary: #007bff;
      --secondary: #6c757d;
      --success: #28a745;
      --info: #17a2b8;
      --warning: #ffc107;
      --danger: #dc3545;
      --light: #f8f9fa;
      --dark: #343a40;
      --breakpoint-xs: 0;
      --breakpoint-sm: 576px;
      --breakpoint-md: 768px;
      --breakpoint-lg: 992px;
      --breakpoint-xl: 1200px;

     

    Nancy O'Shea— Product User, Community Expert &amp; Moderator
    Inspiring
    April 18, 2022

    Nancy,

     

    Yes I've seen the bootsrap code.  That's where I got the idea.  My idea is to create somthing similar for each of the color pallet files and pull the CSS into a web template.  Allowing for easier color configurations based on the chosen CSS pallett.  I've beem experimentinting with using CSS variables and the var statement to change colors and other page aspects by using the variable rather than having to change a page aspect like border color in multiple places I can use varibles and change it in one place.  When I saw the color pallet groups it was a logical step.  So far it works.  I have been able to control color, border width and many other aspects.  I'm experimenting and learning in the process. 

     

    [Personal remarks removed by moderator. Please refer to Adobe Support Community Guidelines.

    https://community.adobe.com/t5/using-the-community-discussions/adobe-support-community-guidelines/td-p/4788157]