Gatsby
ΠΠΠ§ΠΠ«Π
Gatsby
ΠΠΠ§ΠΠ«Π
- Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ
- 10 ΠΠΊΡ 2018
- Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
- 44,424
- ΠΠ°ΠΉΠΊΠΈ
- 203,821
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΠ°Ρ Π²ΡΡΡΡΠΊΠ° - smartgrid
ΠΠ²ΡΠΎΡ: ΠΠΌΠΈΡΡΠΈΠΉ ΠΠ°Π²ΡΠΈΠΊ
ΠΠ°ΠΊΠΎΠ²Π° ΡΠ΅Π½Π½ΠΎΡΡΡ ΡΠΌΠ΅Π½ΠΈΡ Π²Π΅ΡΡΡΠ°ΡΡ Π±ΡΡΡΡΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π±ΡΠ»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² Π²ΠΈΠ΄Π΅ΠΎ Π½Π°Π²Π΅ΡΡ Ρ?
β ΠΠ΅ Π·Π½Π°Ρ, Π½Π°Π²Π΅ΡΠ½ΠΎ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ°Ρ.
ΠΠ΅Π΄Ρ ΡΡΠΈ ΠΏΡΠΈΡΠΌΡ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠ²ΠΎΠΈΡΡ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΈ ΠΎΠ½ΠΈ ΡΡΠΊΠΎΡΡΡ Π²ΡΡΡΡΠΊΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Π² 2-3 ΡΠ°Π·Π°.
ΠΡΠ½ΠΎΠ²Ρ Flexobox
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΎΡΠΈ
ΠΡΠ³ΠΊΠΈΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ
ΠΠ΄Π°ΠΏΡΠΈΠ²ΠΊΠ° Π±Π΅Π· media-Π·Π°ΠΏΡΠΎΡΠΎΠ²
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π Π°Π·Π±ΠΎΡ Π΄ΠΎΠΌΠ°ΡΠ½ΠΈΡ ΡΠ°Π±ΠΎΡ
ΠΡΠΎΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΡΠ΅ΡΡΡΠ²Π° Flexbox
Π’ΠΎΠ½ΠΊΠΎΡΡΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΉ
ΠΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ
Π‘Π»Π°Π±ΠΎΡΡΠΈ flexbox Π±Π΅Π· media
Node.js ΠΈ NPM - ΠΎΡΠ½ΠΎΠ²Ρ ΠΌΠ°Π³ΠΈΠΈ
Gulp - ΡΠ±ΠΎΡΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ°
LESS - Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ CSS
Group CSS Media Queries
Autoprefixer - ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ
ΠΡΠ½ΠΎΠ²Ρ CSS-ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠΎΠ²
ΠΠ΅ΡΠ°ΡΡ ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠΈ
ΠΠ°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π½Π° LESS
ΠΠ°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π½Π° SASS (SCSS)
ΠΡΠ½ΠΎΠ²Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ
ΠΡΡΡΡΠΏΡ Π² px ΠΈΠ»ΠΈ Π² %
Margin ΠΈ padding Π²Π°ΡΠΈΠ°Π½ΡΡ
npm i smartgrid - ΠΏΠΎΠ΅Ρ Π°Π»ΠΈ!
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ΅ΡΠΊΠΈ
ΠΡΡΡΡΠΊΠ° ΠΌΠ°ΠΊΠ΅ΡΠ°
ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ΄Π°
ΠΠ΅ΡΠ°ΡΡ ΠΈΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² vs BEM
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΡΠΌΡ Π²ΡΡΡΡΠΊΠΈ
ΠΠ°ΡΠ»Π°ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅:
Π‘ΠΊΠ°ΡΠ°ΡΡ:
ΠΠ²ΡΠΎΡ: ΠΠΌΠΈΡΡΠΈΠΉ ΠΠ°Π²ΡΠΈΠΊ
ΠΠ°ΠΊΠΎΠ²Π° ΡΠ΅Π½Π½ΠΎΡΡΡ ΡΠΌΠ΅Π½ΠΈΡ Π²Π΅ΡΡΡΠ°ΡΡ Π±ΡΡΡΡΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π±ΡΠ»ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² Π²ΠΈΠ΄Π΅ΠΎ Π½Π°Π²Π΅ΡΡ Ρ?
β ΠΠ΅ Π·Π½Π°Ρ, Π½Π°Π²Π΅ΡΠ½ΠΎ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ°Ρ.
ΠΠ΅Π΄Ρ ΡΡΠΈ ΠΏΡΠΈΡΠΌΡ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠ²ΠΎΠΈΡΡ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΈ ΠΎΠ½ΠΈ ΡΡΠΊΠΎΡΡΡ Π²ΡΡΡΡΠΊΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Π² 2-3 ΡΠ°Π·Π°.
- 6 Π²Π΅Π±ΠΈΠ½Π°ΡΠΎΠ² ΠΏΠΎ Π²ΡΠΎΡΠ½ΠΈΠΊΠ°ΠΌ ΠΈ ΠΏΡΡΠ½ΠΈΡΠ°ΠΌ Π² 20:00 ΠΏΠΎ ΠΠΎΡΠΊΠ²Π΅
- 4 Π²ΠΈΠ΄Π° ΡΠ΅ΡΠΊΠΈ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΊΡΡΡΠ΅ Π²ΡΠ΅Ρ ΠΈΠΌΠ΅ΡΡΠΈΡ ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΎΠ²
- 7 ΡΠΊΠΈΠ»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΏΠΎΠ»Π½ΡΡ ΡΠ²ΠΎΡ ΡΠ΅Π·ΡΠΌΠ΅
- ΠΠ‘Π ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ, ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ ΠΊΠΎΠ΄Ρ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π·Π°ΠΏΠΈΡΠΈ Π·Π°Π½ΡΡΠΈΠΉ
- ΠΠ»Π°Π΄Π΅Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ Π²ΡΡΡΡΠΊΠΈ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ
- ΠΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ Π±Π΅ΡΠΈΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ
- Π₯ΠΎΡΠ΅Ρ ΠΎΡΠ²ΠΎΠΈΡΡ ΠΊΡΡΡΠ΅ΠΉΡΠΈΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΈ ΡΡΠ°ΡΡ ΠΌΠ°ΡΡΠ΅ΡΠΎΠΌ
ΠΡΠ½ΠΎΠ²Ρ Flexobox
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΎΡΠΈ
ΠΡΠ³ΠΊΠΈΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ
ΠΠ΄Π°ΠΏΡΠΈΠ²ΠΊΠ° Π±Π΅Π· media-Π·Π°ΠΏΡΠΎΡΠΎΠ²
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π Π°Π·Π±ΠΎΡ Π΄ΠΎΠΌΠ°ΡΠ½ΠΈΡ ΡΠ°Π±ΠΎΡ
ΠΡΠΎΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΡΠ΅ΡΡΡΠ²Π° Flexbox
Π’ΠΎΠ½ΠΊΠΎΡΡΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΉ
ΠΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ
Π‘Π»Π°Π±ΠΎΡΡΠΈ flexbox Π±Π΅Π· media
Node.js ΠΈ NPM - ΠΎΡΠ½ΠΎΠ²Ρ ΠΌΠ°Π³ΠΈΠΈ
Gulp - ΡΠ±ΠΎΡΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ°
LESS - Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ CSS
Group CSS Media Queries
Autoprefixer - ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ
ΠΡΠ½ΠΎΠ²Ρ CSS-ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠΎΠ²
ΠΠ΅ΡΠ°ΡΡ ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠΈ
ΠΠ°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π½Π° LESS
ΠΠ°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π½Π° SASS (SCSS)
ΠΡΠ½ΠΎΠ²Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ
ΠΡΡΡΡΠΏΡ Π² px ΠΈΠ»ΠΈ Π² %
Margin ΠΈ padding Π²Π°ΡΠΈΠ°Π½ΡΡ
npm i smartgrid - ΠΏΠΎΠ΅Ρ Π°Π»ΠΈ!
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ΅ΡΠΊΠΈ
ΠΡΡΡΡΠΊΠ° ΠΌΠ°ΠΊΠ΅ΡΠ°
ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ΄Π°
ΠΠ΅ΡΠ°ΡΡ ΠΈΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² vs BEM
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΡΠΌΡ Π²ΡΡΡΡΠΊΠΈ
ΠΠ°ΡΠ»Π°ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅:
Π‘ΠΊΡΡΡΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π΄Π»Ρ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ!
Π‘ΠΊΠ°ΡΠ°ΡΡ:
ΠΠ»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΊΡΡΡΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΎΠΉΡΠΈ ΠΈΠ»ΠΈ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.