convert text files to CSS files

[VShaneCurtis]

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:

[Nancy OShea]

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;

[VShaneCurtis]

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...

[L e n a]

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

from there you can

• or playing with existing built in function https://sass-lang.com/documentation/values/colors , https://sass-lang.com/documentation/modules/color
• or using your own mixin, here is an idea of playing with it https://www.educba.com/sass-each/?source=leftnav

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

[VShaneCurtis]

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.

[osgood_]

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;
}

[VShaneCurtis]

Thank you for sharing this.  That's exactly where I was going with this idea.  One file with hex codes and a second with rgb values.  I'm unfamiliar with PHP but I will save your code and reseach further how to execute it.  Also thinking about making a small database out of this info.  This is the web site if anyone is interested.  [RapidTables link removed by moderator.]

[B i r n o u]

[RapidTables link removed by moderator.]

By VShaneCurtis

Who and why removed this link ?

[osgood_]

[RapidTables link removed by moderator.]

By VShaneCurtis

Who and why removed this link ?

By B i r n o u

The local forum ghost - strange things happen around these parts when no-one is here!

[B i r n o u]

[L e n a]

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 {
    @each $name, $hex, $rgb in $colorbank {
      --#{$name}:#{$hex};
    }
}

[osgood_]

Some of us dont use sass, yes it's true! or git, yes its true! 

php doesnt require to add , at the end of each line. php writes to a css file or can create a css file. It's probably more automated, maybe, depending on the formatted source file, that's key as to if it works or not but I suspect either way it will need to have some minimum manipulation.

Different strokes for different folks, everything is 'simple' when you know how.

Edited:

To eleborate, one advantage of using php is it can loop through numerous files in a matter of seconds i.e., you can include those files in an array and use the previous code I provided to loop through all the files in the array and create a css file for each, all in one operation.

$file = ['yellows.txt' , 'reds.txt' , 'greens.txt' , 'blues.txt' , 'oranges.txt' ,  'greys.txt' ,  'golds.txt'];

[BenPleysier]

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

[VShaneCurtis]

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.

[B i r n o u]

it can be interesting, could you please remind the tables of which it is about?

[osgood_]

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

By BenPleysier

Ask the reverse question. What if I do not have Node.js installed on my computer? Whichever way, if you want to take advantage of a server language you need to install the running enviroment initially.....and that's not why developers are turning to node.js, they still have to go through a set up process. It's more they can't be asked to learn a completely different language if they already know some javascript which is fair enough, rather than a lot of 'noddys' saying 'php is dying or is no good', that's just laughable.