Britt BodinNatalie Thomson. AGENDA I. The Problems with CSS II. Introducing Preprocessors III. How They Work IV. It’s Magic. V. Advantages & Disadvantages.

Slides:

Advertisements

Similar presentations

The Future of CSS and JavaScript Today Daniel Laughland Forward Thinking.

Advertisements

FIRST LOOK AT “ORCAS” Scott Guthrie General Manager.NET Developer Platform.

Chapter 1: Preliminaries

North Shore.NET User Group Our Sponsors. North Shore.NET User Group Check out our new web site Next Meeting

Using LESS for more maintainable, semantic, and lean web sites Keith Zantow.

Finding and Debugging Errors

Programming Languages Structure

Visual Studio 2008 and ASP.NET 3.5 Mike Ormond Developer & Platform Group Microsoft Ltd

What’s new in ASP.NET 3.5? Mike Ormond Developer & Platform Group Microsoft Ltd

Lecture 2 Concepts of Programming Languages

Responsive Web Design Nuts & Bolts David Weedon - UI/UX Designer, Covenant Technology Partners.

Unit 2, Lesson 5 Website Development Tools AOIT Web Design Copyright © 2008–2012 National Academy Foundation. All rights reserved.

Powerful, modern desktops enable next generation applications Hardware acceleration brings real-time lighting, texturing and rendering Visual.

WHAT IS PHP PHP is an HTML-embedded scripting language primarily used for dynamic Web applications.

Web Design Basic Concepts.

Microsoft Visual Basic 2012 CHAPTER ONE Introduction to Visual Basic 2012 Programming.

Ruby on Rails. What is Ruby on Rails? Ruby on Rails is an open source full-stack web framework. It is an alternative to PHP/MySQL. It can render templates,

Agenda Web Development Chapter 7 Review Class Discussion Issues.

Architecture Of ASP.NET. What is ASP?  Server-side scripting technology.  Files containing HTML and scripting code.  Access via HTTP requests.  Scripting.

Adapting a Site Template Using Drupal Themes and SASS/LESS.

Philly.NET Hands-on Labs JAVASCRIPT SERIES. July 9: JavaScript Syntax Visual Studio ◦Projects ◦Editors ◦Debugging ◦Script blocks ◦Minification and bundling.

CS 355 – Programming Languages

Introduction to ASP.NET. Prehistory of ASP.NET Original Internet – text based WWW – static graphical content  HTML (client-side) Need for interactive.

By: Gerald Fry introducingCompass.

Sustainable SharePoint 2010 Customizations By Bill Keys.

Google Web Toolkit An Overview By Shauvik Roy Choudhary.

1 4.8The do/while Repetition Structure The do/while repetition structure –Similar to the while structure –Condition for repetition tested after the body.

CSS preprocessors What are CSS preprocessors, why do we use a CSS preprocessors, how to use a CSS preprocessor and which CSS preprocessors are being used.

Tutorial 10 Programming with JavaScript

Copyright © 2007 Addison-Wesley. All rights reserved.1-1 Reasons for Studying Concepts of Programming Languages Increased ability to express ideas Improved.

Introduce Reponsive Web Author :Vien Pham (Johnny Chicken)

ASP.NET &.NET Environment. Overview Part of Microsoft’s.NET environment Used for Development of  Websites  Internet applications  Web Services & XML.

Where does PHP code get executed?. Where does JavaScript get executed?

ISBN Chapter 1 Preliminaries. Copyright © 2009 Addison-Wesley. All rights reserved.1-2 Chapter 1 Topics Reasons for Studying Concepts of.

CSS BEST PRACTICES.

XML Grammar and Parser for WSOL Kruti Patel, Vladimir Tosic, Bernard Pagurek Network Management & Artificial Intelligence Lab Department of Systems & Computer.

CSS PREPROCESSORS Michael and Miles. Overview What are CSS Preprocessors Why use them? What is LESS and how to use LESS example What is SASS and how to.

Crazy New CSS Tools MIS 424 MIS 424 Professor Sandvig Professor Sandvig.

SASS & LESS Syntactically Awesome StyleSheets Dynamic StyleSheet Language Svetlin Nakov Technical Trainer Software University

1 CSS-PREPROCESSORS as a way to speed up the process of interfaces developing and achieve Customer goals DMITRY SHURSHILIN AUGUST 3, 2015.

A-1 © 2000 UW CSE University of Washington Computer Programming I Lecture 21: Course Wrap-up and Look Ahead.

THE IMPORTANCE OF DISCRETE MATHEMATICS IN COMPUTER TECHNOLOGY.

Designing Enterprise Corporate Web Sites using SharePoint 2010 Paul Stubbs Technical Evangelist Microsoft.

Chapter – 8 Software Tools.

JavaScript Introduction and Background. 2 Web languages Three formal languages HTML JavaScript CSS Three different tasks Document description Client-side.

Fundamentals of Web DevelopmentRandy Connolly and Ricardo HoarFundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy.

