mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 01:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Created build-dev script to only build 1 css file for quicker testing enviroment. Added accordion javascript for slide effect. modified the notification scss, and added more demos.

Browse source
This commit is contained in:
Yohn 2024-11-12 00:35:16 -05:00
parent b1fcd44b73
commit 26e82a693d
246 changed files with 1716 additions and 2269 deletions
Download patch file Download diff file Expand all files Collapse all files

144
scripts/build-dev.js Normal file
View file

@ -0,0 +1,144 @@
const sass = require("sass");
const path = require("path");
const fs = require("fs");
const themeColors = [
//? uncomment 1 theme you'd like to build for the dev environment.
//"amber",
//"blue",
//"cyan",
//"fuchsia",
//"green",
//"grey",
//"indigo",
//"jade",
"lime",
//"orange",
//"pink",
//"pumpkin",
//"purple",
//"red",
//"sand",
//"slate",
//"violet",
//"yellow",
//"zinc",
];
const tempScssFoldername = path.join(__dirname, "../.pico");
const cssFoldername = path.join(__dirname, "../css");
// Create a folder if it doesn't exist
const createFolderIfNotExists = (foldername) => {
if (!fs.existsSync(foldername)) {
fs.mkdirSync(foldername);
}
};
// Empty a folder
const emptyFolder = (foldername) => {
// Delete all files in the temp folder
fs.readdirSync(foldername).forEach((file) => {
fs.unlinkSync(path.join(foldername, file));
});
};
// Create the temp folder if it doesn't exist
createFolderIfNotExists(tempScssFoldername);
// Empty the temp folder
emptyFolder(tempScssFoldername);
// Loop through the theme colors
themeColors.forEach((themeColor, colorIndex) => {
// All the versions to generate
const versions = [
{
name: "pico",
content: `@use "../scss" with (
$theme-color: "${themeColor}"
);`,
},
//{
// name: "pico.classless",
// content: `@use "../scss" with (
// $theme-color: "${themeColor}",
// $enable-semantic-container: true,
// $enable-classes: false
// );`,
//},
//{
// name: "pico.fluid.classless",
// content: `@use "../scss" with (
// $theme-color: "${themeColor}",
// $enable-semantic-container: true,
// $enable-viewport: false,
// $enable-classes: false
// );`,
//},
//{
// name: "pico.conditional",
// content: `@use "../scss" with (
// $theme-color: "${themeColor}",
// $parent-selector: ".pico"
// );`,
//},
//{
// name: "pico.classless.conditional",
// content: `@use "../scss" with (
// $theme-color: "${themeColor}",
// $enable-semantic-container: true,
// $enable-classes: false,
// $parent-selector: ".pico"
// );`,
//},
//{
// name: "pico.fluid.classless.conditional",
// content: `@use "../scss" with (
// $theme-color: "${themeColor}",
// $enable-semantic-container: true,
// $enable-viewport: false,
// $enable-classes: false,
// $parent-selector: ".pico"
// );`,
//},
];
const displayAsciiProgress = ({length, index, color}) => {
const progress = Math.round((index / length) * 100);
const bar = "■".repeat(progress / 10);
const empty = "□".repeat(10 - progress / 10);
process.stdout.write(`[@picocss/pico] ✨ ${bar}${empty} ${color}\r`);
};
// Loop through the versions
versions.forEach((version) => {
displayAsciiProgress({
length: themeColors.length,
index: colorIndex,
color: themeColor.charAt(0).toUpperCase() + themeColor.slice(1),
});
// Create the file
fs.writeFileSync(
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
version.content,
);
// Compile the file
const result = sass.compile(
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
{ outputStyle: "compressed" },
);
// Write the file
fs.writeFileSync(path.join(cssFoldername, `${version.name}.${themeColor}.css`), result.css);
// Clear the console
process.stdout.clearLine();
process.stdout.cursorTo(0);
});
});
// Empty the temp folder
emptyFolder(tempScssFoldername);

214
scripts/build-themes.js
View file

