Css

Learning Stream

15th April 2013 Kaelig Deloumeau-Prigent in Css, Web Development, Productivity, Html, Technology

“Béton.css is the best CSS framework out there. True story.”

Proliferation of HTML, CSS and JavaScript frameworks at a ridiculous pace makes it hard to be prolific right away when joining a new project. With Béton.css, all the CSS frameworks are already in, maximizing productivity — for the win.
- Beton.css
  
  Beton.css - Béton.css is the best CSS framework out there. True story.
1 person liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+
- Stacey Schut
  Thanks for sharing!
  
  16th April 2013
  
  Like
- Kaelig Deloumeau-Prigent
  Thanks, you too can join the web destruction and encourage developers in your company to use Béton.css!
  
  16th April 2013
  
  Like
17th April 2013 Kaelig Deloumeau-Prigent in Css, Html, Web Development, BEM

To be honest, I’ve rarely seen (if present at all) the same naming conventions between two projects, but I’ve even seen a lot of projects with multiple naming conventions in the same codebase (you could tell when the code had been produced by looking at how the class were named). Naming can easily become a bloody free for all — be aware of this and make time for some housekeeping in your code to make sure there is at least some sort of consistency across the whole project.

What about you, do you use BEM (or a BEM-flavored notation)? If so, what is your preferred coding and naming style?
- Fifty Shades of BEM
  
  As a development concept becomes popular, it is common to witness programmers forking it to fit various workflows and habits. This is resulting in a very fragmented landscape of implementations. It is happening to BEM at this very moment, and I myself have experimented with multiple flavors of it in the past few months.
1 person liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+
28th February 2013 Markus Kobler in Design, Html, Css, Ux

Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.
- Typeplate " A typographic starter kit encouraging great type on the Web
  
  Just like in print, don't use the darkest black available in your body text (#000). Instead, go for something softer, like #444. You can use a slightly darker color for titles (#222). back to top Lorem ipsum dolor sit amet, consectetur adipisicing elit.
1 person liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+
- Kaelig Deloumeau-Prigent
  This type of typographic defaults are included by default in Compass < 0.13 — In 0.13 it became an external gem.
  
  The concepts behind it are very good, and actually crucial for publication websites where two things are vital to tackle properly: grids and typography.
  
  28th February 2013
  
  Like
21st March 2013 Kaelig Deloumeau-Prigent in Css, Rwd, Responsive Web Design, Html, Web Development

The developer toolset for building responsive website is pretty poor currently. Some amazing tools started to emerge, and Webflow is one of them.
- Webflow CSS Playground
1 person liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+
11th February 2013 Markus Kobler in Html, Css, Web Development, Ux Design

The interesting story of how Twitter's popular Bootstrap came to be:

"A year-and-a-half ago, a small group of Twitter employees set out to improve our team’s internal analytical and administrative tools. After some early meetings around this one product, we set out with a higher ambition to create a toolkit for anyone to use within Twitter, and beyond. Thus, we set out to build a system that would help folks like us build new projects on top of it, and Bootstrap was conceived."

...

"Bootstrap had its first practical test in real-world use at Twitter’s first Hackweek. During the week, I helped a few folks use Bootstrap on their projects to speed up development, but had no idea how effective or widespread the toolkit would become. When all the teams got in front of the company to present their ideas, dozens of them were using Boot… Read morestrap. They had used Bootstrap to create projects that all felt like a family of ideas with a consistent design and implementation. A simple, well-designed, and documented toolkit saved countless hours with little to no help from a dedicated designer."
- Building Twitter Bootstrap
  
  Bootstrap is an open-source front-end toolkit created to help designers and developers quickly and efficiently build great stuff online. Its goal is to provide a refined, well-documented, and extensive library of flexible design components created with HTML, CSS, and JavaScript for others to build and innovate on.
4 people liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+
- Kaelig Deloumeau-Prigent
  Great tool for prototyping! Should not be used in production IMO.
  
  For the record, Twitter doesn't use it (just for hacking concepts quickly).
  
  12th February 2013
  
  Like
13th February 2013 Natasha Guerra Markus Kobler about Html, Css

Welcome to Brave New Talent Markus!

Found this for you....
- HTML Tutorial - How To HTML Code For Dummies
  
  HTML coding is a must when it comes to creating web pages online. HTML can be simple to learn. This guide will teach you some of the basic HTML coding that will help you create your first web page! The HTML code of a web page starts like this: ...
2 people liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+
- Kaelig Deloumeau-Prigent
  @Markus: when you can read French, don't forget to read this amazing book: http://www.css-maintenables.fr/ :p
  
  15th February 2013
  
  Like
  
  2 Likes
9th March 2013 Expedia, Inc. in Responsive Design, Css, Responsiveconf

#responsiveconf was a 1-day responsive design conference in the UK earlier this month. Ross Bruniges, a UK Mozilla developer on drumbeat.org, blogged the highlights.

http://www.thecssdiv.co.uk/2013/03/on-responsive-design/
- Responsive design - have we come full circle? | Web Development | theCSSdiv
  
  Responsive Day Out, or #responsiveconf (or #beefcheeks) was a one day conference held down in Brighton and organised by Jeremy Keith. The talks were fast and furious (20 minutes each) and followed by a seated discussion on sofa's with Jeremy fielding questions from the audience.
1 person liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+
4th March 2013 Kaelig Deloumeau-Prigent in Html, Css, Front-end Architecture, Front-end Development, Web Standards
- Please Respect the Global CSS Namespace
  
  TL;DR CSS doesn't allow us (yet) to scope our styles to a particular component in an HTML document (unless we use iframes...). We can try to circumvent this limitation by respecting the global CSS namespace.
1 person liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+
28th January 2013 Kaelig Deloumeau-Prigent in Css, Html, Web Development, Front-end Architecture, Front-end Development

BEM (Block Element Modifier) is trending in the front-end development field right now. Asking yourself why? This article explains how to apply some of the BEM principles in a team-friendly notation.
- MindBEMding - getting your head 'round BEM syntax - CSS Wizardry - CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
  
  One of the questions I get asked most frequently is what do -- and __ mean in your classes? The answer is thanks to BEM and Nicolas Gallagher ... BEM - meaning block, element, modifier - is a front-end naming methodology thought up by the guys at Yandex.
1 person liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+
20th December 2012 Kaelig Deloumeau-Prigent in Css, Html
- Principles for writing good CSS
  
  When taking a position at a new place, it's important to explain to our colleagues what our tech background is. Making a point in a specific context is definitely easier when people understand what we stand for and why we stand for it.
2 people liked this
- Like
- Comment
- Share
  Facebook
  
  Twitter
  
  LinkedIn
  
  Google+