CSS: Unterschied zwischen den Versionen

Aus Open Source Ecology - Germany
Zur Navigation springen Zur Suche springen
 
(23 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]
 +
 +
====Colspan====
 +
* http://tinkerbin.com/Mdd8u3fK
  
 
===Others===
 
===Others===
Zeile 48: Zeile 69:
  
 
==Forms==
 
==Forms==
* [http://arthurgouveia.com/prettyCheckable/ jQuery prettyCheckable]
+
* [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 63: 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 70: 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 80: Zeile 106:
 
* [http://getbootstrap.com Bootstrap]
 
* [http://getbootstrap.com Bootstrap]
 
** [http://bootsnipp.com/ Bootsnipp] - snippets about Bootstrap.
 
** [http://bootsnipp.com/ Bootsnipp] - snippets about Bootstrap.
 +
** [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 87: Zeile 115:
 
==CSS Processors==
 
==CSS Processors==
 
* [https://github.com/sindresorhus/cssprettifier-userscript cssprettifier-userscript]
 
* [https://github.com/sindresorhus/cssprettifier-userscript cssprettifier-userscript]
 +
 +
==Structure==
 +
* [http://mvcss.github.io/ MVCSS] - Sass-based CSS architecture for creating predictable and maintainable application style.
  
 
==Code Styles==
 
==Code Styles==
 
* [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==
Zeile 96: Zeile 128:
 
** http://tympanus.net/Development/ModalWindowEffects/
 
** http://tympanus.net/Development/ModalWindowEffects/
 
* http://tympanus.net/codrops/collective/
 
* http://tympanus.net/codrops/collective/
 +
 +
==Follow==
 +
* [http://webtoolsweekly.com/#archive Webtools weekly] - newsletter and archive.
  
 
==Links==
 
==Links==

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