Einführung zu Twitter Bootstrap

Transkript

1 Einführung zu Twitter Bootstrap & Nutzung in Contao 3.1 Eine Präsentation von Johannes Pichler (webpixels) & Klaus Gansberger (webplus)

2 Agenda Was ist Twitter Bootstrap Was kann Twitter Bootstrap Wie nutze ich es in Contao one more thing...

3 Was ist Twitter Bootstrap?

4 Was ist Twitter Bootstrap? CSS Framework Erstellt und gestaltet von Twitter Zusammenspiel von CSS, HTML, JAVASCRIPT für: Typographie, Forms, Buttons, Tables, Grid, Navigation und vieles mehr...

5 Was kann es?

6 Video:

7 Warum Twitter Bootstrap?

8 Warum Twitter Bootstrap? Einfach in der Nutzung Schnelle Webentwicklung Viele, viele Seiten nutzen es Konsistenz mit den gängigen Browsern Beinhaltet RD (responsive design) Gutes Zusammenspiel mit anderen Bibliotheken (jquery, LESS,...) Es ist GRATIS (Apache 2.0 Lizenz)

9 Stärken von Twitter Bootstrap Komponenten Javascript Plugins Dazu später mehr...

10 Browser-Unterstützung

11 Browser-Unterstützung Apple Safari Firefox Opera Internet Explorer Google Chrome...

12 Browser-Unterstützung OS Browser Version Unterstützt Apple OS X Firefox ab v. 5 ja Apple OS X Google Chrome ab v. 14 ja Apple OS X Safari ab v. 5 ja Apple OS X Opera ab v. 11 ja Windows Internet Explorer ab v. 7 ja Windows Google Chrome ab v. 14 ja Windows Firefox ab v. 5 ja Windows Opera ab v. 11 ja

13 Was beinhaltet es

14 Was beinhaltet es Scaffolding Reset CSS Grid Layout Base CSS Styles für typische Elemente Tabellen Formularfelder Schaltflächen... Komponenten Navbar Alerts Tabs Buttons... Javascript Plugins Tooltips Popovers Modals

15 HTML CSS JAVASCRIPT Scaffolding Bootstrap is built on responsive 12-column grids, layouts, and components

16 RESET Typography and links Bootstrap sets basic global display, typography, and link styles. Specifically, we: Remove margin on the body Set background-color: white; on the body attributes as our typographic base Set the global link color and apply link underlines only on :hover These styles can be found within scaffolding.less. Reset via Normalize With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.

17 GRID 12 Spalten für 940px Std. ohne RD Mit RD (zusätzl. Stylesheet) With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically

18 GRID - offset offset Move columns to the right using.offset* classes. offset offset offset Each class increases the left margin of a column by a whole column. For example,.offset2 moves.span3 over two columns.

19 GRID - nested columns To nest your content with the default grid, add a new.row and set of.span* columns within an existing.span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

20 GRID - fluid Make any row "fluid" by changing.row to.row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids. Offsetting is the same as with non-fluid grid

21 RD - responsive design About responsive Bootstrap Media queries allow for custom CSS based on a number of conditions ratios, widths, display type, etc but usually focuses around minwidth and max-width. Modify the width of column in our grid Stack elements instead of float wherever necessary Resize headings and text to be more appropriate for devices Supported devices Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included: Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

22 RD - responsive design Responsive utility classes For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).

23 CSS Base CSS Fundamental HTML elements styled and enhanced with extensible classes

24 Base CSS betrifft Typographie Code Forms Buttons Images Icons

25 Typographie

26 Typographie Headings Lead body copy Alignment classes

27 Typographie Emphasis classes Addresses

28 Tabellen

29 Tabellen

30 Tabellen

31 Tabellen

32 Schaltflächen

33 Schaltflächen <a href= # class= btn >button</a> <span class= btn >button</span> <button class= btn >button</button>

34 Schaltflächen

35 Schaltflächen

36 Bilder

37 Bilder

38 Icons

39 Icons

40 Icons So einfach geht s...

41 Icons - Anwendungsfall

42 HTML CSS JAVASCRIPT Komponenten Dozens of reusable components built to provide navigation, alerts, popovers, and more

43 Komponenten beinhaltet Dropdowns Button groups Button dowpdowns Navs Navbars Pagination Labels & badges Typography Thumbnails Alerts Breadcrumbs Progress bar Media Objects

44 Ausgewählte Komponenten kurz vorgestellt

45 Dropdowns

46 Button groups

47 Button dropdowns -1

48 Button dropdowns -11

49 Navbar - BASIC

50 Navbar - FIXED TOP bleibt beim Scrollen

51 Navbar - STATIC TOP verschwindet beim Scrollen

52 Navbar - FIXED BOTTOM bleibt beim Scrollen

53 Navbar - RESPONSIVE

54 Navbar - RESPONSIVE

55 Lables & Badges Labels Badges

56 Progress bars

57 JAVASCRIPT Javascript Plugins Bring Bootstrap's components to life - now with 13 custom jquery plugins

58 Bootstrap setzt auf jquery nicht mootools :-)

59 Verfügbare JS Plugins Transitions bootstrap-transition.js Modals bootstrap-modal.js Dropdowns bootstrap-dropdown.js ScrollSpy bootstrap-scrollspy.js Togglable tabs bootstrap-tab.js Carousel bootstrap-carousel.js Tooltips bootstrap-tooltip.js Popovers bootstrap-popover.js Alert messages bootstrap-alert.js Buttons bootstrap-button.js Collapse bootstrap-collapse.js Typeahead bootstrap-typeahead.js Affix bootstrap-affix.js

60 All in one bootstrap.js bzw. bootstrap.min.js individuell anpassbar (kommt später...)

61 Keine JS Programmierkenntnisse erforderlich JS Plugins werden via data-attribute gesteuert <a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="text..." >Popover on top</a>

62 Beispiel: popover <a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="vivamus s..." data-original-title="contao Austria..." >TOP</a> Typ Orientierung

63 Interaktion auch via jquery möglich z.b. popover: $('#element').popover('hide') $('#element').popover('toggle') $('#element').popover('destroy')

64 Wo bekomme ich es

65

66 2 Möglichkeiten 1. Direkt herungerladen 2. Angepasste Version erstellen (BESSER)

67

68

69

70

71

72

73

74 Seiten-Layout

75 ENDE... oder?

76 one more thing...

77 einfaches gridden...

78 Wir haben für euch eine kleines Modul gemacht Artikel GRID

79 Artikel GRID

80 Im Artikel: Spalten zuweisen Offsets zuweisen Umbruch definieren

81

82 Im Modul Artikel: Visuelles Feedback in Artikelliste Farbliche Zuordnung zu Layoutbereichen

83

84 Im Frontend-Modul Wahlweise: Contao core Grid Twitter Bootstrap grid FIXED Twitter Bootstrap grid FLUID

85

86 Ab heute zum Download bereit auf Ihr könnt es testen und ein Feedback geben...

87 Viel Vergnügen und DANKE für die Aufmerksamkeit

88 one very last thing...

89

90

91

92 Heute Vormittag Rückmeldung bekommen, RS will ein Contao Modul

93 Modul für Contao Exklusives Demo für Contao Kein Demo-Antrag erforderlich Keine Domainbeschränkung Preroll + Zeichenbeschränkung (Demo) 37 Sprachen (Demo weniger)

94 Jetzt wirklich: ENDE

95 Präsentation kann auf heruntergeladen werden Video unter