🌐 Public

CSS for superheroes

By Menno Wildeboer

Introduction

Think you know everything about CSS? Guess not. CSS is hard, especially for big projects. This flow is all about taking CSS to the next level to make you more productive.

Menno Wildeboer — Product Developer: iOS, Rails, JS, Mobile, UX.

Added by Menno Wildeboer: “Sass is awesome. All the other topic also use Sass as a foundation so learn it.

1 Sass Basics

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup.

Added by Menno Wildeboer: “The extend mixins and newer silent class introduction.

2 Extending Placeholder Selectors with Sass

I recently wrote an article on creating a themable button set with Sass where I used a mixin to define all base styles, then a color value was passed as an argument when included in each theme. Example: @mixin btn-theme($btn-color) { ...

Added by Menno Wildeboer: “Introduction about OOCSS. Stop messy CSS!

3 Dive into OOCSS principles

OOCSS - what it is, what it does, what it is, what it isn't. Consider a new web project: a start-up dreams of developing THE indispensable webapplication of tomorrow's web. They choose wisefully technologies, frameworks, environments they'll use... However, the front-end rendering will still the same for the browser: HTML, CSS and Javascript.

Added by Menno Wildeboer: “Introduction to SMACSS.

4 An Introduction To SMACSS Guidelines For Writing CSS

In recent weeks I've been discussing ideas and approaches to writing css. I've looked at abstracting css and talked in some detail about Object Oriented CSS. If classic css sits on one side of an approach to writing css and OOCSS sits on the other, SMACSS sits somewhere in the middle.

Added by Menno Wildeboer: “An overview, but in general the consensus is: "Use what ever you feel comfortable, or mix them, take the best bit’s and make it your own."

5 OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?

The way we write CSS has changed a lot in last few years, and the abbreviation jungle gets deeper and deeper. Heres a list of links to influential articles and quick summaries of these techniques. update: 2014.01.23 rewrote the Atomic and the BEM sections. I think there have bee happening big things in how we write CSS, for a reason

Added by Menno Wildeboer: “A general overview.

6 Objects in Space

Hubble Deep Field - Robert Williams and the Hubble Deep Field TeamObjects in SpaceA style-guide for modular SASS development using SMACSS and BEM.First of all - for the non-readers, here is the pattern. Take it. Care for it. An OO mind-melding of SMACSS and BEM using Sass. (wut?)Second - you must read: " How to Scale and Maintain Legacy CSS

Added by Menno Wildeboer: “BEM support has been added to Sass 3.3. Rock on!

8 Support for BEM modules in Sass 3.3

The next major release of Sass is poised for release and with it comes real support for BEM-style modules! Celebrate! If you're not familiar with the concept of BEM, here's a quick overview for you: BEM, or block, element, modifier, is a methodology for naming classes in your markup and stylesheets.

Added by Menno Wildeboer: “Inuit.css is a framework that uses the concepts mentioned here.

9 When Inuit.css is a better choice than Bootstrap

"Inuit.css is a powerful little framework designed for serious developers." says the first sentence in a README file. The biggest advantage of Inuit over other frameworks is modularity and focus on abstractions. It doesn't enforce how elements should look. Instead, it gives a set of tools which speed up your work and allow to test new things faster.

лена

a huge manatee

  • 0 Playlists
  • 0 Followers

qibang

Freshman

  • 0 Playlists
  • 0 Followers

Tony Seeds

Freshman

  • 1 Playlists
  • 0 Followers

Lordmando03

Freshman

  • 0 Playlists
  • 0 Followers

Rik Geelen

Freshman

  • 0 Playlists
  • 0 Followers

Дамир Аралбаев

Freshman

  • 0 Playlists
  • 0 Followers

ianfarrell123

Freshman

  • 0 Playlists
  • 0 Followers

Arek Mycek

Freshman

  • 0 Playlists
  • 0 Followers

Alex

Designer | Sociologist | Aspiring Cheese Connoisseur

  • 0 Playlists
  • 0 Followers

Luiz Fernando Cardozo

Freshman

  • 0 Playlists
  • 0 Followers

Semsem

Freshman

  • 0 Playlists
  • 0 Followers

Anastasya Grishina

Freshman

  • 0 Playlists
  • 0 Followers

Zana Fauzi

Freshman

  • 0 Playlists
  • 0 Followers

as045

Freshman

  • 0 Playlists
  • 0 Followers

Andrei Dubau

Freshman

  • 0 Playlists
  • 0 Followers

Sang Nguyen

Freshman

  • 0 Playlists
  • 0 Followers

Jose Luis Junior Garza

Software Engineer Team Lead at Accenture

  • 0 Playlists
  • 0 Followers

Châu Chin

Freshman

  • 0 Playlists
  • 0 Followers

Jonas Sousa

Freshman

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?