Gatsby
ΠΠΠ§ΠΠ«Π
Gatsby
ΠΠΠ§ΠΠ«Π
- Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ
- 10 ΠΠΊΡ 2018
- Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
- 44,424
- ΠΠ°ΠΉΠΊΠΈ
- 203,822
ΠΠ²ΡΠΎΡ: ΠΠΌΠΈΡΡΠΈΠΉ ΠΠ°Π²ΡΠΈΠΊ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΠ°Ρ Π²ΡΡΡΡΠΊΠ° ΠΏΠΎ ΡΠ΅ΡΠΊΠ΅ 2017

ΠΡΠΎΡ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ: ΠΠ»Π°Π΄Π΅Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ Π²ΡΡΡΡΠΊΠΈ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ. ΠΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ Π±Π΅ΡΠΈΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ. Π₯ΠΎΡΠ΅Ρ ΠΎΡΠ²ΠΎΠΈΡΡ ΠΊΡΡΡΠ΅ΠΉΡΠΈΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΈ ΡΡΠ°ΡΡ ΠΌΠ°ΡΡΠ΅ΡΠΎΠΌ.
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡΠ°:
ΠΡΠ½ΠΎΠ²Ρ 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
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΡΠΌΡ Π²ΡΡΡΡΠΊΠΈ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅:
Π‘ΠΊΠ°ΡΠ°ΡΡ:
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΠ°Ρ Π²ΡΡΡΡΠΊΠ° ΠΏΠΎ ΡΠ΅ΡΠΊΠ΅ 2017

ΠΡΠΎΡ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ: ΠΠ»Π°Π΄Π΅Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ Π²ΡΡΡΡΠΊΠΈ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ. ΠΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ Π±Π΅ΡΠΈΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ. Π₯ΠΎΡΠ΅Ρ ΠΎΡΠ²ΠΎΠΈΡΡ ΠΊΡΡΡΠ΅ΠΉΡΠΈΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΈ ΡΡΠ°ΡΡ ΠΌΠ°ΡΡΠ΅ΡΠΎΠΌ.
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡΠ°:
ΠΡΠ½ΠΎΠ²Ρ 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
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΡΠΌΡ Π²ΡΡΡΡΠΊΠΈ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅:
Π‘ΠΊΡΡΡΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π΄Π»Ρ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ!
Π‘ΠΊΠ°ΡΠ°ΡΡ:
ΠΠ»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΊΡΡΡΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΎΠΉΡΠΈ ΠΈΠ»ΠΈ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.