@ -3,25 +3,25 @@ const path = require("path");
const fs = require("fs");
const themeColors = [
"amber",
"blue",
"cyan",
"fuchsia",
"green",
"grey",
"indigo",
"jade",
"lime",
"orange",
"pink",
"pumpkin",
"purple",
"red",
"sand",
"slate",
"violet",
"yellow",
"zinc",
"amber",
"blue",
"cyan",
"fuchsia",
"green",
"grey",
"indigo",
"jade",
"lime",
"orange",
"pink",
"pumpkin",
"purple",
"red",
"sand",
"slate",
"violet",
"yellow",
"zinc",
];
const tempScssFoldername = path.join(__dirname, "../.pico");
@ -29,17 +29,17 @@ const cssFoldername = path.join(__dirname, "../css");
// Create a folder if it doesn't exist
const createFolderIfNotExists = (foldername) => {
if (!fs.existsSync(foldername)) {
fs.mkdirSync(foldername);
}
if (!fs.existsSync(foldername)) {
fs.mkdirSync(foldername);
}
};
// Empty a folder
const emptyFolder = (foldername) => {
// Delete all files in the temp folder
fs.readdirSync(foldername).forEach((file) => {
fs.unlinkSync(path.join(foldername, file));
});
// Delete all files in the temp folder
fs.readdirSync(foldername).forEach((file) => {
fs.unlinkSync(path.join(foldername, file));
});
};
// Create the temp folder if it doesn't exist
@ -50,93 +50,93 @@ emptyFolder(tempScssFoldername);
// Loop through the theme colors
themeColors.forEach((themeColor, colorIndex) => {
// All the versions to generate
const versions = [
{
name: "pico",
content: `@use "../scss" with (
$theme-color: "${themeColor}"
);`,
},
{
name: "pico.classless",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$enable-semantic-container: true,
$enable-classes: false
);`,
},
{
name: "pico.fluid.classless",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$enable-semantic-container: true,
$enable-viewport: false,
$enable-classes: false
);`,
},
{
name: "pico.conditional",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$parent-selector: ".pico"
);`,
},
{
name: "pico.classless.conditional",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$enable-semantic-container: true,
$enable-classes: false,
$parent-selector: ".pico"
);`,
},
{
name: "pico.fluid.classless.conditional",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$enable-semantic-container: true,
$enable-viewport: false,
$enable-classes: false,
$parent-selector: ".pico"
);`,
},
];
// All the versions to generate
const versions = [
{
name: "pico",
content: `@use "../scss" with (
$theme-color: "${themeColor}"
);`,
},
{
name: "pico.classless",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$enable-semantic-container: true,
$enable-classes: false
);`,
},
{
name: "pico.fluid.classless",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$enable-semantic-container: true,
$enable-viewport: false,
$enable-classes: false
);`,
},
{
name: "pico.conditional",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$parent-selector: ".pico"
);`,
},
{
name: "pico.classless.conditional",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$enable-semantic-container: true,
$enable-classes: false,
$parent-selector: ".pico"
);`,
},
{
name: "pico.fluid.classless.conditional",
content: `@use "../scss" with (
$theme-color: "${themeColor}",
$enable-semantic-container: true,
$enable-viewport: false,
$enable-classes: false,
$parent-selector: ".pico"
);`,
},
];
const displayAsciiProgress = ({length, index, color}) => {
const progress = Math.round((index / length) * 100);
const bar = "■".repeat(progress / 10);
const empty = "□".repeat(10 - progress / 10);
process.stdout.write(`[@picocss/pico] ✨ ${bar}${empty} ${color}\r`);
};
const displayAsciiProgress = ({length, index, color}) => {
const progress = Math.round((index / length) * 100);
const bar = "■".repeat(progress / 10);
const empty = "□".repeat(10 - progress / 10);
process.stdout.write(`[@picocss/pico] ✨ ${bar}${empty} ${color}\r`);
};
// Loop through the versions
versions.forEach((version) => {
displayAsciiProgress({
length: themeColors.length,
index: colorIndex,
color: themeColor.charAt(0).toUpperCase() + themeColor.slice(1),
});
// Loop through the versions
versions.forEach((version) => {
displayAsciiProgress({
length: themeColors.length,
index: colorIndex,
color: themeColor.charAt(0).toUpperCase() + themeColor.slice(1),
});
// Create the file
fs.writeFileSync(
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
version.content,
);
// Create the file
fs.writeFileSync(
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
version.content,
);
// Compile the file
const result = sass.compile(
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
{ outputStyle: "compressed" },
);
// Compile the file
const result = sass.compile(
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
{ outputStyle: "compressed" },
);
// Write the file
fs.writeFileSync(path.join(cssFoldername, `${version.name}.${themeColor}.css`), result.css);
// Write the file
fs.writeFileSync(path.join(cssFoldername, `${version.name}.${themeColor}.css`), result.css);
// Clear the console
process.stdout.clearLine();
process.stdout.cursorTo(0);
});
// Clear the console
process.stdout.clearLine();
process.stdout.cursorTo(0);
});
});
// Empty the temp folder