Skip to content

Instantly share code, notes, and snippets.

@polarbirke

polarbirke/create-itcss-folders-and-files.sh

Last active October 15, 2019 15:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save polarbirke/385d992e1270c519df3c3656c2679b72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save polarbirke/385d992e1270c519df3c3656c2679b72 to your computer and use it in GitHub Desktop.
Download ZIP
Legt die wf-ITCSS-Ordnerstruktur mit Dateien und einer skeleton screen.scss an.
Raw
create-itcss-folders-and-files.sh
#!/bin/bash
mkdir 00_settings
cat > 00_settings/_colors.scss << EOF
/* Color Scaffolding
-------------------------------------- */
/// Brand colors
/// e.g. $young-blue: #009add;
/// Util colors
$near-black: #111111;
$dark-gray: #333333;
$moon-gray: #cecece;
$light-gray: #eeeeee;
/* Project colors
-------------------------------------- */
// e.g. $color-text: $near-black;
EOF
cat > 00_settings/_spacings.scss << EOF
$unit: 2rem;
$unit--half: $unit*1/2;
$unit--third: $unit*1/3;
$unit--twothirds: $unit*2/3;
$unit--fourth: $unit*1/4;
$unit--threefourths:$unit*3/4;
$unit--fifth: $unit*1/5;
$unit--sixth: $unit*1/6;
$unit--eighth: $unit*1/8;
$unit--tenth: $unit*1/10;
$unit--sixteenth: $unit*1/16;
$unit--oneandhalf: $unit*1.5;
$unit--double: $unit*2;
$unit--triple: $unit*3;
$unit-multiples: (
0: 0,
auto: auto,
unit: 1,
half: 1/2,
third: 1/3,
twothirds: 2/3,
fourth: 1/4,
threefourths:3/4,
fifth: 1/5,
sixth: 1/6,
eighth: 1/8,
tenth: 1/10,
sixteenth: 1/16,
oneandhalf: 1.5,
double: 2,
triple: 3,
);
EOF
cat > 00_settings/_settings.scss << EOF
@import 'colors';
@import 'spacings';
EOF
mkdir 01_tools
cat > 01_tools/_a11y.scss << EOF
/// Versteckt Inhalte visuell, ohne sie für Screenreader unsichtbar zu machen
@mixin is-visually-hidden() {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
EOF
cat > 01_tools/_spacings.scss << EOF
/// Setzt margin-top auf konsekutiven direkten Kindelementen
/// Nutzen: erzeugt weitreichend (aber mit geringer Spezifität) vertikalen Rhythmus, v. a. für
/// WYSIWYG-Inhalte; typische Anwendung auf Hauptinhalt der Seite, aber auch innerhalb von
/// CKE-Widgets wie Akkordeons, Ausklappbaren Abschnitten, Boxen etc.
///
/// @param {String} $margin-top [$unit--half] - Wert für margin-top
/// @see alistapart.com/article/axiomatic-css-and-lobotomized-owls
@mixin applyTopMarginToDirectDescendantSiblings($margin-top: $unit--half) {
> * + * {
margin-top: $margin-top;
}
}
/// Verwaltet vertikalen Abstand über margin-top, wenn das Element
/// einen vorangehenden Sibling hat
/// (elegantere, weil unspezifischere Schreibweise für :not(:first-child))
///
/// @param {String} $margin-top [$unit--half] - Wert für margin-top
/// @see alistapart.com/article/axiomatic-css-and-lobotomized-owls
@mixin applyTopMargin($margin-top: $unit--half) {
* + & {
margin-top: $margin-top;
}
}
/// Verwaltet vertikale Abstände über margin-top auf Folgeelementen
/// (sollte nur in Ausnahmefällen nötig sein)
///
/// @param {String} $margin-top [$unit--half] - Wert für margin-top
/// @see alistapart.com/article/axiomatic-css-and-lobotomized-owls
@mixin applyTopMarginToNextElem($margin-top: $unit--half) {
+ * {
margin-top: $margin-top;
}
}
EOF
cat > 01_tools/_tools.scss << EOF
@import 'a11y';
@import 'spacings';
EOF
mkdir 02_generic
cat > 02_generic/_box-sizing.scss << EOF
// use box-sizing inheritance
// @src https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
EOF
cat > 02_generic/_generic.scss << EOF
@import 'box-sizing';
EOF
mkdir 03_elements
cat > 03_elements/_img.scss << EOF
img {
max-width: 100%;
}
EOF
cat > 03_elements/_elements.scss << EOF
@import 'img';
EOF
mkdir 04_objects
cat > 04_objects/_vertical-rhythm.scss << EOF
.vertical-rhythm {
@include applyTopMarginToDirectDescendantSiblings;
}
EOF
cat > 04_objects/_objects.scss << EOF
@import 'vertical-rhythm';
EOF
mkdir 05_components
touch 05_components/_components.scss
mkdir 06_trumps
cat > 06_trumps/_a11y.scss << EOF
.u-visually-hidden {
@include is-visually-hidden;
}
EOF
cat > 06_trumps/_trumps.scss << EOF
@import 'a11y';
EOF
cat > screen.scss << EOF
// <PROJEKT> CSS
// - nutzt ITCSS Struktur (s. https://www.hongkiat.com/blog/inverted-triangle-css-web-development/)
// SETTINGS
// Globale Variablen, seitenweite Einstellungen, etc.
@import '00_settings/settings';
// TOOLS
// Seitenweit eingesetzte Mixins und Funktionen
@import '01_tools/tools';
// GENERIC
// Weitreichende Regeln mit geringer Spezifität, z. B. * { box-sizing: border-box; }
@import '02_generic/generic';
// ELEMENTS
// Allgemeine Regeln für HTML Elemente (ohne Klasse), z. B. body { … }
@import '03_elements/elements';
// OBJECTS
// Objekte, Abstraktionen und Patterns, z. B. Grid)
@import '04_objects/objects';
// COMPONENTS
// Diskrete/eigenständige UI-Komponenten, z. B. .gba-button { … })
@import '05_components/components';
// TRUMPS
// Trümpfe, die ggf. alles vorhergehende überschreiben können (Helferklassen mit !important)
@import '06_trumps/trumps';
EOF
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment