Skip to content

Commit 2317577

Browse files
mechmech
committed
Sass
1 parent cec28f4 commit 2317577

41 files changed

Lines changed: 444 additions & 23 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎API/CORS.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ JSON-P is just a hack to bypass same-origin as the `<script>` tag does not respe
1212
* [Example](https://github.com/mbleigh/cors-talk-example)
1313
* [Cross-domain Ajax with CORS - Nicholas C. Zakas](http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/)
1414
* [Rails 4, CORS, JWT and Devise](https://www.youtube.com/watch?v=_CAq-F2icp4)
15+
* [That's so fetch - Some CORS issues](http://jakearchibald.com/2015/thats-so-fetch/)
16+
* [Same-Origin Policy](https://annevankesteren.nl/2015/02/same-origin-policy)
1517

1618
CORS let JavaScript XHR to securely communicate with cross-domain resources.
1719

‎CSS/OOCSS_BEM.md‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ OOCSS avoids IDs and especially descendant selectors, which tightly couple HTML
132132
* [multiple classes vs `@extend`](http://bensmithett.com/bem-modifiers-multiple-classes-vs-extend/)
133133
* [A BEM syntax with UX in mind](http://simurai.com/blog/2013/10/24/BEM-syntax-with-ux-in-mind/)
134134
* [**More transparent UI code with namespaces**](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)
135+
* [BEM your JavaScript components](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b)
135136

136137
```css
137138
/* Harry Robert's BEM */
@@ -193,4 +194,42 @@ You can use `avatar` elsewhere, but `profile__image` belongs to the `profile` co
193194
<div class="box profile">
194195
<img class="avatar profile__image" />
195196
</div>
196-
```
197+
```## Dave Shea's Argon
198+
199+
```scss
200+
.swift-project.-activeProject ._filterField {}
201+
202+
.swift-project {
203+
._filterList {}
204+
205+
&.-activeProject {}
206+
207+
._filterField {}}
208+
```
209+
210+
```html
211+
<div class="swift-project -activeProject">
212+
<div class="_filterList">
213+
<input type="text" class="_filterField" />
214+
<input type="text" class="_filterField" />
215+
</div>
216+
<button type="submit" class="_filterApply">Okay</button>
217+
</div>
218+
```
219+
220+
V.S the BEM
221+
222+
```scss
223+
.swift-project__filterList {}
224+
225+
.swift-project--activeProject__filterList {}
226+
227+
.swift-project__filterField--conditionValue {}
228+
``````html
229+
<div class="swift-project--activeProject">
230+
<div class="swift-project--activeProject__filterList">
231+
<input type="text" class="swift-project--activeProject__filterField" />
232+
<input type="text" class="swift-project--activeProject__filterField" />
233+
</div>
234+
<button type="submit" class="swift-project--activeProject__filterApply">Okay</button>
235+
</div>```

‎CSS/RWD/media_queries.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ No more browser sniffing or separate m.example.com mobile version of your sites.
1818
@media only screen and (min-width: 640px) {}
1919
```
2020

21-
**Note**: There is no reason to use `device-width` as desktop browser don't typically use the full width of the monitor physical width like smartphone does.
21+
**Note**: There is no reason to use `device-width` as desktop browser don't typically use the full width of the monitor physical width like smartphone does.
22+
23+
## Content-Driven Breakpoints vs Device-Driven Breakpoints
2224

2325
## Resolution
2426

‎CSS/RWD/responsive_images.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Responsive Images
2+
3+
* [Responsive images in practice](http://alistapart.com/article/responsive-images-in-practice)
4+
5+
## Videos
6+
7+
* [Responsive Images are here!](https://vimeo.com/125771900)

‎CSS/SASS.md‎

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66

77
Use Sass only for its variable, mixin and imports. Avoid nesting and extend.
88

9+
* [**Sass Guideline - READ THIS FIRST!**](http://sass-guidelin.es/)
910
* [**A vision for Sass**](http://alistapart.com/article/a-vision-for-our-sass)
10-
* [Sass Guideline](http://sass-guidelin.es/)
1111
* [**An auto-enforceable SCSS styleguide**](http://davidtheclark.com/scss-lint-styleguide/)
1212
* [Scalable CSS reading list](https://github.com/davidtheclark/scalable-css-reading-list)
1313
* [**15 essential SASS mixins**](http://www.developerdrive.com/2014/11/15-essential-sass-mixins/)
@@ -39,6 +39,10 @@ Use Sass only for its variable, mixin and imports. Avoid nesting and extend.
3939
* [Google Material Design colors???](https://github.com/nickpfisterer/quantum-colors)
4040
* [Increasing SASS compiling performance](https://www.devbridge.com/articles/increasing-sass-compiling-performance-or-when-every-second-counts/)
4141

42+
## Color
43+
44+
* [Name that color](http://chir.ag/projects/name-that-color/#CA4ED4)
45+
* [Sass color variables that don't suck](http://davidwalsh.name/sass-color-variables-dont-suck)
4246

4347
## Placeholder
4448

@@ -59,6 +63,21 @@ Use Sass only for its variable, mixin and imports. Avoid nesting and extend.
5963
display: block; margin-left: auto; margin-right: auto;}
6064
```
6165

66+
## Lists
67+
68+
Sass equivalent of arrays.
69+
70+
* [Understanding Sass Lists](http://hugogiraudel.com/2013/07/15/understanding-sass-lists/)
71+
72+
```
73+
$empty: (); // Braces is not what create lists FYI
74+
75+
nth($list, 1); // Indexes start from 1
76+
77+
$variable: "Sass is awesome"; // A list with length=1
78+
$variable: Sass is awesome; // A list with length=3
79+
```
80+
6281
## Map
6382

6483
* [Play with list-maps](http://anotheruiguy.roughdraft.io/10302472-so-you-want-to-play-with-list-maps)
@@ -84,7 +103,7 @@ $message-types: (
84103
height: $height;}
85104
```
86105

87-
Variables for various font-weight
106+
**Variables for various font-weight**
88107

89108
```
90109
$hairline-weight: 100;
@@ -98,7 +117,7 @@ $xbold-weight: 800;
98117
$black-weight: 900;
99118
```
100119

101-
z-index organisation
120+
**z-index organisation**
102121

103122
```
104123
$z-index: (
@@ -119,4 +138,19 @@ $z-index: (
119138

120139
```
121140
percentage(target/context)
141+
```
142+
143+
**Interpolation**
144+
145+
```scss
146+
// Remember to use #{}, and not `calc(100% - $sidebar-width)`
147+
.main {
148+
width: calc(100% - #{$sidebar-width});
149+
}
150+
151+
// But not needed in @media
152+
@media (max-width: $value) {}
153+
154+
// Needed in custom selector
155+
selector-#{$value} {}
122156
```

‎CSS/animation.md‎

Lines changed: 90 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Animation
22

3+
* [**FLIP your Animations**](http://aerotwist.com/blog/flip-your-animations/)
4+
* [**Pixels are expensive**](http://aerotwist.com/blog/pixels-are-expensive/)
5+
* [**Val Head's UI Animation**](http://valhead.com/ui-animation/)
36
* [CSS Animation for Beginners](http://robots.thoughtbot.com/css-animation-for-beginners)
47
* [**CSS animations performance: the untold story**](http://greensock.com/css-performance)
58
* [**State of animation in 2014**](http://www.smashingmagazine.com/2014/11/18/the-state-of-animation-2014/)
@@ -48,6 +51,11 @@
4851
* [Hardware accelerated CSS: The nice vs the naughty](http://calendar.perfplanet.com/2014/hardware-accelerated-css-the-nice-vs-the-naughty/)
4952
* [Spinner animation](http://tobiasahlin.com/spinkit/)
5053
* [Flipside dialog](https://github.com/hakimel/css/tree/master/flipside)
54+
* [**Stripe - Improve the payment experience with animations**](https://medium.com/@michaelvillar/improve-the-payment-experience-with-animations-3d1b0a9b810e)
55+
56+
## Videos
57+
58+
* [**Val Head on All the Right Moves: Putting UIs in Motion**](https://vimeo.com/125545020)
5159

5260
---
5361

@@ -93,19 +101,33 @@
93101

94102
## Animate as you scroll
95103

104+
* [**Some nice demo from Chris Wright**](http://chriswrightdesign.com/experiments/)
96105
* [WOW.js - Reveal CSS animation as you scroll down a page](https://github.com/matthieua/WOW)
97106
* [Slide in as you scroll like Google+ app](http://css-tricks.com/slide-in-as-you-scroll-down-boxes/)
98107
* [Case study](http://www.justinaguilar.com/)
99108
* [Steady.js](http://lafikl.github.io/steady.js/)
100109
* [The guide to scrolling animation](http://ihatetomatoes.net/guide-scrolling-animation-libraries/)
101110
* [Scrolling progress bar](http://www.webdesigncrowd.com/scrolling-progress-bar/)
102111
* [Dear web designer, let's stop breaking the affordance of scrolling](https://medium.com/user-experience-design-1/dear-web-designer-let-s-stop-breaking-the-affordance-of-scrolling-fe8bf258df7b)
112+
* [Scrollbar](http://www.unheap.com/?s=scrollbar)
113+
114+
## will-change
115+
116+
```scss
117+
// Give browser hints
118+
.moving-thing {
119+
will-change: transform;}
120+
121+
// Fallback
122+
.moving-thing-retro {
123+
transform: translateZ(0);}
124+
```
103125

104126
## Examples
105127

106128
To move heading down a bit, and paragraph to move up a bit:
107129

108-
```css
130+
```scss
109131
h2 {
110132
animation: moveDown 0.6s ease-in-out 0.2s backwards;
111133
}
@@ -139,9 +161,9 @@ p {
139161
}
140162
```
141163

142-
Simple transition in/out with router
164+
**Simple transition in/out with router**
143165

144-
```css
166+
```scss
145167
.animate-enter {
146168
opacity: 0.01;
147169
transition: opacity .5s ease-in;
@@ -161,6 +183,71 @@ Simple transition in/out with router
161183
}
162184
```
163185

186+
**Delayed animation**
187+
188+
```scss
189+
// From http://metalab.co/
190+
191+
transform: translateY(10px);
192+
transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s,opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
193+
194+
// 0.25s at the back is delay??
195+
// -webkit-transition-delay: 0.25s, 0.25s;
196+
// transition-property: transform, opacity;
197+
// transition-duration: 0.25s, 0.25s;
198+
// transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1), cubic-bezier(0.645, 0.045, 0.355, 1);
199+
// transition-delay: 0.25s, 0.25s;
200+
201+
// Without delay
202+
transform: translateY(80px);
203+
transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
204+
```
205+
206+
**Drawer animation**
207+
208+
```scss
209+
// From http://frankchimero.com/writing/boring-future-vol1/
210+
// Using calc() for drawer
211+
212+
@media (min-width: 700px)
213+
body.article div.wrap {
214+
position: absolute;
215+
width: calc(100% - 55px);
216+
left: 55px;
217+
top: 0;
218+
z-index: 500;
219+
-ms-transition: transform 0.5s ease-in;
220+
-webkit-transition: -webkit-transform 0.4s ease-in;
221+
transition: transform 0.4s ease-in;
222+
}
223+
224+
@media (min-width: 700px)
225+
body.articleoff div.wrap {
226+
transform: translate(calc(100% - 55px),0);
227+
overflow: hidden;
228+
}
229+
230+
@media (min-width: 700px)
231+
body.article article, body.article div.wrap {
232+
min-height: 100vh;
233+
}
234+
```
235+
236+
```html
237+
<body class="vanilla article">
238+
<body class="vanilla article articleoff">
239+
```
240+
241+
**flex-basis can be animated**
242+
243+
```scss
244+
.color {
245+
transition: flex-basis 500ms ease-in-out;}
246+
247+
.color:hover {
248+
flex-basis: 20em;}
249+
```
250+
164251
## Tools
165252

166253
* [Animatron - an online tool to create HTML5 animations](http://animatron.com/)

‎CSS/layout.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ History of layout in CSS is table, float, inline-block, display:table, flexbox,
1717
* [Responsive grid using calc](http://mintran.com/responsive-grid-using-calc/)
1818
* [Build Scalable, Automated CSS](https://www.youtube.com/watch?v=Tk_0qYEFtAY)
1919
* [**Carousels are easily abused**](https://css-tricks.com/creating-responsive-touch-friendly-carousels-with-flickity/)
20+
* [Content-out layout](http://alistapart.com/article/content-out-layout)
2021

2122
## Example
2223

@@ -26,6 +27,7 @@ History of layout in CSS is table, float, inline-block, display:table, flexbox,
2627
* [Why we ditched the good old select element](https://medium.com/@mibosc/responsive-design-why-and-how-we-ditched-the-good-old-select-element-bc190d62eff5)
2728
* [**Check out Foundation for Apps**](http://responsivedesign.is/articles/screencast-zurb-foundation-for-apps)
2829
* [Google News platform design concept](http://googlenews.gkvasnikov.com/)
30+
* [Scrollbar](http://www.unheap.com/?s=scrollbar)
2931

3032
Key things to Web UI:
3133

@@ -127,8 +129,12 @@ Use of `min-width` and `max-width` common.
127129

128130
Nearly every grid system is based on rows and columns, set to 12 or 16 increments to create any layout. However, the web is changing! It's time for Flexbox to shine.
129131

132+
Grids exist in relation to the content. We never start with a grid. We start with an idea which is then translated into a form, a structure.
133+
130134
> "What drives me insane in modern web design is grids. What's important is a page that moves. Now, as news flows in, editors can very quickly reshuffle what we're doing on the page, because every module is moveable. Instead of rigid grids, the site is built from these building blocks so we can snap them together like Lego. The news becomes intent driven, rather than layout driven." - Josh Topolsky, editor of Bloomberg Digital
131135
136+
* [**2014 Report**](http://2014.report.gridsetapp.com/)
137+
* [Sass Grid Guide](http://sass-guidelin.es/#grid-systems)
132138
* [How the grid will automate web design without killing the designer](http://www.fastcodesign.com/3044670/how-the-grid-will-automate-web-design-without-killing-the-designer)
133139
* [**Foundation - A new grid**](http://zurb.com/article/1333/foundation-a-new-grid)
134140
* [Skeleton](http://getskeleton.com/)

‎CSS/layout/display_table.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Display Table
2+
3+
* [`table-layout`](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)
4+
* [Sticky footer](http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/)
5+
* [Flexbox sticky footer and overflowing content area](http://stackoverflow.com/questions/20493621/the-flexbox-sticky-footer-and-the-overflowing-content-area)
6+
7+
```scss
8+
.layout-table {
9+
display: table;
10+
width: 100%;}
11+
12+
.layout-table > * {
13+
display: table-cell;
14+
vertical-align: bottom;}
15+
```

0 commit comments

Comments
 (0)