Drupal Theming with CSS Frameworks (960grid)
7 likes2,823 views
The document discusses CSS frameworks and grid-based design. It introduces CSS frameworks as sets of tools and best practices that abstract routine tasks into reusable modules. Grid-based design uses a grid system to organize content spatially on a page in a clear, meaningful way for users. The document examines specific CSS frameworks, Blueprint and 960gs, and discusses advantages and disadvantages of working with grids, including how grids can facilitate creativity but also impose restrictions. It also explores using the 960gs framework with the Drupal CMS.
1 of 28
Downloaded 170 times
Ad
Recommended
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphiacanarymason The document discusses the benefits of designing websites directly in HTML and CSS in the browser rather than first designing in Photoshop. It notes that designing in the browser means the designer is working in the actual medium, everything they design can be built because they are building it, and the client sees the real design from the start. Some tips provided include using frameworks for layouts, starting with content, embracing progressive enhancement, and using advanced CSS techniques while allowing for older browsers.
Making Your Own CSS Framework
Making Your Own CSS FrameworkDan Sagisser The document discusses making your own CSS framework to manage multiple websites with limited resources. It recommends starting with a CSS reset, basic structural elements, and columns for layout. Future-proof the framework to match HTML5. Keep colors, images, and styling out of the framework. Build reusable widgets and allow for design freedom and individuality across sites. The initial version may be too constricting without flexibility. Add optional "flare" like boxes and slideshows once the basics are established. The framework should be easily upgradable and accessible across managed sites.
2009_09_11_Grid960
2009_09_11_Grid960LightSpeed The document discusses a 5-step process for using a CSS grid framework called the 960 Grid System to design a website. Step 1 involves paper prototyping to define expectations. Step 2 is creating an unstyled semantic structure using the 960 Grid. Step 3 adds graphical elements in Photoshop. Step 4 finalizes production by slicing images and applying CSS. Step 5 focuses on testing across browsers before client delivery. Using this process and a CSS framework provides benefits like visual consistency and reduced cross-browser issues.
Web Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSBootstrap Creative A guide to help you achieve code consistency that adheres to best practices. Sections include: What is a URL?, Naming Conventions, Project Folder Structure, Code Guide, Images Guide, and Things I wish I Knew Upfront
Test-proof CSS
Test-proof CSSVittorio Vittori This document discusses different tools for testing CSS including CSSLint for syntax checking, ResembleJS for regression testing layouts, UnCSS for removing unused selectors, and StyleStats for analyzing CSS statistics. It explains how each tool works and recommends which tools to use based on the size and complexity of projects, considering objectives, budgets, and development priorities. CSSLint and UnCSS are recommended for smaller projects while CSSLint, ResembleJS, UnCSS, and StyleStats are suggested for larger, more complex projects.
Teams, styles and scalable applications
Teams, styles and scalable applicationsVittorio Vittori The talk it's about how failure is an occasion to learn scalability in CSS development and how your knowledge can be shared with the rest of the team.
Tech talk on Tailwind CSS
Tech talk on Tailwind CSSSquareboat Tailwind CSS is a utility-first CSS framework that allows for rapidly building custom designs using utility classes rather than pre-designed components. It provides low-level utility classes that can be used to style self-created components and build completely custom designs directly in HTML without needing to leave the file. The document then outlines how to install Tailwind CSS, its workflow, examples of how to build common components like alerts and buttons, and advantages like being responsive, customizable and friendly for building components.
Drupaldelphia Shortcuts Cheats And Cheap Stunts
Drupaldelphia Shortcuts Cheats And Cheap Stuntscanarymason This document discusses shortcuts and techniques for overcoming challenges in Drupal theming and design workflows. It recommends starting with a stripped-down Zen starter theme, using CSS frameworks like Blueprint for layout, and leveraging browser debugging tools and Drupal modules like Devel and Admin for theme development. The document also briefly mentions using Sass/Compass for CSS preprocessing.
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Campcanarymason This document outlines the tools included in The Coding Designer's Survival Kit, which provides designers with markup, CSS, and JavaScript tools for designing websites in the browser. The kit includes HTML5 Boilerplate, elements and pages to design for, Modernizr and Selectivizr, JavaScript tools like Lettering.js, and Sass/Compass mixins. Using these tools allows designers to play with CSS, work parts of designs out in Photoshop while speaking CSS natively, and ask questions that Photoshop alone does not. Resources like Hardboiled Web Design, CSS3 for Web Designers, and Responsive Web Design are also recommended.
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010canarymason The document discusses the benefits of designing websites directly in the browser using HTML and CSS rather than designing first in Photoshop. It argues that designing in the browser results in more accurate and web-native designs that are buildable because the design is being built as it is designed. It provides tips for getting started with designing in the browser such as using frameworks for layouts, embracing progressive enhancement, and anticipating how the design will be implemented with content management systems like Drupal.
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
CSS Systems
CSS SystemsNatalie Downe http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.
Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.
Themer's roundtable
Themer's roundtablecanarymason The document discusses themes in Drupal, including what a theme is, the roles of different types of themers, and the typical components and files that make up a Drupal theme. It provides recommendations for software and modules that are useful for theming, and resources for themers to reference when working on themes. The document is intended as an introduction and overview of theming for Drupal.
Rapid Prototyping With J Query
Rapid Prototyping With J QueryBootstrap Rapid prototyping with jQuery allows for quickly implementing some product functionality without worrying about details or production issues. It focuses on layout, behavior, and data to get early feedback through an interactive click dummy. Various techniques like CSS frameworks, public APIs, and browser technologies can be used to create the illusion of speed and responsiveness while hiding complexity. Tools like Themeroller, jQuery UI, Firebug, and Greasemonkey can aid the rapid prototyping process.
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
CSS with superpowers - SASS!
CSS with superpowers - SASS!fv0 These are my slides from the Meetup "CSS with superpowers - SASS!" at ImmobilienScout24 on November 6, 2014.
Description:
Preprocessors for CSS have become the industry standard and you'll be reading more and more about them all over the tech community. They're named LESS, Stylus or SASS. Preprocessors make CSS more flexible, maintainable and fill in where CSS has its limits and drawbacks.
Untitleddocument (1)
Untitleddocument (1)Keith McCarthy Team Treehouse is an online learning platform with over 1000 videos taught by experts covering topics like web design, coding, business and more. The document lists completed Treehouse courses by the user including courses on HTML, CSS, JavaScript, web design and development, freelancing and more focused on building skills in front-end web development.
Node.js 101
Node.js 101FITC Node.js 101
with Rami Sayar
Presented by FITC at Web Unleashed 2014 in Toronto
on September 18 2014, 10:30 - 11:15am
Node.js is a runtime environment and library for running JavaScript applications outside the browser. Node.js is mostly used to run real-time server applications and shines through its performance using non-blocking I/O and asynchronous events. This talk will introduce you to Node.js by showcasing the environment and its two most popular libraries: express and socket.io.
TARGET AUDIENCE
Beginner web developers
ASSUMED AUDIENCE KNOWLEDGE
Working knowledge of JavaScript and HTML5.
OBJECTIVE
Learn how to build a chat engine using Node.js and WebSockets.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Node.js environment and basics
Node Package Manager overview
Web Framework, express, basics
WebSockets and Socket.io basics
Building a chat engine using Node.js
Resume
ResumeTariq Hussain Adobe Photoshop ,Dreamweaver, Responsive Designing, Div, CSS, CSS3, HTML, HTML5, CorelDraw, Illustrator, Bootstrap, jQuery, JavaScript, Mobile Responsive, Mobile Applications Mobile Layouts.
The art of website layout
The art of website layoutmilika866666 The document discusses important considerations for website layout and design. It emphasizes having a plan before starting, deciding what type of site is being created and where to position content. Navigation is also highlighted as essential, with options like navigation bars. The level of design software used should match the creator's skills and desired results, ranging from basic notepad to more advanced options like Dreamweaver that allow for customization. It concludes by stressing the importance of ensuring hosting supports any special elements used and keeping up with changes in web development technologies over time.
Introducing RIB
Introducing RIBTakashi M This document introduces RIB, a framework for organizing JavaScript projects. RIB abstracts HTML forms and separates projects into controllers and presentations. It uses a loosely coupled approach with event broadcasting to communicate between presentations. The goals are to make projects more modular, collaborative, and testable compared to monolithic JavaScript files.
How to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS projectRenoir Boulanger The document outlines steps for managing a large-scale web project, including gathering visual elements as a reference, organizing sketches, choosing a markup base to build upon, separating CSS into basic, adaptation, and theme layers, and creating modular and reusable code to establish a solid markup foundation for future work. The end result is a framework of partials that programmers can use to build out pages and repeated elements, providing code reusability and separate responsibilities for integrators and programmers on the team.
Things To Keep In Mind When Working In The World Of Responsive Design
Things To Keep In Mind When Working In The World Of Responsive DesignFITC Things To Keep In Mind When Working In The World Of Responsive Design
Haris Mahmood
Overview
The term ‘responsive design’ has evolved over the past years to mean more than just fitting a site onto your phone’s screen. Responsiveness now caters to a wide range of needs and concerns, which isn’t always clear or easy to navigate. In this talk, we’ll explore multiple responsive concepts and techniques, their pitfalls and limitations, and explore a range of solutions, tips and tricks to help in the ways of responsive design.
Objective
To explore various concepts and techniques, pitfalls and limitations, and a range of solutions, tips and tricks revolving around the world of responsive design.
Target Audience
Web designers, UX designers, front-end developers
Five Things Audience Members Will Learn
The evolution of responsive design
What responsive design means today
A wide range of techniques used to achieve responsive design
The limitations and pitfalls of responsive design
Where the future of responsive design is headed
Learn Bootstrap 4
Learn Bootstrap 4Vinny Vessel Bootstrap 4 is one of the most popular web front end framework for building responsive websites and application.
It provides an inbuilt component of HTML and CSS. Also includes an optional JavaScript Extension.
Latest version of Bootstrap framework.
Bootstrap frameworks simplify the process of adding layouts to website or Web App in order to make them more responsive.
Easy to use.
The framework itself contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components.
Most widely used framework.
SASS & CSS Arquitecture
SASS & CSS ArquitectureSantiago Barchetta This document discusses SASS and CSS architecture. It covers the basics of SASS including using .sass and .scss file extensions, compiling SASS to CSS with the --watch option, and features like variables, nesting, mixins, extends, if/else statements, placeholders, and partials. It also mentions source maps and recommends style guides and best practices for naming conventions, file organization, and breaking code into small partial files. Finally, it provides some online resources for learning more about SASS.
CSS3: stay tuned for style
CSS3: stay tuned for styleChris Mills CSS3 offers many new features that allow for effects previously requiring image editing or JavaScript programs. These include drop shadows, gradients, rounded corners, transparency, and animations. CSS3 selectors also allow targeting elements more precisely with less markup. Features like multiple backgrounds and flexible box layout reduce the need for divs. Browser support is improving, though graceful degradation is still needed. Tools like Selectivizr, CSS3 Pie and Modernizr help provide CSS3 support in older browsers.
Css3
Css3Bronson Quick This document introduces several CSS3 features including CSS3 PIE, @font-face, border-radius, border-image, rgba, box-shadow, text-shadow, linear-gradient, and columns. For each feature, it provides a brief description, examples of CSS code to implement the feature, and the browsers that support it. It also includes links to additional CSS3 resources.
Maintainable CSS
Maintainable CSSStephen Hay This document discusses how to write maintainable CSS through organizing CSS files according to a design language's components (e.g. layout, color), authoring semantic and portable CSS code using classes and IDs, and documenting CSS code and conventions either through inline comments or generated documentation from comment tags. It emphasizes organizing CSS files by concern rather than by site section, separating IE conditional code into separate files, using a system for declaration order and formatting for readability, and having an effective text editor for working with CSS code.
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsMario Hernandez Mario Hernandez presented on CSS frameworks and progressive enhancements with CSS3. The presentation covered choosing the right CSS framework based on factors like project requirements, fluid grid systems, responsiveness, documentation, and maintenance. Frameworks like Foundation and 960 Grid System were showcased. Grid systems use rows and columns to layout content. Progressive enhancements with CSS3 focus on widely supported properties to enhance the user experience without sacrificing functionality. Additional resources on grids, CSS3, and responsive design were provided.
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka A presentation from J and Beyond 2018 in Cologne, Germany. In this session, Crystal of Lucid Fox will walk you through the steps she took to build Akeeba FEF, a CSS framework that Akeeba now uses to ensure their extensions are consistent with their brand across Joomla, WordPress, and standalone PHP software. You’ll learn about creating a design system, writing CSS in a way that’s easily maintained and upgraded, and tips on implementing this system across multiple platforms.
Ad
More Related Content
What's hot (20)
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Campcanarymason This document outlines the tools included in The Coding Designer's Survival Kit, which provides designers with markup, CSS, and JavaScript tools for designing websites in the browser. The kit includes HTML5 Boilerplate, elements and pages to design for, Modernizr and Selectivizr, JavaScript tools like Lettering.js, and Sass/Compass mixins. Using these tools allows designers to play with CSS, work parts of designs out in Photoshop while speaking CSS natively, and ask questions that Photoshop alone does not. Resources like Hardboiled Web Design, CSS3 for Web Designers, and Responsive Web Design are also recommended.
Designing in the Browser - Design for Drupal, Boston 2010
Designing in the Browser - Design for Drupal, Boston 2010canarymason The document discusses the benefits of designing websites directly in the browser using HTML and CSS rather than designing first in Photoshop. It argues that designing in the browser results in more accurate and web-native designs that are buildable because the design is being built as it is designed. It provides tips for getting started with designing in the browser such as using frameworks for layouts, embracing progressive enhancement, and anticipating how the design will be implemented with content management systems like Drupal.
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
CSS Systems
CSS SystemsNatalie Downe http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.
Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.
Themer's roundtable
Themer's roundtablecanarymason The document discusses themes in Drupal, including what a theme is, the roles of different types of themers, and the typical components and files that make up a Drupal theme. It provides recommendations for software and modules that are useful for theming, and resources for themers to reference when working on themes. The document is intended as an introduction and overview of theming for Drupal.
Rapid Prototyping With J Query
Rapid Prototyping With J QueryBootstrap Rapid prototyping with jQuery allows for quickly implementing some product functionality without worrying about details or production issues. It focuses on layout, behavior, and data to get early feedback through an interactive click dummy. Various techniques like CSS frameworks, public APIs, and browser technologies can be used to create the illusion of speed and responsiveness while hiding complexity. Tools like Themeroller, jQuery UI, Firebug, and Greasemonkey can aid the rapid prototyping process.
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
CSS with superpowers - SASS!
CSS with superpowers - SASS!fv0 These are my slides from the Meetup "CSS with superpowers - SASS!" at ImmobilienScout24 on November 6, 2014.
Description:
Preprocessors for CSS have become the industry standard and you'll be reading more and more about them all over the tech community. They're named LESS, Stylus or SASS. Preprocessors make CSS more flexible, maintainable and fill in where CSS has its limits and drawbacks.
Untitleddocument (1)
Untitleddocument (1)Keith McCarthy Team Treehouse is an online learning platform with over 1000 videos taught by experts covering topics like web design, coding, business and more. The document lists completed Treehouse courses by the user including courses on HTML, CSS, JavaScript, web design and development, freelancing and more focused on building skills in front-end web development.
Node.js 101
Node.js 101FITC Node.js 101
with Rami Sayar
Presented by FITC at Web Unleashed 2014 in Toronto
on September 18 2014, 10:30 - 11:15am
Node.js is a runtime environment and library for running JavaScript applications outside the browser. Node.js is mostly used to run real-time server applications and shines through its performance using non-blocking I/O and asynchronous events. This talk will introduce you to Node.js by showcasing the environment and its two most popular libraries: express and socket.io.
TARGET AUDIENCE
Beginner web developers
ASSUMED AUDIENCE KNOWLEDGE
Working knowledge of JavaScript and HTML5.
OBJECTIVE
Learn how to build a chat engine using Node.js and WebSockets.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Node.js environment and basics
Node Package Manager overview
Web Framework, express, basics
WebSockets and Socket.io basics
Building a chat engine using Node.js
Resume
ResumeTariq Hussain Adobe Photoshop ,Dreamweaver, Responsive Designing, Div, CSS, CSS3, HTML, HTML5, CorelDraw, Illustrator, Bootstrap, jQuery, JavaScript, Mobile Responsive, Mobile Applications Mobile Layouts.
The art of website layout
The art of website layoutmilika866666 The document discusses important considerations for website layout and design. It emphasizes having a plan before starting, deciding what type of site is being created and where to position content. Navigation is also highlighted as essential, with options like navigation bars. The level of design software used should match the creator's skills and desired results, ranging from basic notepad to more advanced options like Dreamweaver that allow for customization. It concludes by stressing the importance of ensuring hosting supports any special elements used and keeping up with changes in web development technologies over time.
Introducing RIB
Introducing RIBTakashi M This document introduces RIB, a framework for organizing JavaScript projects. RIB abstracts HTML forms and separates projects into controllers and presentations. It uses a loosely coupled approach with event broadcasting to communicate between presentations. The goals are to make projects more modular, collaborative, and testable compared to monolithic JavaScript files.
How to manage a big scale HTML/CSS project
How to manage a big scale HTML/CSS projectRenoir Boulanger The document outlines steps for managing a large-scale web project, including gathering visual elements as a reference, organizing sketches, choosing a markup base to build upon, separating CSS into basic, adaptation, and theme layers, and creating modular and reusable code to establish a solid markup foundation for future work. The end result is a framework of partials that programmers can use to build out pages and repeated elements, providing code reusability and separate responsibilities for integrators and programmers on the team.
Things To Keep In Mind When Working In The World Of Responsive Design
Things To Keep In Mind When Working In The World Of Responsive DesignFITC Things To Keep In Mind When Working In The World Of Responsive Design
Haris Mahmood
Overview
The term ‘responsive design’ has evolved over the past years to mean more than just fitting a site onto your phone’s screen. Responsiveness now caters to a wide range of needs and concerns, which isn’t always clear or easy to navigate. In this talk, we’ll explore multiple responsive concepts and techniques, their pitfalls and limitations, and explore a range of solutions, tips and tricks to help in the ways of responsive design.
Objective
To explore various concepts and techniques, pitfalls and limitations, and a range of solutions, tips and tricks revolving around the world of responsive design.
Target Audience
Web designers, UX designers, front-end developers
Five Things Audience Members Will Learn
The evolution of responsive design
What responsive design means today
A wide range of techniques used to achieve responsive design
The limitations and pitfalls of responsive design
Where the future of responsive design is headed
Learn Bootstrap 4
Learn Bootstrap 4Vinny Vessel Bootstrap 4 is one of the most popular web front end framework for building responsive websites and application.
It provides an inbuilt component of HTML and CSS. Also includes an optional JavaScript Extension.
Latest version of Bootstrap framework.
Bootstrap frameworks simplify the process of adding layouts to website or Web App in order to make them more responsive.
Easy to use.
The framework itself contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components.
Most widely used framework.
SASS & CSS Arquitecture
SASS & CSS ArquitectureSantiago Barchetta This document discusses SASS and CSS architecture. It covers the basics of SASS including using .sass and .scss file extensions, compiling SASS to CSS with the --watch option, and features like variables, nesting, mixins, extends, if/else statements, placeholders, and partials. It also mentions source maps and recommends style guides and best practices for naming conventions, file organization, and breaking code into small partial files. Finally, it provides some online resources for learning more about SASS.
CSS3: stay tuned for style
CSS3: stay tuned for styleChris Mills CSS3 offers many new features that allow for effects previously requiring image editing or JavaScript programs. These include drop shadows, gradients, rounded corners, transparency, and animations. CSS3 selectors also allow targeting elements more precisely with less markup. Features like multiple backgrounds and flexible box layout reduce the need for divs. Browser support is improving, though graceful degradation is still needed. Tools like Selectivizr, CSS3 Pie and Modernizr help provide CSS3 support in older browsers.
Css3
Css3Bronson Quick This document introduces several CSS3 features including CSS3 PIE, @font-face, border-radius, border-image, rgba, box-shadow, text-shadow, linear-gradient, and columns. For each feature, it provides a brief description, examples of CSS code to implement the feature, and the browsers that support it. It also includes links to additional CSS3 resources.
Maintainable CSS
Maintainable CSSStephen Hay This document discusses how to write maintainable CSS through organizing CSS files according to a design language's components (e.g. layout, color), authoring semantic and portable CSS code using classes and IDs, and documenting CSS code and conventions either through inline comments or generated documentation from comment tags. It emphasizes organizing CSS files by concern rather than by site section, separating IE conditional code into separate files, using a system for declaration order and formatting for readability, and having an effective text editor for working with CSS code.
Similar to Drupal Theming with CSS Frameworks (960grid) (20)
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsMario Hernandez Mario Hernandez presented on CSS frameworks and progressive enhancements with CSS3. The presentation covered choosing the right CSS framework based on factors like project requirements, fluid grid systems, responsiveness, documentation, and maintenance. Frameworks like Foundation and 960 Grid System were showcased. Grid systems use rows and columns to layout content. Progressive enhancements with CSS3 focus on widely supported properties to enhance the user experience without sacrificing functionality. Additional resources on grids, CSS3, and responsive design were provided.
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka A presentation from J and Beyond 2018 in Cologne, Germany. In this session, Crystal of Lucid Fox will walk you through the steps she took to build Akeeba FEF, a CSS framework that Akeeba now uses to ensure their extensions are consistent with their brand across Joomla, WordPress, and standalone PHP software. You’ll learn about creating a design system, writing CSS in a way that’s easily maintained and upgraded, and tips on implementing this system across multiple platforms.
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationCharlie Moad This document discusses the benefits of using grid-based web design. It provides a brief history of grid design and influential designers like Emil Ruder and Josef Müller-Brockmann. Grids offer benefits to designers, developers, and content authors by providing structure and consistency. A case study of redesigning the Indianapolis Museum of Art's website using a grid is presented. Tools for implementing grids are also reviewed. The document argues that grids will remain a relevant design approach as new devices emerge.
Roadmap 01
Roadmap 01quangnv17071980 This document provides an overview of CSS (Cascading Style Sheets) and why it is important for web design. It discusses the benefits of CSS, including improved portability across devices, increased download speeds, and easier site maintenance. The document then provides steps for getting started with CSS, including planning layouts with CSS in mind, using simple building blocks, and testing designs across browsers. The overall purpose is to convince readers of the business and design advantages of using CSS for websites.
Using a CSS Framework
Using a CSS FrameworkGareth Saunders The document discusses using CSS frameworks to speed up web development by avoiding having to repeatedly write CSS resets and layout code. It describes the Blueprint CSS framework, including how it provides a grid system, typography styles, and other components out of the box. The author explains how using a framework like Blueprint CSS can save significant time over building sites from scratch each time.
Graphic Design For Web
Graphic Design For WebDeniz Gökçe The document discusses various topics related to web design including parallax scrolling, search engine optimization (SEO), grid design, Bootstrap, Animate.css, and common HTTP status codes. It provides descriptions and definitions of these terms, outlines best practices, and links to additional resources for further reading.
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Four Kitchens The document summarizes the NineSixty grid theming system for Drupal. It discusses how NineSixty builds upon the existing 960.gs grid framework by adding improvements like content-first layout, dynamic grid widths based on context, debugging tools, and right-to-left language support. It also provides an overview of how grid systems work in general, including the use of columns, gutters, containers, and classes to define grid widths and positions.
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)Four Kitchens Nathan Smith and Todd Nienkerk presented on using grid systems to accelerate website theming in Drupal. Grid systems have been used in design for nearly a century to bring order and flexibility to page layouts. In web design, grid systems take the form of CSS frameworks that provide standard rules and shortcuts for building layouts through a column-based structure. The 960 grid system, which was created to streamline web development, works on a 12- or 16-column structure within a 960px wide container, allowing designers to quickly prototype and develop responsive, production-ready layouts.
Accelerated Grid Theming
Accelerated Grid ThemingNathan Smith I co-presented these slides with Todd Nienkerk of FourKitchens.com -- We presented at Drupal Camp Dallas, as well as Design 4 Drupal at MIT.
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann This document discusses the differences between CSS and JavaScript and when each is most appropriate to use. It argues that CSS is often underestimated in favor of JavaScript solutions. CSS has advanced significantly with features like calc(), media queries, animations/transitions, flexbox, grid, variables and more. These powerful features allow many tasks to be accomplished with CSS alone without needing JavaScript. The document encourages embracing the "squishiness" of the web and considering CSS more when building interfaces.
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith The document summarizes a presentation about using Adobe Fireworks for designing HTML and CSS websites. It discusses how Fireworks is ideal for web design as it integrates well with other Adobe applications. It also explores how Fireworks allows for rapid prototyping through features like slicing images and exporting code. The presentation emphasizes writing code by hand and using frameworks like the 960 grid system to help maintain consistency and improve efficiency.
Simply Responsive CSS3
Simply Responsive CSS3Denise Jacobs Don't be fooled, CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now.
Let's Work Together
Let's Work TogetherAquent This document discusses principles and best practices for collaboration within organizations. It addresses topics like establishing shared values and culture, defining roles and responsibilities across teams, implementing design systems for consistency, and emphasizing communication during the process of creating products and tools. The overall message is that collaborative work requires establishing discipline and guidelines while also allowing for flexibility and humanity between groups.
Grid design
Grid designTahir Hoxha The document discusses the benefits of using grid design for websites. It notes that grids provide uniformity, reduce coding errors, and make the design process faster. They allow for nesting of sub-grids and provide structural control over page elements. However, traditional grids like the 960 pixel grid are not responsive to different screen sizes. The modern grid is responsive, scaling based on screen size. It is also modifiable, allowing adjustment of gutters and other elements to adapt to changing design needs.
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAdrian Westlake The document discusses CSS frameworks, which aim to abstract routine CSS tasks into reusable modules. It covers the frustrations of CSS development like lack of code reuse. Popular frameworks like Blueprint, 960gs and CSS Scaffold are examined. Frameworks provide advantages like increased productivity but also have disadvantages like creating bloated code and design restrictions. In summary, frameworks can help speed up development and improve designs but are not perfect solutions and building your own comes with further complications.
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerLizzie Hodgson This document discusses how to make websites responsive using CSS frameworks. It explains that mobile usage is growing and users expect mobile-friendly sites. CSS frameworks like Foundation can help bridge skills gaps by providing preset responsive grids and functionality. The document outlines the minimum requirements for responsive design like fluid images and media queries. It provides examples of how to use Foundation's grid system and other tools to create responsive layouts and images. While frameworks have pros like speeding development, they also have cons like restricting freedom; responsive design requires going beyond simple layout changes.
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondDenise Jacobs CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Web 2.0 Expo New York 2011.
Intro to CSS3
Intro to CSS3Denise Jacobs CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
Http _css-tricks
Http _css-tricksDaniel Downs This article discusses how to use CSS to add borders to images rather than editing images directly. It demonstrates how to create single, double, and differently colored double borders using CSS padding and border properties on an <img> tag. Using CSS allows the borders to be changed quickly without reediting images. It also avoids issues with distorted borders when images are zoomed in.
Ad
More from Ryan Cross (20)
Introduction to Content Marketing Strategy for Drupal 
Introduction to Content Marketing Strategy for Drupal Ryan Cross Shanelle Newton Clapham presented on content marketing strategies. Content marketing involves creating and distributing valuable content to engage a target audience with the goal of driving customer actions. Newton discussed how organizations like Air New Zealand have successfully used engaging videos as a form of content marketing. Newton also reviewed how to identify the role of different digital channels in content distribution and presented a case study of a non-profit called A Million Miracles that uses various forms of digital content like live surgery streams and social media to tell compelling stories. Newton emphasized the importance of understanding target audiences and creating content that adds value to their lives.
DrupalCon Wrap Up
DrupalCon Wrap UpRyan Cross Over 450 people attended the event, which raised $66,000 for the Drupal Association. The conference included training sessions on using Drupal, keynote speeches on Drupal 8 and the future of Drupal, and social events like beach cricket and a group photo. A government minister also gave a keynote on open source and collaboration in business and government. Participants contributed code to Drupal core during a code sprint session. The recap highlights the educational, fundraising and community-building aspects of the successful multi-day event.
Sydney Drupal News Feburary 2013
Sydney Drupal News Feburary 2013Ryan Cross The document summarizes the agenda for a Drupal monthly meetup. The meetup will be held at a new venue and finish at 8:15pm due to double booking. There will be lightning talks on content for developers and Varnish. The meetup will also recap DrupalCon Sydney. Finally, attendees are invited to a pub meetup at the Clare Hotel after the event.
Drupal news 2012 October
Drupal news 2012 OctoberRyan Cross The document provides an agenda for an upcoming Drupal meetup. The agenda includes: a welcome, lightning talks on Scotch and presentations on Symfony/Twig and CMI, a demo of Commerce Kickstart 2.0 and Spark, and concluding with time at the pub. It also shares recent Drupal news including upcoming events and releases.
Sydney Drupal News June 2012
Sydney Drupal News June 2012Ryan Cross The document summarizes upcoming Drupal events, recent Drupal news and releases, and learning resources. Key information includes announcements of DrupalCon conferences in Denver, Munich, and Sao Paulo; the upcoming Drupal 8 feature freeze in December and addition of a new Drupal 8 core maintainer; and initiatives like DrupalGive and resources on Learndrupal.org to help develop training materials for Drupal user groups.
Sydney Drupal News April 2012
Sydney Drupal News April 2012Ryan Cross The document summarizes recent Drupal news and events. Upcoming conferences include DrupalCon Munich in August and DrupalCon Sao Paulo in December. There were no core releases in April but contrib releases included Features 7.x-1.0 and Organic Groups 6.x-2.3. Drupal 8 will freeze features in December 2012. Other topics discussed include the Blue Drop website awards, Learn Drupal learning resources, the Google Summer of Code program, and a new Drupalgive initiative highlighting organizations' contributions to Drupal.
Sydney Drupal News August 2012
Sydney Drupal News August 2012Ryan Cross The document summarizes upcoming Drupal events, recent releases, and community initiatives. Key upcoming events include DrupalCon Munich in August, DrupalCon Sao Paulo in December, and the first Asia-Pacific DrupalCon in Sydney in February 2013. Drupal 7.15 was recently released and work is underway on Drupal 8 with a feature freeze scheduled for December 1. New community initiatives aim to improve documentation, governance structures, and highlighting organizations' contributions to Drupal.
Sydney Drupal News July 2012
Sydney Drupal News July 2012Ryan Cross This document summarizes the agenda for an upcoming Drupal monthly meetup. The agenda includes a welcome, news from Ryan Cross, a case study from Magda Kostrewza, time for support and hacking, and then pub. Under news, it outlines upcoming Drupal conferences in Munich and Sao Paulo. It then discusses recent Drupal core and contrib releases. Finally, it provides information on an upcoming DrupalDownUnder conference in Sydney and calls for volunteers for DrupalCon Sydney.
Sydney Drupal News February 2012
Sydney Drupal News February 2012Ryan Cross The document summarizes upcoming Drupal events, including conferences in Denver, Munich, and Sao Paulo, as well as Drupal release news and community initiatives like Drupal poetry and Drupal Star Fleet. Key information includes dates and locations for the three conferences, as well as links to registration and information pages. Updates on the Drupal 8 feature freeze and new core maintainer are also provided.
Sydney Drupal News May 2012
Sydney Drupal News May 2012Ryan Cross The document provides information from Drupal monthly meetups and news including upcoming conferences in North America, Europe, and South America. Key releases are noted for Drupal core, contrib modules, and distributions. Updates are provided on the Drupal 8 release cycle and new initiatives for the core authoring experience and Drupal.org upgrade. Information is also included on Google Summer of Code funding, learning resources, and a new /drupalgive community initiative.
Sydney Drupal News September 2012
Sydney Drupal News September 2012Ryan Cross The document summarizes updates from the September 2012 Drupal monthly meetup. Key points include a recap of DrupalCon Munich, upcoming conferences in Sao Paulo and Sydney, new releases of Commerce Kickstart and Spark distributions, and progress on Drupal 8 including initiatives like CMI and WSCCI. It also provides updates on the Drupal community and learning resources.
Sydney Drupal News March 2012
Sydney Drupal News March 2012Ryan Cross The document is a meeting agenda that includes:
- Welcome and introductions
- News about Drupal including releases, events, and initiatives
- Lightning talks from Geoffrey Roberts and Mike Kelly on various topics
- Breakout sessions and support
- Concluding with a social event at a pub
Lightning Talk: Drupal Feeds
Lightning Talk: Drupal FeedsRyan Cross A short lightning talk about using feeds in Drupal. Given at the March 2012 Sydney Drupal Meetup.
Sydney Drupal News February 2012
Sydney Drupal News February 2012Ryan Cross The document summarizes the agenda for a Drupal monthly meetup. It includes lighting talks from various speakers, a case study, and discussions on Drupal news like releases and events. Key events mentioned are the North American Drupal Conference in Denver in March and the Drupal DownUnder event in Sydney seeking volunteers.
Sydney Drupal News March 2012
Sydney Drupal News March 2012Ryan Cross The document is a meeting agenda that includes:
- Welcome and introductions
- News about Drupal including releases, events, and initiatives
- Lightning talks from Geoffrey Roberts and Mike Kelly on various topics
- Breakout sessions and support
- Concluding with a social event at a pub
Drupal's Roadmap: The Magic 8 Ball
Drupal's Roadmap: The Magic 8 BallRyan Cross The document discusses the need for Drupal to have a defined roadmap. It notes that a roadmap would make it easier to measure progress, communicate goals to everyone, and decide what to work on. However, a roadmap could also potentially stifle innovation by limiting work to only items on the roadmap. Sub-projects of Drupal have already started making their own individual roadmaps. Overall the document debates the pros and cons of Drupal adopting a centralized defined roadmap.
Converting Static Html To Drupal Theme
Converting Static Html To Drupal ThemeRyan Cross How to convert a static html design to a dynamic Drupal theme
Panels 2 Demo
Panels 2 DemoRyan Cross Panels 2 is a module that allows non-technical users to create custom page layouts without coding. It is commonly used to give the front page a unique layout and avoids complex CSS. The document then demonstrates Panels 2 and shows how to use contexts to create a node page override that displays related blog posts by the same author or related news articles on the same topic.
Modify a Theme
Modify a ThemeRyan Cross This document provides instructions for modifying a theme in Drupal 6 by installing it locally, understanding CSS, HTML, and basic design skills, and then using a CSS editor to modify the theme's CSS with no PHP needed. The document also lists two theme names.
Drupal Basics
Drupal BasicsRyan Cross This document provides an introduction to building websites with Drupal in 15 minutes or less. It discusses key Drupal concepts like content types, nodes, CCK for custom fields, Views for advanced querying and listing content, taxonomy for organizing data, themes for customizing displays, and hooks for customizing Drupal's functionality. The document encourages the reader to get started with Drupal and provides links for additional learning resources.
Ad
Recently uploaded (20)
Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...
Limecraft Webinar - 2025.3 release, featuring Content Delivery, Graphic Conte...Maarten Verwaest Slides of Limecraft Webinar on May 8th 2025, where Jonna Kokko and Maarten Verwaest discuss the latest release.
This release includes major enhancements and improvements of the Delivery Workspace, as well as provisions against unintended exposure of Graphic Content, and rolls out the third iteration of dashboards.
Customer cases include Scripted Entertainment (continuing drama) for Warner Bros, as well as AI integration in Avid for ITV Studios Daytime.
Mastering Testing in the Modern F&B Landscape
Mastering Testing in the Modern F&B Landscapemarketing943205 Dive into our presentation to explore the unique software testing challenges the Food and Beverage sector faces today. We’ll walk you through essential best practices for quality assurance and show you exactly how Qyrus, with our intelligent testing platform and innovative AlVerse, provides tailored solutions to help your F&B business master these challenges. Discover how you can ensure quality and innovate with confidence in this exciting digital era.
Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...
Optima Cyber - Maritime Cyber Security - MSSP Services - Manolis Sfakianakis ...Mike Mingos In an era where ships are floating data centers and cybercriminals sail the digital seas, the maritime industry faces unprecedented cyber risks. This presentation, delivered by Mike Mingos during the launch ceremony of Optima Cyber, brings clarity to the evolving threat landscape in shipping — and presents a simple, powerful message: cybersecurity is not optional, it’s strategic.
Optima Cyber is a joint venture between:
• Optima Shipping Services, led by shipowner Dimitris Koukas,
• The Crime Lab, founded by former cybercrime head Manolis Sfakianakis,
• Panagiotis Pierros, security consultant and expert,
• and Tictac Cyber Security, led by Mike Mingos, providing the technical backbone and operational execution.
The event was honored by the presence of Greece’s Minister of Development, Mr. Takis Theodorikakos, signaling the importance of cybersecurity in national maritime competitiveness.
🎯 Key topics covered in the talk:
• Why cyberattacks are now the #1 non-physical threat to maritime operations
• How ransomware and downtime are costing the shipping industry millions
• The 3 essential pillars of maritime protection: Backup, Monitoring (EDR), and Compliance
• The role of managed services in ensuring 24/7 vigilance and recovery
• A real-world promise: “With us, the worst that can happen… is a one-hour delay”
Using a storytelling style inspired by Steve Jobs, the presentation avoids technical jargon and instead focuses on risk, continuity, and the peace of mind every shipping company deserves.
🌊 Whether you’re a shipowner, CIO, fleet operator, or maritime stakeholder, this talk will leave you with:
• A clear understanding of the stakes
• A simple roadmap to protect your fleet
• And a partner who understands your business
📌 Visit:
https://optima-cyber.com
https://tictac.gr
https://mikemingos.gr
Design pattern talk by Kaya Weers - 2025 (v2)
Design pattern talk by Kaya Weers - 2025 (v2)Kaya Weers Talk: A design pattern goes to the supermarket
By: Kaya Weers
Given at various conferences and Meetups
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à GenèveUiPathCommunity Nous vous convions à une nouvelle séance de la communauté UiPath en Suisse romande.
Cette séance sera consacrée à un retour d'expérience de la part d'une organisation non gouvernementale basée à Genève. L'équipe en charge de la plateforme UiPath pour cette NGO nous présentera la variété des automatisations mis en oeuvre au fil des années : de la gestion des donations au support des équipes sur les terrains d'opération.
Au délà des cas d'usage, cette session sera aussi l'opportunité de découvrir comment cette organisation a déployé UiPath Automation Suite et Document Understanding.
Cette session a été diffusée en direct le 7 mai 2025 à 13h00 (CET).
Découvrez toutes nos sessions passées et à venir de la communauté UiPath à l’adresse suivante : https://community.uipath.com/geneva/.
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...Raffi Khatchadourian Efficiency is essential to support responsiveness w.r.t. ever-growing datasets, especially for Deep Learning (DL) systems. DL frameworks have traditionally embraced deferred execution-style DL code that supports symbolic, graph-based Deep Neural Network (DNN) computation. While scalable, such development tends to produce DL code that is error-prone, non-intuitive, and difficult to debug. Consequently, more natural, less error-prone imperative DL frameworks encouraging eager execution have emerged at the expense of run-time performance. While hybrid approaches aim for the "best of both worlds," the challenges in applying them in the real world are largely unknown. We conduct a data-driven analysis of challenges---and resultant bugs---involved in writing reliable yet performant imperative DL code by studying 250 open-source projects, consisting of 19.7 MLOC, along with 470 and 446 manually examined code patches and bug reports, respectively. The results indicate that hybridization: (i) is prone to API misuse, (ii) can result in performance degradation---the opposite of its intention, and (iii) has limited application due to execution mode incompatibility. We put forth several recommendations, best practices, and anti-patterns for effectively hybridizing imperative DL code, potentially benefiting DL practitioners, API designers, tool developers, and educators.
Top-AI-Based-Tools-for-Game-Developers (1).pptx
Top-AI-Based-Tools-for-Game-Developers (1).pptxBR Softech Discover the top AI-powered tools revolutionizing game development in 2025 — from NPC generation and smart environments to AI-driven asset creation. Perfect for studios and indie devs looking to boost creativity and efficiency.
https://www.brsoftech.com/ai-game-development.html
May Patch Tuesday
May Patch TuesdayIvanti Ivanti’s Patch Tuesday breakdown goes beyond patching your applications and brings you the intelligence and guidance needed to prioritize where to focus your attention first. Catch early analysis on our Ivanti blog, then join industry expert Chris Goettl for the Patch Tuesday Webinar Event. There we’ll do a deep dive into each of the bulletins and give guidance on the risks associated with the newly-identified vulnerabilities.
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025Zilliz About this webinar
Join our monthly demo for a technical overview of Zilliz Cloud, a highly scalable and performant vector database service for AI applications
Topics covered
- Zilliz Cloud's scalable architecture
- Key features of the developer-friendly UI
- Security best practices and data privacy
- Highlights from recent product releases
This webinar is an excellent opportunity for developers to learn about Zilliz Cloud's capabilities and how it can support their AI projects. Register now to join our community and stay up-to-date with the latest vector database technology.
Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025
Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025João Esperancinha This is an updated version of the original presentation I did at the LJC in 2024 at the Couchbase offices. This version, tailored for DevoxxUK 2025, explores all of what the original one did, with some extras. How do Virtual Threads can potentially affect the development of resilient services? If you are implementing services in the JVM, odds are that you are using the Spring Framework. As the development of possibilities for the JVM continues, Spring is constantly evolving with it. This presentation was created to spark that discussion and makes us reflect about out available options so that we can do our best to make the best decisions going forward. As an extra, this presentation talks about connecting to databases with JPA or JDBC, what exactly plays in when working with Java Virtual Threads and where they are still limited, what happens with reactive services when using WebFlux alone or in combination with Java Virtual Threads and finally a quick run through Thread Pinning and why it might be irrelevant for the JDK24.
Build With AI - In Person Session Slides.pdf
Build With AI - In Person Session Slides.pdfGoogle Developer Group - Harare Build with AI events are communityled, handson activities hosted by Google Developer Groups and Google Developer Groups on Campus across the world from February 1 to July 31 2025. These events aim to help developers acquire and apply Generative AI skills to build and integrate applications using the latest Google AI technologies, including AI Studio, the Gemini and Gemma family of models, and Vertex AI. This particular event series includes Thematic Hands on Workshop: Guided learning on specific AI tools or topics as well as a prequel to the Hackathon to foster innovation using Google AI tools.
Reimagine How You and Your Team Work with Microsoft 365 Copilot.pptx
Reimagine How You and Your Team Work with Microsoft 365 Copilot.pptxJohn Moore M365 Community Conference 2025 Workshop on Microsoft 365 Copilot
Unlocking Generative AI in your Web Apps
Unlocking Generative AI in your Web AppsMaximiliano Firtman Slides for the session delivered at Devoxx UK 2025 - Londo.
Discover how to seamlessly integrate AI LLM models into your website using cutting-edge techniques like new client-side APIs and cloud services. Learn how to execute AI models in the front-end without incurring cloud fees by leveraging Chrome's Gemini Nano model using the window.ai inference API, or utilizing WebNN, WebGPU, and WebAssembly for open-source models.
This session dives into API integration, token management, secure prompting, and practical demos to get you started with AI on the web.
Unlock the power of AI on the web while having fun along the way!
How to Install & Activate ListGrabber - eGrabber
How to Install & Activate ListGrabber - eGrabbereGrabber ListGrabber: Build Targeted Lists Online in Minutes
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...
Challenges in Migrating Imperative Deep Learning Programs to Graph Execution:...Raffi Khatchadourian