dirs

2023-06-02 13:03:21 +02:00
parent 9563aab3e1
commit df28c178fe
8 changed files with 0 additions and 0 deletions
--- a/dev/design_for_developers_sarah_drasner_front_end_masters.md
+++ b/dev/design_for_developers_sarah_drasner_front_end_masters.md
@@ -0,0 +1,122 @@
+Watching this on June 2.
+
+# Ideas/Traditions
+
+"Make and break the grid." (book: Making and Breaking the Grid)
+
+Swiss design.
+
+# Practices
+
+Don't design in the browser! Give yourself the ability to experiment before you feel locked into a design. It separates the content and code from the design.
+
+# Tools
+
+## Photoshop
+
+Use layers, use marquee tool and fill.
+
+### kb shortcuts
+
+- v: move objects around
+- m: marquee (shift + m for non-square)
+- G: paint bucket
+- shift + G: gradient
+- d: default colors
+- x: shift between foreground and background
+- t: text
+- i: eyedropper
+- command + t: transform
+
+# CSS
+- https://gridbyexample.com
+- https://labs.jensimmons.com
+  - super cool diagonal "Swiss" layout
+    - surprisingly small amount of code
+- https://cssgridgarden.com
+
+## Really Simple Full Layout Using Grid Template
+
+![grid template layout](./grid-template.png)
+
+### styles.css
+```css
+.item-a {
+    grid-area: header;
+}
+
+.item-b {
+    grid-area: main;
+}
+
+.item-c {
+    grid-area: sidebar;
+}
+
+.item-d {
+    grid-area: footer;
+}
+
+section {
+    display: grid;
+    width: 100vw;
+    height: 100vh;
+    grid-column-gap: 10px;
+    grid-row-gap: 15px;
+    grid-template-areas: 
+      "header header header header header"
+      "main main main . sidebar"
+      "footer footer footer footer footer";
+    ;
+    grid-template-rows: 80px auto 80px;
+}
+
+div {
+    background: grey;
+}
+```
+
+### index.html > body
+
+```html
+<section>
+    <div class="item item-a"></div>
+    <div class="item item-b"></div>
+    <div class="item item-c"></div>
+    <div class="item item-d"></div>
+</section>
+```
+
+## Nice Layout With Different Sized Boxes Using Grid Area
+
+![grid area layout](./grid-area.png)
+
+### css
+
+```css
+.item-a {
+    background: teal;
+    /* grid-column-start: 2; */
+    /* grid-column-end: span 3; */
+    /* grid-row-start: 3; */
+    /* grid-row-end: span 2; */
+    grid-area: 2 / 3 / span 3 / span 2;
+
+}
+
+
+section {
+    display: grid;
+    width: 100vw;
+    height: 100vh;
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+}
+
+div {
+    background: grey;
+}
+```
+