16 Commits
1.1 ... master

  1. 4
      LICENSE.md
  2. 8
      README.md
  3. 136
      generate.php
  4. 2258
      material-color.css
  5. 9
      material-color.min.css
  6. 6
      minify.sh

4
LICENSE → LICENSE.md

@ -1,5 +1,5 @@
MIT License
Copyright (c) <year> <copyright holders>
# MIT License
Copyright (c) 2017 Netsyms Technologies
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

8
README.md

@ -1,3 +1,9 @@
# Material-Color
Additional color classes for Bootstrap 3. Based on the [Material Design palette](https://material.io/guidelines/style/color.html#color-color-palette).
Additional color classes for Bootstrap 4. Based on the [Material Design palette](https://material.io/guidelines/style/color.html#color-color-palette).
## Notes:
* Link this CSS after you link to Bootstrap.css.
* Use the included color classes instead of .btn-primary, .alert-danger, etc.
* Navbars need .navbar-dark or .navbar-light to appear properly, choose according to your colors.
* We recommend using [Bootswatch Materia](https://bootswatch.com/materia/) (a material design Bootstrap theme) with this stylesheet.

136
generate.php

@ -0,0 +1,136 @@
<?php
$use_variables = false;
$classes = [
"alert" => ["background-color" => "m", "color" => "t!"],
"alert .alert-link" => ["color" => "t!"],
"alert .alert-heading" => ["color" => "t!"],
"badge" => ["background-color" => "m", "color" => "t"],
"btn" => ["background-color" => "m", "color" => "t"],
"bg" => ["background-color" => "m"],
"list-group-item" => ["background-color" => "m", "color" => "t"],
"border" => ["border-color" => "m", "border-width" => "1px"],
"text" => ["color" => "m"]
];
$colors = [
"red" => "#f44336",
"pink" => "#e91e63",
"purple" => "#9c27b0",
"deep-purple" => "#673ab7",
"indigo" => "#3f51b5",
"blue" => "#2196f3",
"light-blue" => "#03a9f4",
"cyan" => "#00bcd4",
"teal" => "#009688",
"green" => "#4caf50",
"light-green" => "#8bc34a",
"lime" => "#cddc39",
"yellow" => "#ffeb3b",
"amber" => "#ffc107",
"orange" => "#ff9800",
"deep-orange" => "#ff5722",
"brown" => "#795548",
"grey" => "#9e9e9e",
"blue-grey" => "#607d8b"
];
$texts = [
"red" => "white",
"pink" => "white",
"purple" => "white",
"deep-purple" => "white",
"indigo" => "white",
"blue" => "white",
"light-blue" => "black",
"cyan" => "black",
"teal" => "white",
"green" => "white",
"light-green" => "black",
"lime" => "black",
"yellow" => "black",
"amber" => "black",
"orange" => "black",
"deep-orange" => "white",
"brown" => "white",
"grey" => "black",
"blue-grey" => "white"
];
/* License header */
$year = date('Y');
echo <<<END
/* Material-Color.css
* Copyright (c) $year Netsyms Technologies
* MIT License
* https://source.netsyms.com/Netsyms/Material-Color
*/
END;
/* Make CSS variables */
if ($use_variables) {
echo ":root {\n";
foreach ($colors as $k => $v) {
if (strpos($k, "text-") !== FALSE) {
continue;
}
echo "\t--material-color-$k: $v;\n";
}
echo "}\n\n";
}
/* The fun bit */
foreach ($classes as $c => $props) {
foreach ($colors as $k => $v) {
$t = $texts[$k];
// Save a few bytes
if ($t == "white") {
$t = "#fff";
} else if ($t == "black") {
$t = "#000";
}
// Color setup
if ($use_variables) {
$m = "var(--material-color-$k)";
} else {
$m = $v;
}
// Class
if (strpos($c, " ") !== FALSE) {
$classes = explode(" ", $c);
foreach ($classes as $cl) {
if (strpos($cl, ".") === 0) {
echo "$cl ";
} else {
echo ".$cl-$k ";
}
}
echo "{\n";
} else {
echo ".$c-$k {\n";
}
foreach ($props as $prop => $val) {
echo "\t$prop: ";
if (strpos($val, "m") === 0) {
echo $m;
} else if (strpos($val, "t") === 0) {
echo $t;
} else {
echo $val;
}
if (strpos($val, "!") === 1) {
echo " !important";
}
echo ";\n";
}
// Finish it off
echo "}\n";
}
}
?>

2258
material-color.css
File diff suppressed because it is too large
View File

9
material-color.min.css
File diff suppressed because it is too large
View File

6
minify.sh

@ -0,0 +1,6 @@
#!/bin/bash
command -v yui-compressor >/dev/null 2>&1 || { echo >&2 "Please install yui-compressor and try again."; exit 1; }
echo "Compressing CSS..."
echo "$(head -n 5 material-color.css)" > material-color.min.css
echo "$(yui-compressor material-color.css)" >> material-color.min.css
echo "Done."
Loading…
Cancel
Save