Web Design:
Anything related to web design and development: templates, images, content, color. See also individual categories for these topics.


Flexible Grid System

  • Posted By: Jason Taetsch
  • ...

Grid systems help designers organise the many elements on a webpage by bringing order and structure to complex layouts. Flexible.gs by Dogukan Güven Nomak is a lightweight and flexible grid system designed to work seamlessly within other frameworks like bootstrap or foundation, or incorporated into a custom stylesheet. The Flexible Grid System is based off a customizable 12-column layout  and also includes a number of built-in classes to target the many different device widths found across the modern web. Versions of Flexible.gs are available for both SASS and LESS preprocessors as well as Stylus.

flexiblegs

Loaders.css

  • Posted By: Jason Taetsch
  • ...

CSS animations are smooth, native to modern browsers and fast-loading. With so many upsides they are a ripe solution to replace clunky GIFs and script based animations that often require additional libraries and struggle to provide a smooth experience across platforms. by Conner Atherton is a set of performance based animations to keep users engaged while the content on your page is served to their browser.  CSS-based animations provide a far better experience than typical jQuery or Javascript without the typical jumps and quirks associated with translating elements across the page.

Pixlbrowser – Share Your Portfolio

  • Posted By: Jason Taetsch
  • ...

Inspiration can be the hardest to find, especially when it is needed the most. Pixlbrowser by Joel Alexander aims to make the inspirational treasure hunt much easier by creating a place to share and view the latest portfolios from top designers around the world. Clicking a portfolio in “Launch Mode” opens the desired proposal right in the browser, without having to navigate to another page. You can quickly view and scan through projects and designs from some of the most original thinkers in the design world and share your new found inspiration with your own network.

pxlbrowser

CSS Reference

  • Posted By: Jason Taetsch
  • ...

Web languages are expansive by default, its nearly impossible to have the ins and outs of an entire language at the top of your mind everyday.  Every designer needs a handy reference tool at their disposal to quickly resolve any simple hangups that can so often delay a design project. The ever helpful team at codrops have created this simple and elegant reference chart of important CSS properties that you may have forgotten. The CSS Reference breaks down the CSS properties into six major categories: pseudo-class, property, function, data type, concept and @rule with import details for each item on the reference complete with illustrated examples to further boost your understanding of CSS.

CSS_reference

Hover CSS

  • Posted By: Jason Taetsch
  • ...

CSS3 transitions and animations provide lightweight and smooth animations that enhance user elements and the visual feel of a webpage. Hover.css by Ian Lunn provides over 100 dynamic effects that extends the traditional CSS hover effects including glow transitions, speech bubbles, page curls and many others. The effects are ready to use on nearly any element such as links and buttons or SVG grapphics and images. For the more advanced deployment, the collection is available for vanilla CSS, SASS and LESS.  Hover.css will work great across modern browser environments but not in Internet Explorer 8 and below.

Hovercss