extends silent classes in s ass 3 2
play

EXTENDS & SILENT CLASSES IN S ASS 3.2 its like ninjas in your - PowerPoint PPT Presentation

Nov 13, 2023 •21 likes •961 views

EXTENDS & SILENT CLASSES IN S ASS 3.2 its like ninjas in your code EXTENDS & SILENT CLASSES IN S ASS 3.2 its like ninjas in your code OOCSS FRAMEWORKS create objects to streamline application? OOCSS FRAMEWORKS attempts to

  1. EXTENDS & SILENT CLASSES IN S ASS 3.2 it’s like ninjas in your code

  2. EXTENDS & SILENT CLASSES IN S ASS 3.2 it’s like ninjas in your code

  3. OOCSS FRAMEWORKS create ‘objects’ to streamline application?

  4. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue..

  5. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by Twitter’s default are added to the site’s CSS. bootstrap default includes 4914 From grid systems to UI elements, lines of CSS. CSS bloat is a real issue..

  6. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by Twitter’s default are added to the site’s CSS. bootstrap default includes 4914 From grid systems to UI elements, lines of CSS. CSS bloat is a real issue..

  7. DRY CODING find the pattern and D on’t R epeat Y ourself 9 out of 10 developers agree that using a DRY method of coding will save your bacon in the long run.

  8. DRY CODING find the pattern and D on’t R epeat Y ourself 9 out of 10 developers agree that using a DRY method of coding will save your bacon in the long run.

  9. OOCSS TEACHES US ... create ‘objects’ • Identify reusable objects • Be semantic w/HTML • Minimize selectors • Extend your classes • ‘Style’ separate from content • ‘Content’ separate from container

  10. OOCSS TEACHES US ... create ‘objects’ • Identify reusable objects what does this • Be semantic w/HTML mean? • Minimize selectors • Extend your classes • ‘Style’ separate from content • ‘Content’ separate from container

  11. TWITTER’S BUTTONS let’s look at some code

  12. OOCSS TEACHES US ... create ‘objects’ <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <!-- links --> </ul> </li> </ul>

  13. OOCSS TEACHES US ... create ‘objects’ <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> Markup with <ul class="dropdown-menu"> presentational <!-- links --> classes </ul> </li> </ul>

  14. OOCSS TEACHES US ... create ‘objects’ here <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> Markup with <ul class="dropdown-menu"> presentational <!-- links --> classes </ul> </li> </ul>

  15. OOCSS TEACHES US ... create ‘objects’ here here <ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> Markup with <ul class="dropdown-menu"> presentational <!-- links --> classes </ul> </li> </ul>

  16. OOCSS TEACHES US ... create ‘objects’ here here <ul class="nav nav-pills"> here <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> Markup with <ul class="dropdown-menu"> presentational <!-- links --> classes </ul> </li> </ul>

  17. OOCSS TEACHES US ... create ‘objects’ here here <ul class="nav nav-pills"> here here <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> Markup with <ul class="dropdown-menu"> presentational <!-- links --> classes </ul> </li> </ul>

  18. OOCSS TEACHES US ... create ‘objects’ here here <ul class="nav nav-pills"> here here <li class="dropdown"> here <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> </a> Markup with <ul class="dropdown-menu"> presentational <!-- links --> classes </ul> </li> </ul>

  19. OOCSS TEACHES US ... create ‘objects’ here here <ul class="nav nav-pills"> here here <li class="dropdown"> here <a class="dropdown-toggle" data-toggle="dropdown" href="#"> here Dropdown <b class="caret"></b> </a> Markup with <ul class="dropdown-menu"> presentational <!-- links --> classes </ul> </li> </ul>

  20. OOCSS TEACHES US ... create ‘objects’ here here <ul class="nav nav-pills"> here here <li class="dropdown"> here <a class="dropdown-toggle" data-toggle="dropdown" href="#"> here Dropdown <b class="caret"></b> & here </a> Markup with <ul class="dropdown-menu"> presentational <!-- links --> classes </ul> </li> </ul>

  21. OOCSS TEACHES US ... create ‘objects’ How much .nav-tabs:before, CSS can it .nav-pills:before, really be? .nav-tabs:after, .nav-pills:after { display: table; content: ""; } It’s just .nav-tabs:after, for .nav-tabs .nav-pills:after { and .nav-pills clear: both; } .nav-tabs > li,

  22. cursor: pointer; } .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover { color: #ffffff; Dude, background-color: #999999; that’s a border-color: #999999; } lot of code! .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); }

  23. cursor: pointer; } .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover { color: #ffffff; Dude, background-color: #999999; that’s a border-color: #999999; } lot of code! .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; That’s line opacity: 1; 169 right filter: alpha(opacity=100); there. }

  24. cursor: pointer; } This makes baby kitties cry .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover { color: #ffffff; Dude, background-color: #999999; that’s a border-color: #999999; } lot of code! .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; That’s line opacity: 1; 169 right filter: alpha(opacity=100); there. }

  25. cursor: pointer; } This makes baby kitties cry Face it, CSS is .nav-tabs .open .dropdown-toggle, NOT DRY! .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover { color: #ffffff; Dude, background-color: #999999; that’s a border-color: #999999; } lot of code! .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; That’s line opacity: 1; 169 right filter: alpha(opacity=100); there. }

  26. cursor: pointer; } This makes baby kitties cry Face it, CSS is .nav-tabs .open .dropdown-toggle, NOT DRY! .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover { color: #ffffff; Dude, background-color: #999999; that’s a border-color: #999999; } lot of code! .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; 10 border-bottom-color: #ffffff; That’s line references of opacity: 1; 169 right #ffffff in this filter: alpha(opacity=100); there. example alone }

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend

Silent Shout 2.009 SILVER Silent Shout The Market 65 million users $9.7 billion market 2.009

Silent Shout 2.009 SILVER Silent Shout The Market 65 million users $9.7 billion market 2.009

Silent Shout Silent Shout 2.009 SILVER Silent Shout The Market 65 million users $9.7 billion market 2.009 SILVER Silent Shout Benchmarking SIREN POM by POMCO Silent Shout Product Type Description Alarm ring Keychain attachment

116 views • 10 slides
Set 7 January 2019 OSU CSE 1 Set The Set component family allows you to manipulate finite

Set 7 January 2019 OSU CSE 1 Set The Set component family allows you to manipulate finite

Set 7 January 2019 OSU CSE 1 Set The Set component family allows you to manipulate finite sets of elements of any (arbitrary) type 7 January 2019 OSU CSE 2 Interfaces and Classes Standard extends SetKernel extends Set implements

1.02k views • 68 slides
Inheritance and Polymorphism Chapter 11 1 For Next Time Read Chapter 11 2 New classes from

Inheritance and Polymorphism Chapter 11 1 For Next Time Read Chapter 11 2 New classes from

Inheritance and Polymorphism Chapter 11 1 For Next Time Read Chapter 11 2 New classes from existing classes public class NewClass extends ExistingClass { /* . . . */ } NewClass is the subclass ; ExistingClass is the superclass

328 views • 10 slides
THE SILENT EPIDEMIC OF TBIS: LISTENING FOR DEPRESSION AND SUICIDE THE SILENT EPIDEMIC OF

THE SILENT EPIDEMIC OF TBIS: LISTENING FOR DEPRESSION AND SUICIDE THE SILENT EPIDEMIC OF

SHAUNA HAHN, PMHNP, CBIS THE SILENT EPIDEMIC OF TBIS: LISTENING FOR DEPRESSION AND SUICIDE THE SILENT EPIDEMIC OF TBIS: LISTENING FOR DEPRESSION &amp; SUICIDE OVERVIEW: SCOPE OF THE PROBLEM IN AMERICA THE SILENT EPIDEMIC OF TBIS: LISTENING

969 views • 64 slides
Test Anxiety: The Silent Intruder, William B. Daigle, Ph.D. Test Anxiety The Silent Intruder

Test Anxiety: The Silent Intruder, William B. Daigle, Ph.D. Test Anxiety The Silent Intruder

Test Anxiety: The Silent Intruder, William B. Daigle, Ph.D. Test Anxiety The Silent Intruder Resources; St. Gerard Majella Catholic School, March 6, 2010 William B. Daigle, Ph.D. 8748 Quarters Lake Road Baton Rouge, LA 70809 (225)

91 views • 5 slides
3 4 5 6 K Classes K Classes K Classes K Classes Student-Teacher Ratio 24 :1 72 96 120

3 4 5 6 K Classes K Classes K Classes K Classes Student-Teacher Ratio 24 :1 72 96 120

&quot;What If&quot; Scenarios -- K classes limited to specific # 3 4 5 6 K Classes K Classes K Classes K Classes Student-Teacher Ratio 24 :1 72 96 120 144 # of grades in K-5 6 Eventual K-5 Total 432 576 720 864 Total TK-5

621 views • 5 slides
4 CORE CLASSES HEALTH / CCR + 2 CLASSES OF YOUR CHOICE! ENCORE CLASSES PLEASE SELECT YOUR TOP

4 CORE CLASSES HEALTH / CCR + 2 CLASSES OF YOUR CHOICE! ENCORE CLASSES PLEASE SELECT YOUR TOP

ENGLISH/LANGUAGE ARTS MATH SCIENCE SOCIAL STUDIES 4 CORE CLASSES HEALTH / CCR + 2 CLASSES OF YOUR CHOICE! ENCORE CLASSES PLEASE SELECT YOUR TOP 4 OPTIONS COURSES WILL BE SCHEDULED AND ASSIGNED BASED ON AVAILABILITY. ENCORE CLASSES NEW

300 views • 13 slides
Runnable JAR archives % java -cp eharold.jar MainClassName Inner Classes Inner Classes

Runnable JAR archives % java -cp eharold.jar MainClassName Inner Classes Inner Classes

Runnable JAR archives % java -cp eharold.jar MainClassName Inner Classes Inner Classes Inner classes may also contain methods. They may not contain static members. Inner classes in a class scope can be public, private, protected,

1.2k views • 99 slides
Writing Classes We've been using predefined classes. Now we will learn to write our own

Writing Classes We've been using predefined classes. Now we will learn to write our own

Writing Classes We've been using predefined classes. Now we will learn to write our own classes to define Writing Classes in Java objects Chapter 4 focuses on: class definitions Selim Aksoy encapsulation and Java modifiers

351 views • 10 slides
Some Standard Classes Chapter 13 1 For Next Time Read Chapter 13 2 Packages Classes

Some Standard Classes Chapter 13 1 For Next Time Read Chapter 13 2 Packages Classes

Some Standard Classes Chapter 13 1 For Next Time Read Chapter 13 2 Packages Classes can be organized into packages The core classes reside in the java.lang package No import is needed Classes include System , String , Math ,

394 views • 12 slides
Topic 6: Inner Classes Inner Classes What's an inner class? A class defined inside another class

Topic 6: Inner Classes Inner Classes What's an inner class? A class defined inside another class

Topic 6: Inner Classes Inner Classes What's an inner class? A class defined inside another class First understanding of Java: Three kinds: all classes are &quot;top level&quot;, usually one per file inner classes static nested classes

455 views • 4 slides
SILENT RAILROAD CROSSING PRESENTATION Department of Public Works TEXARKANA AR CROSSINGS 8

SILENT RAILROAD CROSSING PRESENTATION Department of Public Works TEXARKANA AR CROSSINGS 8

SILENT RAILROAD CROSSING PRESENTATION Department of Public Works TEXARKANA AR CROSSINGS 8 MAJOR CROSSINGS 4 TYPES OF SILENT CROSSINGS BARRIER FOUR QUADRANT AUTOMATED HORN SYSTEM FULL CLOSURE 14 th &amp; BROAD 19 TH

378 views • 24 slides
1 2 3 4 5 6 Feeling of victimisation also extends to the perceptions that they dont

1 2 3 4 5 6 Feeling of victimisation also extends to the perceptions that they dont

1 2 3 4 5 6 Feeling of victimisation also extends to the perceptions that they dont want young people on the road They being government and society in general common across gender / SEGs and age groups although

944 views • 77 slides
CTE It is something I have wanted to do my whole life # of Classes 8 7 6 5 4 3 2 1

CTE It is something I have wanted to do my whole life # of Classes 8 7 6 5 4 3 2 1

CTE It is something I have wanted to do my whole life # of Classes 8 7 6 5 4 3 2 1 0 1 2 3 4 5 6 7 8 9 10 # of Classes AP/IB beneficial to me to take classes where I can learn essential skills # of Classes

542 views • 5 slides
Topic 24 More on Classes Classes Part II Classes are programmer defined data types In

Topic 24 More on Classes Classes Part II Classes are programmer defined data types In

Topic 24 More on Classes Classes Part II Classes are programmer defined data types In Java the primitives (int, char, double, &quot;Object-oriented programming as it emerged boolean) are the core data types already in Simula 67 allows

215 views • 6 slides
Inheritance in Python Thomas Schwarz, SJ Inheritance Sometimes, classes have other classes as

Inheritance in Python Thomas Schwarz, SJ Inheritance Sometimes, classes have other classes as

Inheritance in Python Thomas Schwarz, SJ Inheritance Sometimes, classes have other classes as components: Clients have addresses Class Client has a field of type Class Address Sometimes, classes expand other classes Example:

622 views • 29 slides
Economics in the Time of Trump. 2017 Climbing Wall Summit Loveland, CO Matthew C. Roberts, PhD

Economics in the Time of Trump. 2017 Climbing Wall Summit Loveland, CO Matthew C. Roberts, PhD

Economics in the Time of Trump. 2017 Climbing Wall Summit Loveland, CO Matthew C. Roberts, PhD | www.kernmantlegroup.com 19 May 2017 Who am I? Owner, Kernmantle Group Risk management consulting for Agriculture Associate Professor

632 views • 42 slides
Big Data is now a proper noun Randy Olinger Optum 2016 MSST 5/4/2016 Introduction - Optum

Big Data is now a proper noun Randy Olinger Optum 2016 MSST 5/4/2016 Introduction - Optum

Big Data is now a proper noun Randy Olinger Optum 2016 MSST 5/4/2016 Introduction - Optum Largest (by far) health services company in US, probably the world. Parent company 2015 revenue $157B , Optum $67B. Exploiting the

220 views • 10 slides
Painless machine learning in production H. Chase Stevens Principal Data Science Engineer,

Painless machine learning in production H. Chase Stevens Principal Data Science Engineer,

Painless machine learning in production H. Chase Stevens Principal Data Science Engineer, Boston, MA chase@chasestevens.com @hchasestevens Europython 2020 Painless machine learning in production Painless machine learning in

694 views • 66 slides
A Dependency Parser for Tweets Lingpeng Kong, Nathan Schneider, Swabha Swayamdipta, Archna

A Dependency Parser for Tweets Lingpeng Kong, Nathan Schneider, Swabha Swayamdipta, Archna

A Dependency Parser for Tweets Lingpeng Kong, Nathan Schneider, Swabha Swayamdipta, Archna Bhatia, Chris Dyer, and Noah A. Smith NLP for Social Media Boom! Ya ur website suxx bro @SarahKSilverman michelle obama great. job. and. whit all

448 views • 43 slides
Human-Computer interaction Termin 5: User interface styles and technology MMI/SS06 1 MMI / SS06

Human-Computer interaction Termin 5: User interface styles and technology MMI/SS06 1 MMI / SS06

Human-Computer interaction Termin 5: User interface styles and technology MMI/SS06 1 MMI / SS06 2 Command line interface (CLI) way of expressing instructions to the computer directly (e.g. 438 commands in BSD Unix) commands = chars,

795 views • 61 slides
THESE ARENT THE PERMISSIONS YOURE LOOKING FOR Anthony Lineberry David Luke Richardson

THESE ARENT THE PERMISSIONS YOURE LOOKING FOR Anthony Lineberry David Luke Richardson

THESE ARENT THE PERMISSIONS YOURE LOOKING FOR Anthony Lineberry David Luke Richardson Tim Wyatt BlackHat USA 2010 AGENDA Android Internals Overview Security/Permission Model Why Ask For Permission When You Can Ask For

1.17k views • 87 slides
CREATING SHARED VALUE How building the right thing can make a dollar by making a difference to

CREATING SHARED VALUE How building the right thing can make a dollar by making a difference to

CREATING SHARED VALUE How building the right thing can make a dollar by making a difference to society DEREK WOOD derek@septa.com.au @woodaries SUSAN J. WOLFE susanjwolfe@oestrategy.com @susanjwolfe PHIL PRESETON

1.83k views • 47 slides
Two kinds of phonology John Goldsmith February 26, 2015 Contents 1 Pure phonology 2 1.1

Two kinds of phonology John Goldsmith February 26, 2015 Contents 1 Pure phonology 2 1.1

Two kinds of phonology John Goldsmith February 26, 2015 Contents 1 Pure phonology 2 1.1 Spanish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.1.1 Spanish nasal

445 views • 12 slides

More recommend