javascripters event on sep 10, 2016 · 10:30 am: sass

JS

Java

Scri

pter

swww.javascripters.org

Sass for Beginners- Karan Sharma

JS

Java

Scri

pter


JavaScriptersCommunity to Connect, Share & Explore

http://www.javascripters.org

Email: [email protected]

http://www.javascripters.org/

mailto:[email protected]?subject=

JS

Java

Scri

pter


3

About JavaScriptersJavaScripters is an initiative taken for front-end engineers community to share and gain JavaScript basic and advance knowledge along with moto to connect all javascripters together.

We conduct technical discussion forums, sessions, workshops, trainings and knowledge sharing meet-ups around the city, for all front-end / UI engineers on core & advance(object oriented) level javascript concepts, along with all latest javascript frameworks like AngularJS, NodeJs, emberJs, TypeScript, ReactJs technologies by experts.

• Since : April 2015

• Members : Around 2500+

• Speakers & Mentors : 17

• Events/ Meetup Conducted: 5

• Feature Planned Events : 10 events confirmed till December 2016

Our initiatives:

WhatsApp Group (2)Meetup Groups JavaScriptes PuneJs HTML5-Web-Mobile-Development-Meetup Pune-UX-UI-Engineers WebF

JS

Java

Scri

pter


List of upcoming events

4

1.JS Performance tips and tricks

2.JavaScript Design Patterns

3.BootStrap , CSS and Responsive Design

4.Introduction of Design thinking for front-end Engineers

5.React JS with Material design

6.Introduction to Angular 2.x

7.Practice with TypeSpcript

8.Introduction to ES6

9.Automated javascript workflow with Gulp

10.NodeJs practice session

11. Total (3) online webinar under planning

JS

Java

Scri

pter


Our Sponsor

JS

Java

Scri

pter


About Speaker

JS

Java

Scri

pter


• CSS can’t be updated that fast.

• Still need more features.

• Pre-processors to the rescue !

What is a preprocessor ?

JS

Java

Scri

pter


JS

Java

Scri

pter


SASS v/s SCSS

JS

Java

Scri

pter


$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

font: 100% $font-stack; color: $primary-color;

}

Variables

JS

Java

Scri

pter


JS

Java

Scri

pter


nav {

ul {

margin: 0; padding: 0; list-style: none;

}

li {

display: inline-block;

}

a {

display: block; padding: 6px 12px; text-decoration: none;

}

}

Nesting

JS

Java

Scri

pter


•SMACSS (pronounced “smacks”) is more style guide than rigid framework.

•There is no library within here for you to download or install.

•SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process.

SMACSS

JS

Java

Scri

pter


JS

Java

Scri

pter


• Modular Code

• Start With “_”

• Used with “@import”

• CSS @import and SASS @import is different

Partials / Imports

JS

Java

Scri

pter


// _reset.scss

html, body, ul, ol {

margin: 0; padding: 0;

}

// base.scss

@import 'reset';

body {

font: 100% Helvetica, sans-serif; background-color: #efefef;

}

JS

Java

Scri

pter


@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

.box {

@include border-radius(10px);

}

Mixins !

JS

Java

Scri

pter


.message {

border: 1px solid #ccc; padding: 10px; color: #333;

}

.success {

@extend .message; border-color: green;

}

.error {

@extend .message; border-color: red;

}

.warning {

@extend .message; border-color: yellow;

}

Extend/Inheritance

JS

Java

Scri

pter


.container {

width: 100%;

}

article[role="main"] {

float: left;

width: 600px / 960px * 100%;

}

aside[role="complementary"] {

float: right; width: 300px / 960px * 100%;

}

Operators

JS

Java

Scri

pter


JS

Java

Scri

pter


Registers for upcoming events

21

1.JS Performance tips and tricks

2.JavaScript Design Patterns

3.BootStrap , CSS and Responsive Design

4.Introduction of Design thinking for front-end Engineers

5.React JS with Material design

6.Introduction to Angular 2.x

7.Practice with TypeScript

8.Introduction to ES6

9.Automated javascript workflow with Gulp

10.NodeJs practice session

11. Total (3) online webinar under planning

javascripters event on sep 10, 2016 · 10:30 am: sass

Software