dima716 / paralect-workshop-form

Preview https://meuwka.github.io/paralect-workshop-form/

Paralect workshop

Creating a Sign In page

Design inspired by Kyle Byrd on Dribbble

Getting Started

• npm i gulp -g
• Install dependencies: npm i
• Run npm start to preview and watch for changes
• Run npm run build to build for production (see "build" folder)

Resources

Tools

• PostCSS (RU) https://habrahabr.ru/company/oleg-bunin/blog/310710/
• Just interesting PostCSS usecases https://css-tricks.com/images-in-postcss/
• Stylelint https://github.com/stylelint/stylelint
• CSSO https://github.com/css/csso

CSS

• Flexbox http://html5.by/blog/flexbox/
• Centering in CSS: A Complete Guide https://css-tricks.com/centering-css-complete-guide/
• Form validation https://css-tricks.com/form-validation-ux-html-css/
• Animations and performance https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance

CSS filters

• http://caniuse.com/#feat=css-filters
• Creating Instagram filters with CSS http://www.cssfilters.co/

SVG

• https://github.com/TrySound/postcss-inline-svg
• Another good way using SVG https://css-tricks.com/svg-symbol-good-choice-icons/#article-header-id-1
• Free SVG icons https://www.iconfinder.com/