CSS

OSEG Wiki

See what CSS code you can use in the OSEG Wiki:

• in Commons.css under /** OSEG CSS Code **/
  • The class .round makes tables, divs and spans (everything with a border) round with 10px.

Guidelines

• CSS-Guidelines
• Writing Better CSS
• Functional CSS

Initialize

• Box-sizing: Border-box

Web Components

• Web Components Resources
• UIBox - curated HTML, CSS, JS UI Component Library
• Custom Elements - A Web Components Gallery for Modern Web Apps

Fonts

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

Heading Fonts:

• Montserrat (explanation)

Others:

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

Typography

• Butterick’s Practical Typography

Colors

• Harmonic Colors
• COLOURlovers - palettes and more.
• Adobe Kuler - needs an Adobe account.
• Find the Perfect Colors for Your Website

Equal Height Columns

• http://stackoverflow.com/questions/10987821/two-columns-equal-height-only-css-no-display-table-table-row-table-cell
• http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
  • At the bottom are examples with 2, 3, 4 and 5 columns.

Centering

• Absolute Horizontal And Vertical Centering In CSS

Layouts

Two Horizontal Divs

• http://stackoverflow.com/questions/10490256/given-two-divs-on-the-same-line-how-can-i-make-the-left-div-fill-the-remaining
  • http://jsfiddle.net/BsHpj/9/

CSS Div Tables

• JSFiddle with display:table

Equal Height

• Codepen - Equal height boxes with minimal code

Rowspan

• CSS div rowspan effect - demo

Colspan

• http://tinkerbin.com/Mdd8u3fK

Others

• Left, Right, Centered Div

CSS3 gradient background

• http://stackoverflow.com/questions/11719019/css3-gradient-background

Menus

• Multi-Level Push Menu
• More Personal Circle Navigation
• Circular Navigation

Forms

• jQuery prettyCheckable - replaces the default checkboxes and radio inputs for better looking ones.
• jQuery EasyDropDown - a Drop-down Builder for Styleable Inputs and Menus.
• HeapBox - jQuery HTML selectbox replacement.

Modal

• CSS-Modal - Modals built out of pure CSS.
• Nifty Modal Window Effects (blog)
• iosOverlay.js - iOS-style overlays/notifications for the web.

Animations and Effects

• Effekt.css
• 25 CSS3 Transitions and Animations Effects Tutorials
  • Examples of Pseudo-Elements Animations and Transitions
  • Caption Hover Effects
  • Simple YouTube Menu Effect
  • Interactive Infographic with SVG and CSS Animations
• Magic CSS Animations

Footers

• Slide-out footer

Images

• http://placehold.it/ - a quick and simple image placeholder service.

Preprocessors

• LESS
  • Preboot
  • LESS Elements

Frameworks

• Bootstrap
  • Bootsnipp - snippets about Bootstrap.
  • bootstrap-grid-builder
  • Bootstrap Magic - easily create your own Twitter Bootstrap theme.
• Pure - a set of small, responsive CSS modules that you can use in every web project. (4.3KB* minified and gzipped)

Share

• Codepen - The New Embed Builder – Customize Every Aspect of Embedded Pens

CSS Processors

• cssprettifier-userscript

Structure

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

Code Styles

• Front-end Code Standards & Best Practices (CSS)
• Principles of writing consistent, idiomatic CSS
• GitHub CSS Style Guide

Tutorials

• http://tympanus.net/codrops/category/tutorials/
  • http://tympanus.net/Development/ModalWindowEffects/
• http://tympanus.net/codrops/collective/

Follow

• Webtools weekly - newsletter and archive.

Links

• Decoupling HTML From CSS
• Frameworks of Tomorrow
  • Normalize.css
  • Skeleton
  • responsive.gs
  • Animate.css
  • Roch Hammer
• CSS Tricks