Search Results for ‘css

  • Mary Baum: CSS Grid

    Mary Baum: CSS Grid

    WordCamp Miami 2018Speaker: Mary Baum

    July 10, 2018 — Are you thinking about CSS grids for your layouts? Browser support is just about here.

    I’ve been looking hard at the work of Jen Simmons and Rachel Andrew, the two people writing most of the material to teach us designer/dev types what we need to know to start using this new spec.

    And thanks to some time I’ve spent playing on CodePen, I think I’m ready to use grids in WordPress!

    So let’s look at:
    – WHAT CSS grids are.
    – WHERE it makes sense to use them.
    – HOW they help us make previously tough problems solve themselves.
    – WHY grids are not just great for symmetrical layouts – but also wildly asymmetrical ones as well.
    – And I’ll see you on the grid!

    Presentation Slides »

  • Mauricio Gelves: Domina el CSS de tu Web con la técnica BEM (bonito, elegante y molón)

    Mauricio Gelves: Domina el CSS de tu Web con la técnica BEM (bonito, elegante y molón)

    WordCamp Irun 2018Speaker: Mauricio Gelves

    June 3, 2018 — La hoja de estilos de una web tiene que estar muy bien estructurada para evitar arreglos rápidos, ficheros innecesariamente extensos que sobrecargan la web o un sinfin de declaraciones “!important” que echan a perder cualquier esperanza de modificaciones a futuro.

    Enseñaré en esta charla cómo se utiliza BEM (bloque, elemento y modificador), una técnica que nos da una serie de pautas para que el desarrollo del CSS sea fácil, intuitivo, atomizado y escalable.

    Presentation Slides »

  • Vincent Dubroeucq: Développer son premier thème WordPress à partir d’une maquette HTML/CSS

    Vincent Dubroeucq: Développer son premier thème WordPress à partir d’une maquette HTML/CSS

    WordCamp Paris 2018Speaker: Vincent Dubroeucq

    April 27, 2018 — Apprenez comment développer un thème WordPress simple en partant d’un template HTML/CSS.

    L’objectif est de comprendre les fondamentaux et les bonnes pratiques de développement de thèmes WordPress :

    Faire apparaître son thème dans l’administration de WordPress
    Organiser les fichiers du thème de façon claire et lisible.
    Comment WordPress choisit les templates (modèles de pages) à utiliser
    Charger les ressources CSS/JS correctement
    Mettre en place la boucle de WordPress (responsable de l’affichage du contenu), les menus, les zones de widgets.
    Utiliser les templates tags de WordPress pour afficher les informations nécessaires, et créer ses propres templates tags.
    S’assurer que le thème est sécurisé, traduisible et accessible.
    Si le temps le permet, on pourra plonger dans des sujets plus avancés, comme :

    Mettre en place les fonctionnalités comme l’image d’entête personnalisée, le logo personnalisé, etc…
    Comment intégrer le thème à l’outil de personnalisation de WordPress.
    Le but est que les utilisateurs/développeurs voulant développer un thème repartent avec une méthode simple, pas à pas et une bonne appréhension des spécificités de développement de thème pour WordPress.

    Le thème développé ne sera donc pas d’une complexité élevée, au contraire, mais permettra d’avoir la vue d’ensemble la plus complète possible du process et des bonnes pratiques de développement.

    Le code source du prototype HTML/CSS ainsi que le thème à différentes étapes de son développement seront disponibles sur GitHub.

    Prérequis pour tirer le maximum de l’atelier :

    Des connaissances de base en HTML/CSS/PHP. JavaScript pas forcément nécessaire.
    Un environnement de développement WordPress local (MAMP / Local by Flywheel / Bitnami, etc…)
    Un éditeur de code (VS Code, Atom, etc…)

    Presentation Slides »

  • Juan Pablo Gomez: CSS Grid is here!

    Juan Pablo Gomez: CSS Grid is here!

    WordCamp Paris 2018Speaker: Juan Pablo Gomez

    April 24, 2018 — CSS Grid was released in 2017 and it changes everything; for the web and for the WordPress Community. It means that for the first time we get to think of our layout as two dimensional and fully responsive. CSS Grid is not another plugin hack or another bootstrap patch, it was the solution designers have been asking for. It’s here to stay and it’s the perfect time to learn it!

    Presentation Slides »

  • Jepser Bernardino: Styled components ¿Por qué css en javascript?

    Jepser Bernardino: Styled components ¿Por qué css en javascript?

    WordCamp Gran Canaria 2018Speaker: Jepser Bernardino

    April 22, 2018 — ¿En qué momento terminamos escribiendo CSS en los archivos de JavaScript? Si hacemos las cosas más complicadas, ¿por qué enamora el concepto cada vez más a los programadores?

    Hablemos de qué es, los beneficios, dolores de cabeza y el por qué decidimos usar los tan famosos Styled Components.

  • Luc Princen: Ditch your framework! – Magical layouts with modern CSS

    Luc Princen: Ditch your framework! – Magical layouts with modern CSS

    WordCamp Rotterdam 2018Speaker: Luc Princen

    April 18, 2018 — In this talk we’ll explore how and why you should say goodbye to the frontend frameworks you use.
    Through live coding demo’s we’ll explore how new css techniques like CSS Grid and Flexbox can help you create more original, better and easier-to-maintain weblayouts in a fraction of the time.

    Presentation Slides »

  • Dan Robert: Getting Started with CSS Grid

    Dan Robert: Getting Started with CSS Grid

    WordCamp Greenville 2018Speaker: Dan Robert

    April 3, 2018 — CSS Grid Layout is a powerful system available in CSS, which simplifies existing patterns and adds new possibilities for layout methods in our websites and applications. It is a 2-dimensional system, meaning it can handle both columns and rows.

    This talk covers an introduction of the CSS Grid Layout specification and follow up with some practical examples of how we can begin to use it in practice today.

    Presentation Slides »

  • Daniel Koskinen: Moving from CSS Frameworks to CSS Grid

    Daniel Koskinen: Moving from CSS Frameworks to CSS Grid

    WordCamp Stockholm 2017Speaker: Daniel Koskinen

    February 18, 2018 — “For the first time since its inception, CSS now has a real two-dimensional layout tool in the CSS Grid specification. We’ve had to resort to using floats, inline blocks and most recently, flexbox. Because using these for layout is essentially a hack, we’re often tempted to resort to grid frameworks like those provided by Foundation and Bootstrap.

    Using examples, my talk will look at how we can do what we’ve done with frameworks using CSS Grid instead, and also how we can do things we couldn’t do before without complex tricks or JavaScript. I’ll also share some thoughts on using CSS Grid in production today, accessibility concerns and tips on the best resources for learning more.

    This talk will be useful for both beginners, intermediate and long-time front end devs who aren’t yet too familiar with CSS Grid. It should also be interesting to designers who want to know what is possible with todays CSS.”

  • Kathryn Presner: A CSS Adventure

    Kathryn Presner: A CSS Adventure

    WordCamp Halifax 2017Speaker: Kathryn Presner

    February 15, 2018 — Ever wanted to make small changes to the look-and-feel of your site but weren’t sure how to go about it? Itching to change the colour of your site title, tweak the size of your paragraph text, or hide the date on your posts? Let’s go on a CSS adventure together! In this session you’ll learn some basic CSS (Cascading Style Sheets) and we’ll look at some practical examples, using a browser inspector to customize our site’s design.

    Prerequisites:
    Some basic HTML knowledge is helpful, but not required. You should be open to looking “under the hood” at a site’s HTML and CSS.

    Presentation Slides »

  • Juan Pablo Gomez: CSS Grid is Here!!

    Juan Pablo Gomez: CSS Grid is Here!!

    WordCamp NYC 2017Speaker: Juan Pablo Gomez

    February 15, 2018 — CSS Grid was released this year and it changes everything; for the web and for the WordPress Community. It means that for the first time ever we get to think of our layout as two dimensional and fully responsive. CSS Grid is not another plugin hack or another bootstrap patch, it is the solution designers have been asking for. It is here to stay and right now is the perfect time to learn it!