CSS: Unterschied zwischen den Versionen

Aus Open Source Ecology - Germany
Zur Navigation springen Zur Suche springen
 
(18 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
−
==OSEG Wiki==
+
==Introduction==
−
See what CSS code you can use in the OSEG Wiki:
+
* [http://davidwalsh.name/starting-css Starting to Write CSS]
−
* in [[MediaWiki:Common.css|Commons.css]] under /** OSEG CSS Code **/
 
−
** The class .round makes tables, divs and spans (everything with a border) round with 10px.
 
  
 
==Guidelines==
 
==Guidelines==
Zeile 11: Zeile 9:
 
==Initialize==
 
==Initialize==
 
* [http://www.paulirish.com/2012/box-sizing-border-box-ftw/ Box-sizing: Border-box]
 
* [http://www.paulirish.com/2012/box-sizing-border-box-ftw/ Box-sizing: Border-box]
 +
 +
==Web Components==
 +
* [http://ebidel.github.io/webcomponents/ Web Components Resources]
 +
* [http://www.uibox.in/ UIBox] - curated HTML, CSS, JS UI Component Library
 +
* [http://customelements.io/ Custom Elements] - A Web Components Gallery for Modern Web Apps
  
 
==Fonts==
 
==Fonts==
Zeile 17: Zeile 20:
 
Heading Fonts:
 
Heading Fonts:
 
* [http://www.google.com/fonts/specimen/Montserrat Montserrat] ([http://theultralinx.com/2013/04/free-alternative-font-gotham-proxima-nova.html explanation])
 
* [http://www.google.com/fonts/specimen/Montserrat Montserrat] ([http://theultralinx.com/2013/04/free-alternative-font-gotham-proxima-nova.html explanation])
 +
 +
Others:
 +
* [http://demo.amitjakhu.com/dripicons/ Dripicons] - a completely free, vector line-icon font.
 +
 +
===Typography===
 +
* [http://practicaltypography.com/ Butterick’s Practical Typography]
  
 
==Colors==
 
==Colors==
Zeile 28: Zeile 37:
 
* http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
 
* http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
 
** At the bottom are examples with 2, 3, 4 and 5 columns.
 
** At the bottom are examples with 2, 3, 4 and 5 columns.
 +
 +
==Centering==
 +
* [http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ Absolute Horizontal And Vertical Centering In CSS]
  
 
==Layouts==
 
==Layouts==
Zeile 35: Zeile 47:
 
===CSS Div Tables===
 
===CSS Div Tables===
 
* [http://jsfiddle.net/Hv3V4/4/ JSFiddle with display:table]
 
* [http://jsfiddle.net/Hv3V4/4/ JSFiddle with display:table]
 +
 +
====Equal Height====
 +
* [http://codepen.io/basement31/pen/Ifaeu Codepen - Equal height boxes with minimal code]
 +
 +
====Rowspan====
 
* [http://stackoverflow.com/questions/13585789/css-rowspan-like-effect CSS div rowspan effect] - [http://tinkerbin.com/Mdd8u3fK demo]
 
* [http://stackoverflow.com/questions/13585789/css-rowspan-like-effect CSS div rowspan effect] - [http://tinkerbin.com/Mdd8u3fK demo]
 +
 +
====Colspan====
 +
* http://tinkerbin.com/Mdd8u3fK
  
 
===Others===
 
===Others===
Zeile 51: Zeile 71:
 
* [http://arthurgouveia.com/prettyCheckable/ jQuery prettyCheckable] - replaces the default checkboxes and radio inputs for better looking ones.
 
* [http://arthurgouveia.com/prettyCheckable/ jQuery prettyCheckable] - replaces the default checkboxes and radio inputs for better looking ones.
 
* [http://patrickkunka.github.io/easydropdown/ jQuery EasyDropDown] - a Drop-down Builder for Styleable Inputs and Menus.
 
* [http://patrickkunka.github.io/easydropdown/ jQuery EasyDropDown] - a Drop-down Builder for Styleable Inputs and Menus.
 +
* [http://www.bartos.me/heapbox/ HeapBox] - jQuery HTML selectbox replacement.
  
 
==Modal==
 
==Modal==
 
* [http://drublic.github.io/css-modal/ CSS-Modal] - Modals built out of pure CSS.
 
* [http://drublic.github.io/css-modal/ CSS-Modal] - Modals built out of pure CSS.
 
* [http://tympanus.net/Development/ModalWindowEffects/ Nifty Modal Window Effects] ([http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/ blog])
 
* [http://tympanus.net/Development/ModalWindowEffects/ Nifty Modal Window Effects] ([http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/ blog])
 +
* [http://taitems.github.io/iOS-Overlay/ iosOverlay.js] - iOS-style overlays/notifications for the web.
  
 
==Animations and Effects==
 
==Animations and Effects==
Zeile 64: Zeile 86:
 
** [http://tympanus.net/Tutorials/Animated3DBarChart/ Interactive Infographic with SVG and CSS Animations]
 
** [http://tympanus.net/Tutorials/Animated3DBarChart/ Interactive Infographic with SVG and CSS Animations]
 
* [http://www.minimamente.com/magic-css3-animations/ Magic CSS Animations]
 
* [http://www.minimamente.com/magic-css3-animations/ Magic CSS Animations]
 +
* [http://www.justinaguilar.com/animations/ CSS3 Animation Cheat Sheet]
 +
* [http://tympanus.net/Development/TripleViewLayout/ Sliding Triple View Layout] - ([http://tympanus.net/codrops/2013/09/05/sliding-horizontal-layout/ Site])
 +
* [http://labs.bigroomstudios.com/libraries/animo-js animo.js] - a powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion.
  
 
==Footers==
 
==Footers==
Zeile 71: Zeile 96:
 
* http://placehold.it/ - a quick and simple image placeholder service.
 
* http://placehold.it/ - a quick and simple image placeholder service.
  
−
[[Category: -OSEG 301 - IT Administration‏‎]]
+
[[Category:OSEG - IT Administration]]
  
 
==Preprocessors==
 
==Preprocessors==
Zeile 82: Zeile 107:
 
** [http://bootsnipp.com/ Bootsnipp] - snippets about Bootstrap.
 
** [http://bootsnipp.com/ Bootsnipp] - snippets about Bootstrap.
 
** [http://jaykanakiya.com/bootstrap-grid-builder bootstrap-grid-builder]
 
** [http://jaykanakiya.com/bootstrap-grid-builder bootstrap-grid-builder]
 +
** [http://pikock.github.io/bootstrap-magic/ Bootstrap Magic] - easily create your own Twitter Bootstrap theme.
 
* [http://purecss.io/ Pure] - a set of small, responsive CSS modules that you can use in every web project. (4.3KB* minified and gzipped)
 
* [http://purecss.io/ Pure] - a set of small, responsive CSS modules that you can use in every web project. (4.3KB* minified and gzipped)
  
Zeile 96: Zeile 122:
 
* [http://isobar-idev.github.io/code-standards/#_css Front-end Code Standards & Best Practices (CSS)]
 
* [http://isobar-idev.github.io/code-standards/#_css Front-end Code Standards & Best Practices (CSS)]
 
* [https://github.com/necolas/idiomatic-css Principles of writing consistent, idiomatic CSS]
 
* [https://github.com/necolas/idiomatic-css Principles of writing consistent, idiomatic CSS]
 +
* [https://github.com/styleguide/css GitHub CSS Style Guide]
  
 
==Tutorials==
 
==Tutorials==

Aktuelle Version vom 5. April 2018, 20:46 Uhr

Introduction

Guidelines

Initialize

Web Components

Fonts

  • Font Squirrel - handpicked free fonts for graphic designers with commercial-use licenses.

Heading Fonts:

Others:

  • Dripicons - a completely free, vector line-icon font.

Typography

Colors

Equal Height Columns

Centering

Layouts

Two Horizontal Divs

CSS Div Tables

Equal Height

Rowspan

Colspan

Others

CSS3 gradient background

Menus

Forms

Modal

Animations and Effects

Footers

Images

Preprocessors

Frameworks

Share

CSS Processors

Structure

  • MVCSS - Sass-based CSS architecture for creating predictable and maintainable application style.

Code Styles

Tutorials

Follow

Links

Abgerufen von „https://wiki.opensourceecology.de/index.php?title=CSS&oldid=13706“