Martin Kruliš by Martin Kruliš (v1.0)1.

Programming Languages Concepts Chapter 1: Programming Languages Concepts Lecture # 4.

Programming 2 Intro to Java Machine code Assembly languages Fortran Basic Pascal Scheme CC++ Java LISP Smalltalk Smalltalk-80.

Introduction to Computer Programming Concepts M. Uyguroğlu R. Uyguroğlu.

//liveVirtualacademy2011/ What’s New for ASP.NET 4.5 and Web Development in Visual Studio 11 Developer Preview Γιώργος Καπνιάς MVP, MCT, MCDP, MCDBA, MCTS,

A S P. Outline  The introduction of ASP  Why we choose ASP  How ASP works  Basic syntax rule of ASP  ASP’S object model  Limitations of ASP  Summary.

Introduction ITEC 420.

Simple theme creation using Sass

Supporting quality devices

Why study programming languages?

Advanced Web Page Styling

Modern web tooling in Visual Studio 2015

Michael Robertson Yuta Takayama Google Closure Tools.

Chapter 1 Preliminaries.

Haritha Dasari Josue Balandrano Coronel -

CSS PreProcessors MIS 424.

Chapter 1 Preliminary. Chapter 1 Preliminary 1.1 Reasons for Studying Concepts of Programming Languages Increased capacity to express ideas Improved.

Lecture 2 Concepts of Programming Languages

and Program Development

ხელმძღვანელი: დიმიტრი ქარაული

Session IV Chapter 20 - How to use SASS and Less

Lecture 2 Concepts of Programming Languages

Web Application Development Using PHP

Presentation transcript:

Britt BodinNatalie Thomson

AGENDA I. The Problems with CSS II. Introducing Preprocessors III. How They Work IV. It’s Magic. V. Advantages & Disadvantages VI. SASS vs. LESS VII. Frameworks VIII. Subscription Cost, Service Fees

THE PROBLEMS WITH CSS ♡ Repetitive & redundant ♡ Time-consuming ♡Cascading Changes= tons of busywork ♡ Organization: ♡Vertical placement limitations ♡Limited organizational tools

THE PROBLEMS WITH CSS

INTRODUCING PREPROCESSORS ♡ Nested syntax ♡ Ability to define variables ♡ Ability to define mixins Combining the simplicity of CSS with the power of computation ♡ Mathematical functions ♡ Operational functions ♡ Joining of multiple files

HOW THEY WORK Creation Compilation Integration MPD: Magic Pixie Dust

ADVANTAGES ♡ Better organization ♡ Better syntax ♡ Cleaner code ♡ Less time-consuming ♡ Easier maintenance ♡ Reduces repetition ♡ Responsive* ♡Fewer HTTP requests ♡Designer’s Best Friend ♡Color Scheming ♡Semantic Tools ♡Mathematical Precision ♡Variable-level control enable rapid, significant changes

DISADVANTAGES ♡Generated CSS ♡Possibly bloated, reader-unfriendly source code… if the reader can’t/won’t use a preprocessor. ♡Debugging is harder ♡Source Maps ♡Barriers to entry ♡Programming code ♡Anti-conformism ♡Terrorists? Can be slow to compile, sometimes. Maybe.

PREPARE TO BE AMAZED Do try this at home

SASS vs LESS BOTH SASS LESS ♡Based in JavaScript ♡JavaScript Evaluation ♡Client-side operation ♡Less efficient logic ♡Fewer frameworks ♡Guarded mixins ♡Loops only allowed for numeric values ♡Easier to install? ♡Extensions for faster & easier web development ♡Nesting ♡Logic ♡ Mixins & Selector Inheritance ♡ Nesting ♡Error notifications ♡Documentation ♡Based in Ruby ♡Pure CSS. No compatibility issues ♡Compass ♡Better Nesting ♡Strange scope issues ♡Very PHP-ish

FRAMEWORKS ♡Compass ♡Bourbon ♡Foundation ♡Bootstrap* ♡Bootstrap 4 ♡Bootstrap ♡Ink ♡UIKit ♡Semantic UI ♡Responsive Boilerplate

CAN I DO THIS AT HOME? ♡ Visual Studio ♡Web Essentials ( )Web Essentials ♡Compiler (2015)Compiler ♡SASSSASS ♡LESSLESS ♡StylusStylus

SOURCES ♡ ♡ ♡ absolute-beginners/ absolute-beginners/ ♡ ♡ ♡ css-preprocessing-explainedhttp://blog.blakesimpson.co.uk/read/37-less-sass-the-advantages-of- css-preprocessing-explained ♡ css/ css/ ♡ css-framework-disadvantages/ css-framework-disadvantages/ ♡ development/articles/25619.aspxhttp:// development/articles/25619.aspx ♡ ♡ ♡ ♡ ♡ ♡ ♡ ♡ you-choose/ you-choose/ ♡ be-using-css-preprocessorhttps:// be-using-css-preprocessor ♡ ♡