Making Your Own CSS Framework

Apr 14, 20117 likes8,034 views

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.

Technology Design

It’s easier for.. Designers Coders Quick deployment Future upgradability Accessibility Your users Managing far more sites

Who am I? I don’t do much coding anymore… I don’t need to.

Under Pressure In one of the largest colleges at the U of M Managing around 200 web sites Size of web team going from 5, down to 2 Uncertain of future capacity

What were our priorities? Flexible Horizontal and vertical navs Individuality: Different colors and pictures Accessible Use H tags correctly, and consistently Jump to content and nav is consistent Interchangeable Can pull one piece out of a site, and drop it into another… easily

Weighing our needs Where is the balance between flexibility, and time constraint? Is there anything you are sure will be on every page? What do you suspect will be on every page?

What’s the same on every page? Logos Banners Page width Search Footer Nav (kind of) content

Building in the frame Building those main boxes you use all the time Header Footer nav

1 st Step -CSS Reset- h1, p, div, ul, li { margin: 0; padding: 0; border: 0; }

The Container div#container { width: 960px; margin: 0 auto; text-align: left; }

Department Header div#header { width: 960px; }

U of M Header div#UMNheader { width: 960px; }

Navigation and Content div#nav { width: 210px; float: left; } div#content { width: 750px; float: left; }

Building the flexible parts Columns div.half { width: 360px; float: left; } div.third { width: 240px; float: left; } Content Styling div#content p { margin:10px 25px; padding:0; } div#content ul { margin:10px 25px 10px 25px; padding:0; list-style-type:disc; }

The base of your framework: CSS Reset Structural elements (the box model) To future proof, make them match HTML5 Major accessibility pieces Tex styles Image Styles Columns for layout (furthering the box model) A basic print style sheet

Keep out of the framework Colors Images Header images Background images Stylization of the nav

Make some widgets (don’t sweat the small stuff)

How to do it wrong … or “My first version”

Version 1 Too Constricting, No Individuality

To reiterate, it’s easier for.. Designers Coders Quick deployment Future upgradability Accessibility Your users Managing far more sites

Once you’ve got the basics… add some flare…

Interchangeable flare Emphasis Boxes Pop up video boxes Slide shows Like office space “Flare”

Contact me… Twitter: @dansag Email: dansag@umn.edu Resources… The CSS Framework http://intranet.cehd.umn.edu/demos/dan/MWC2011/core2011.css Example page http://intranet.cehd.umn.edu/demos/dan/MWC2011/default.html CSS Reset http://meyerweb.com/eric/tools/css/reset/

The document discusses the challenges and processes involved in designing an enterprise CSS framework, focusing on Salesforce's Lightning Design System. It emphasizes the importance of accessibility, modular components, and efficient workflows while incorporating design tokens for consistency. The presentation also highlights the need for clear documentation and the integration of design systems to enhance user experience and application development speed.

Roll Your Own CSS FrameworkMike Aparicio

This document discusses rolling your own CSS framework by starting from scratch rather than using an existing framework. It recommends using CSS preprocessors like SASS or LESS to write CSS code. It also provides many links to additional CSS resources on topics like responsive design, grids, typography, and existing frameworks. The document is presented by Mike Aparicio and encourages the reader to contact him with any other questions.

How to develop a CSS FrameworkOlivier Besson

The document discusses steps for developing a CSS framework, including defining layout rules, framework files, resets, grids and units, forms, tables, and generic classes. The framework is designed to be easily reusable, have a short source code, increase productivity, and decrease bugs. Key steps involve defining the layout, grids and units, resets, typography, forms and tables, and generic classes through separate CSS files.

CSS3 Media QueriesRuss Weakley

Media queries allow CSS styles to be applied conditionally based on characteristics of the device viewing the content, like screen width. They provide a way to target specific devices and change layouts without changing the HTML. The document discusses the syntax of media queries, including using media types, features, expressions, and keywords. It provides examples of using media queries to load different style sheets or apply different CSS rules for different screen widths.

Lightning fast sasschriseppstein

- libSass is a C/C++ implementation of Sass that compiles Sass much faster than the Ruby implementation. It allows Sass to be used by more developers and integrated with JavaScript build tools. - Eyeglass is a Node.js module that allows Sass modules to be distributed through npm and imported into Sass files. It provides file system access and tools for defining Sass functions in JavaScript. - Eyeglass aims to recreate popular Compass features like sprites and make them compatible with libSass and distributed through npm modules. This will provide an ecosystem for shared Sass code and assets without relying on Ruby.

Responsive WebsitesJoe Seifi

The document discusses the importance and techniques of responsive web design, emphasizing that websites must adapt to various mobile devices due to the increasing number of mobile internet users. It highlights best practices such as mobile-first design, flexible layouts, media queries, and the need for optimized loading times to enhance user experience. Resources for testing, coding patterns, and future-friendly approaches are also provided to help designers create effective responsive websites.

Responsive Web Design with HTML5 and CSS3Kannika Kong

This document discusses responsive web design using HTML5 and CSS3. It defines responsive web design as websites that render content tailored to the device accessing it. It covers using HTML5 for multimedia, geolocation and offline capabilities. CSS3 enables responsive markup through selectors, web fonts, columns and transitions. Media queries allow specifying styles based on screen size. The document advocates designing first for small screens and using systems thinking. Advantages include optimized user experience across devices while disadvantages include limited queries and need for separate mobile optimizations.

Future proof rwdAdam Chambers

The document discusses best practices for future-proof responsive web design (RWD), emphasizing elastic layouts, mobile-first strategies, progressive enhancement, and modular CSS. It outlines the importance of relative sizing with 'em' and 'rem', using minimal frameworks, and efficient dependency management with tools like Bower and Grunt. Additionally, it highlights the necessity of optimizing rendering performance for client-side applications.

Controlling Web TypographyTrent Walton

The document discusses controlling web typography through CSS properties and principles. It demonstrates how visual interest can be achieved using basic CSS properties like font-size, color, and text-transform. Letterspacing, line-height and other properties are shown to manipulate text. Web fonts have increased designers' interest in typography. JavaScript libraries can target letters, words and lines for fine-grained styling control. Future possibilities discussed include better support for text effects and more specific CSS selectors.

Responsive designHock Leng PUAH

The document discusses responsive web design which involves designing websites that automatically adapt their layout to different screen sizes and devices. It covers scoping a responsive design by considering the context of use and prioritizing important content. Guidelines are provided for wireframing grid structures and layouts for different screen widths as well as best practices for text, buttons, forms and other elements on responsive sites.

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.

Responsive & Responsible Web Design in DNNgravityworksdd

The document outlines best practices for implementing responsive web design with a focus on fluid layouts, media queries, and mobile-first priorities. It emphasizes the importance of content prioritization, using HTML wireframes, and creating a style guide for efficient development. Various strategies for creating responsive navigation menus and managing media content are discussed, along with resources for further learning.

Responsive Web DesignDebra Shapiro

This document provides an overview of responsive web design. It defines responsive web design as an approach that aims to provide optimal viewing experiences across different devices. It discusses the history and alternatives to responsive design. The key aspects of responsive design are then explained, including fluid grids, flexible images, CSS media queries, and using the viewport meta tag. Tools for responsive design like Bootstrap and techniques like fluid layouts are also covered. Finally, resources for further learning about responsive web design are provided.

Bootstrap Framework Yaowaluck Promdee

The document provides an overview of Bootstrap, a leading HTML, CSS, and JavaScript framework for creating responsive web projects, emphasizing its mobile-first features and ease of use. Important components such as the grid system, navigation bars, forms, and various design elements are discussed, along with practical examples and code snippets for implementation. It concludes with an assignment to create a web page on web design principles using Bootstrap.

CSS SystemsNatalie Downe

The document discusses strategies for writing maintainable CSS, emphasizing the importance of a structured approach that includes clear markup patterns and a shared vocabulary for developers. It highlights best practices such as ordering rule blocks, grouping styles logically, and avoiding browser hacks while preparing for future scalability. Additionally, it stresses the need for thorough documentation and effective communication during the handover process to ensure quality and maintainability.

Client responsive designshmulik-tal

The document discusses responsive web design and mobile web development. It covers technologies like HTML5, CSS3, JavaScript and frameworks like jQuery for building responsive websites that work across different screen sizes and devices. It also talks about using CSS3 media queries and responsive layout techniques to dynamically adapt websites for various viewports and browsers including older versions of Internet Explorer.

CSS in ReactJoe Seifi

This document discusses different approaches for using CSS in React applications. It begins by outlining some of the issues with plain CSS, including lack of encapsulation and global namespace pollution. It then examines different methodologies for organizing CSS, including OOCSS, BEM, and SUIT CSS. Next, it covers pre/post-processors like Sass, LESS, and PostCSS. The document dives into examples of implementing styles in React using inline styles, CSS modules, Radium, and Styled Components. For each approach, it highlights the syntax and notes advantages and limitations. Finally, it closes with a brief look at emerging technologies that may impact future CSS practices.

Responsive Web Design: Tips and TricksGautam Krishnan

The document provides practical tips for implementing responsive web design, discussing essential concepts such as simple DOM structure, media queries, and breakpoints. It emphasizes the importance of using appropriate CSS properties like box-sizing, max/min attributes, and relative units (em/rem) to enhance user experience across devices. Additionally, it cautions against certain practices like using hover states and extensive jQuery bindings that can negatively affect performance.

Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens

The document discusses responsive design techniques essential for optimizing websites for various screen sizes and devices. It emphasizes the importance of using viewport meta tags and media queries to ensure a coherent and functional user experience across platforms. Additionally, it addresses the challenges of high-resolution screens and provides best practices for creating adaptable content layouts.

Managing responsive websites with css preprocessors. The University of Akron

The document provides a comprehensive guide on designing responsive websites using CSS preprocessors like SASS, Compass, and LESS. It outlines essential concepts such as media queries, mixins, nesting, and variables, alongside practical usage of SASS commands for compiling stylesheets. Additionally, it lists tools and resources for maximizing productivity in CSS development, including popular frameworks and online platforms.

CSS in React - The Good, The Bad, and The UglyJoe Seifi

The document discusses various aspects of CSS in React, including best practices, developer experience, and the importance of separation of concerns. It highlights issues like naming conventions, DOM updates, and different methodologies for styling such as inline styles, CSS modules, and styled components. Key components mentioned include browser support, debugging features, and innovations like CSS3 variables and web components.

CSS ResetRuss Weakley

CSS resets aim to standardize styles across different browsers by removing default styles, though they can increase file size and cause navigation issues. Common techniques include removing padding and margins from key elements, setting borders to zero, and defining base styles for typography. The effectiveness of CSS resets is debated, with some preferring lighter, targeted resets to minimize potential drawbacks.

새로운 웹 스타일링, 안 본 사람 없게 해주세요NAVER Engineering

The document discusses new web styling features presented at the Chrome Dev Summit 2019 including scroll-snap for native scrolling, :focus-within for accessibility, @media (prefers-*) for adjusting to user preferences, logical properties for directionality, sticky positioning, backdrop filters, :is() for matching selectors, gap for flexbox, and CSS Houdini for low-level styling APIs. It provides examples and explanations of each new feature.

Responsive Web DesignSayanee Basu

The document discusses responsive web design. It defines responsive design as being adaptive, fluid, flexible and flowing across devices. It recommends using fluid layouts with percentages instead of pixels, media queries to target different screen sizes, and flexible media like images that scale based on the viewport width. It provides examples of responsive websites and tools used like browsers, text editors, simulators and coding. It outlines the key aspects of responsive design including fluid layouts, media queries, and flexible media. It also lists additional resources like blogs, books and videos for learning more about responsive design.

Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig

This document summarizes different vector graphic options for use on the web. It discusses the differences between vector and raster graphics, and why vectors are preferable for resolution independence and smaller file sizes. It then examines SVG, Canvas, VML, and CSS3 as vector graphic options, outlining browser support, APIs, and common uses for each. While SVG is ideal theoretically, browser support is still limited, so libraries like SVG Web and Raphael.js are recommended to abstract cross-browser differences. In the end, SVG is generally better than Canvas for interactive graphics with events, while Canvas may be better for full-screen animations and games.

SVG For Web Designers (and Developers) Sara Soueidan

1. The document discusses using SVG for web design, including creating SVG images, optimizing them, and embedding them onto web pages. 2. Designers are advised to use simple shapes over complex paths and to simplify paths when creating SVG images. 3. SVG images can be combined into a single file and referenced on web pages using the <symbol> and <use> elements, providing a method of "spriting" SVG images.

Intro to CSS3Denise Jacobs

The document provides an overview of CSS3, highlighting its new features, including modularity, colors, cross-browser compatibility, and various properties like web fonts and visual effects. It discusses the framework for implementing CSS3 correctly in different browsers and offers resources and tools for better coding practices. Additionally, it addresses challenges with older browsers, particularly Internet Explorer, and details how to ensure CSS3 functionalities are reliably rendered across platforms.

Learn svgFitBlar Mit

This document introduces Scalable Vector Graphics (SVG) and provides an overview of its history, capabilities, and structure. Key points include: - SVG was developed as an open standard by the W3C to provide rich, reusable visual content for the web using XML. - SVG allows for vector graphics that can be scaled, manipulated via scripting, styled with CSS, and more. It provides many advantages over raster graphics. - As an XML format, SVG files are small in size, resolution-independent, and can be dynamically generated and styled on the client-side via JavaScript. - The document outlines SVG's emergence and development timeline, its structure as an XML language, and its

Grid system introductionananda gunadharma

The document discusses grid systems in web design. It explains that grid systems use ratios and measurements to construct layouts with fixed or flexible widths. For fixed grids, the canvas size is based on screen resolution, while flexible grids scale to browser windows. The document also describes creating grids in Photoshop, using background images for alignment, and the 960 Grid System CSS framework which enables rapid prototyping with 12 or 16 column grids within a 960px container.

Inkscape for web and UI mockupsDonna Benjamin

More Related Content

What's hot (20)

Controlling Web TypographyTrent Walton

Responsive designHock Leng PUAH

Adobe MAX 2008: HTML/CSS + FireworksNathan Smith

Responsive & Responsible Web Design in DNNgravityworksdd

Responsive Web DesignDebra Shapiro

Bootstrap Framework Yaowaluck Promdee

CSS SystemsNatalie Downe

Client responsive designshmulik-tal

CSS in ReactJoe Seifi

Responsive Web Design: Tips and TricksGautam Krishnan

Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens

Managing responsive websites with css preprocessors. The University of Akron

CSS in React - The Good, The Bad, and The UglyJoe Seifi

CSS ResetRuss Weakley

새로운 웹 스타일링, 안 본 사람 없게 해주세요NAVER Engineering

Responsive Web DesignSayanee Basu

Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig

SVG For Web Designers (and Developers) Sara Soueidan

Intro to CSS3Denise Jacobs

Learn svgFitBlar Mit

Controlling Web TypographyTrent Walton

Responsive designHock Leng PUAH

Adobe MAX 2008: HTML/CSS + FireworksNathan Smith

Responsive & Responsible Web Design in DNNgravityworksdd

Responsive Web DesignDebra Shapiro

Bootstrap Framework Yaowaluck Promdee

CSS SystemsNatalie Downe

Client responsive designshmulik-tal

CSS in ReactJoe Seifi

Responsive Web Design: Tips and TricksGautam Krishnan

Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens

Managing responsive websites with css preprocessors. The University of Akron

CSS in React - The Good, The Bad, and The UglyJoe Seifi

CSS ResetRuss Weakley

새로운 웹 스타일링, 안 본 사람 없게 해주세요NAVER Engineering

Responsive Web DesignSayanee Basu

Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig

SVG For Web Designers (and Developers) Sara Soueidan

Intro to CSS3Denise Jacobs

Learn svgFitBlar Mit

Viewers also liked (8)

Grid system introductionananda gunadharma

Inkscape for web and UI mockupsDonna Benjamin

Lessons Learned From Building Your Own CSS Frameworksonniesedge

Charlie Owen discusses his experience building a CSS framework called Loom, highlighting key elements such as design variables and the ITCSS methodology to manage specificity. He emphasizes the importance of setting achievable goals, being open to learning from others, avoiding over-engineering, and the value of thorough documentation. Additionally, he advises against rigid practices and premature optimization while maintaining a sense of pride in one's work.

Media queries and frameworksNicole Ryan

This document discusses responsive design and CSS frameworks. It explains that responsive design allows pages to adapt to different screen sizes using liquid layouts, scaling images, viewport meta tags, and media queries. Media queries allow applying styles based on device capabilities. CSS frameworks provide pre-built CSS classes and tools to make working with CSS easier. Popular frameworks include Bootstrap and Blueprint, which offer grid systems for multi-column layouts. CSS preprocessors allow variables, inheritance, and other programming techniques to be used with CSS.

Seven Steps to Creating a FrameworkRob Philibert

Foundation: Prototype to ProductionZURB

This document discusses using the Foundation front-end framework for both prototyping and production. It notes that Foundation is useful for prototyping because it allows for low-fidelity, quick iteration optimized for development speed. However, it also argues that Foundation is suitable for production use, as it results in high-fidelity, stable, highly customized sites and apps optimized for end user speed. The document promotes Foundation by highlighting its large community, wide usage in both small and large projects, and emphasis on best practices like responsive design, accessibility, and modern coding standards.

Responsive Design & CSS FrameworksG C

This document discusses responsive design and CSS frameworks. It defines responsive design as designing websites that respond to different screen sizes, platforms, and orientations. Responsive design uses media queries and CSS techniques to create a single website that adjusts its layout and features based on how it is viewed. Some key benefits of responsive design include being content focused, cost effective, cross-platform, easy to manage, and SEO friendly. The document then discusses responsive strategies like breaking points, dynamic fonts, flexible grid layouts, and content choreography. It also covers responsive design tools like the developer toolbar and responsive design mode in browsers. Finally, it lists some popular CSS frameworks and other libraries that can be used for responsive design.

Atomic designBrad Frost

The document discusses the concept of Atomic Design in creating design systems, emphasizing the importance of components such as atoms, molecules, organisms, templates, and pages in the web design process. It highlights the benefits and challenges of front-end style guides and responsive deliverables while introducing Pattern Lab as a tool for building and maintaining these design systems. The author encourages a methodological approach to design, promoting consistency and collaboration among designers and developers.

Grid system introductionananda gunadharma

Inkscape for web and UI mockupsDonna Benjamin

Lessons Learned From Building Your Own CSS Frameworksonniesedge

Media queries and frameworksNicole Ryan

Seven Steps to Creating a FrameworkRob Philibert

Foundation: Prototype to ProductionZURB

Responsive Design & CSS FrameworksG C

Atomic designBrad Frost

Similar to Making Your Own CSS Framework (20)

Css groupLeslie Steele

This document summarizes a CSS project created by Sonia Leng and Leslie Steele. They modeled their layout after a sample from CSS Zen Garden and outlined the key CSS rules used, including div IDs to define sections and classes to style navigation buttons. Benefits of CSS layouts are that they allow formatting pages consistently using one external style sheet, improve accessibility, and reduce file sizes. Key considerations for CSS use include site uniformity, element positioning, and formatting links and spacing.

Css groupLeslie Steele

This document summarizes a CSS project created by Sonia Leng and Leslie Steele. They modeled their layout after a sample from CSS Zen Garden and outlined the key CSS rules used, including div IDs to define sections and classes to style navigation links and text. Benefits of CSS layouts are that they allow formatting pages consistently using one external style sheet, improve accessibility, and reduce file sizes. Key considerations for CSS use include site uniformity, element positioning, and formatting links, text, and spacing.

Css groupSonia Leng

01 Introduction To CSScrgwbr

This document provides an introduction to CSS (Cascading Style Sheets) including: - What CSS allows you to change (appearance and layout of HTML) - Key CSS concepts like selectors, colors specified as hex codes, the box model - Common CSS properties for fonts, colors, spacing, dimensions - Examples of CSS rules and using the Chrome Dev Tools to experiment - Shorthand vs longhand property notation and common units like pixels and percentages - How CSS manages complexity through modules, layers and declarative programming

Slice and DiceDoncho Minkov

This document provides steps for converting a web site design from a PSD image to XHTML and CSS. It discusses identifying sections, choosing a layout type, distinguishing content from style, and testing across browsers. Floating DIVs and tables are recommended over frames. Details like images types, centering content, and vertical alignment are covered. Case studies demonstrate analyzing images to extract text vs images and small design details. Homework assigns recreating sample web page designs using semantic HTML and CSS only.

Web programming cssUma mohan

The document discusses cascading style sheets (CSS) and web programming. CSS is a stylesheet language used to design webpages and make them presentable by applying styles independently of HTML. There are three types of CSS: inline, internal/embedded, and external. CSS is important for web development as it increases website standards and user experience. CSS allows web developers to style HTML elements and bring designs to life. Basic CSS formatting includes using internal CSS by adding <style> tags within the <head> of an HTML page. CSS properties control element styles like color, size, position, and more.

David WeliverPhilip Taylor

CSS (Cascading Style Sheets) is a coding language that is used to format and style HTML documents. It allows you to control things like fonts, colors, layout, and formatting on web pages without having to insert HTML tags. The document provides an overview of CSS syntax and properties, and how to use CSS to style elements like text, links, backgrounds, borders, padding and margins. It also discusses tools for working with CSS like inspect element and text editors, and provides examples of CSS tricks for rounded corners, gradients, lists and conditional formatting. Resources for learning more about CSS are included at the end.

Web design-workflowPeter Kaizer

This document discusses web design workflow and front-end development. It covers the layers of front-end development including HTML, CSS, JavaScript, grids, and frameworks. It also discusses designing static comps versus in the browser, the mobile revolution and responsive design. The document then discusses information architecture, wireframes, and the languages of web design including HTML, CSS, JavaScript. It also discusses grids, frameworks, SASS/LESS, and responsive design.

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.

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell

Here are the steps to build a basic horizontal navigation menu bar: 1. Create an unordered list <ul> with class="menu" 2. Add list items <li> for each menu item 3. Style the <ul> with display:inline-block and border-bottom 4. Style the <li> with display:inline-block, padding and hover effect 5. Add a class="current" to highlight the active page 6. Use a border-left on .current to create a left arrow Let me know if any part needs more explanation! Building menus is a common task and these techniques will serve you well.

CSS For Codersggfergu

This document provides an introduction to CSS (Cascading Style Sheets) for web developers. It discusses CSS terminology like selectors using id and class attributes. It also covers how to select and style groups of elements and descendants. The document gives examples of using CSS for colors, backgrounds, typography, layout using the box model, and print styles. It emphasizes clean separation of code and content and providing hooks for designers to easily style pages.

Organize Your Website With Advanced CSS TricksAndolasoft Inc

The document discusses advanced CSS techniques for web development, emphasizing the importance of CSS in enhancing website design and layout. It includes tips on utilizing features like flexbox, masking, and responsive grids to optimize user experience and maintain modern aesthetics. Additionally, it highlights the significance of consistency and specificity in CSS to efficiently organize web content.

The Future State of LayoutStephen Hay

The document discusses the future of CSS layout mechanisms. It describes several proposed CSS modules for layout, including Grid Positioning, Flexible Box, and Template Layout. Each provides advantages for creating explicit grids and separating presentation from structure. The document highlights how these new layout capabilities could improve web design and development by establishing CSS as the framework. It concludes by encouraging learning more and getting involved in the ongoing CSS layout standards work.

Designing CSS Layouts for the Flexible WebZoe Gillenwater

- The document discusses designing CSS layouts for flexible web design that adapt to different screen sizes and text sizes. - It recommends avoiding fixed-width layouts and designs, irregular shapes defining text areas, images that don't scale with text, and enforcing horizontal alignment across columns. - Solutions presented include using liquid/elastic/hybrid designs, tiling patterns, variable cropping/masking of images, scrollbars, and accepting some misalignment of content across columns on smaller screens.

Stepping into the front end: Part 1Tahin Rahman

How to get a serious front end designer jobKarlis Upitis

This document outlines essential skills and knowledge for securing a front-end designer job, emphasizing CSS fundamentals and modular design principles. It provides practical insights into common coding challenges, tools like Sass, and industry standards such as WCAG 2.0 compliance. Additionally, it encourages ongoing learning and staying updated with the latest design trends through various resources.

Http _css-tricksDaniel Downs

Web Building Blocksjoegilbert

The document discusses the basic building blocks of web development: HTML for content and structure, CSS for presentation and styling, and content management systems (CMS) for managing large websites. It provides an overview of HTML elements and tags, CSS selectors, properties and positioning, and popular CMS like WordPress. The goal is to understand these fundamental technologies even if you rely on CMS and tools, since they form the underlying architecture of all websites.

Introduction to CSS3Doris Chen

The document presents an introduction to CSS3, highlighting its importance as a key technology in the HTML5 family, which improves web design efficiency and responsiveness. It details new features including media queries, flexible box layout, grid layout, and multi-column layouts, as well as various tools and resources for implementing CSS3 in Windows 8 apps. The summary emphasizes the advantages of adaptive design for a diverse range of devices and audiences.

Getting to Grips with Firebug - Anthony Hortin - WordCamp SydneyWordCamp Sydney

Firebug is a web development tool that integrates with Firefox to allow users to edit, debug, and monitor CSS, HTML, and JavaScript on web pages. It provides features like inspecting page elements, editing HTML and CSS, debugging JavaScript, and analyzing network activity. Using Firebug, users can find and fix errors on their web pages, experiment with changes without breaking the site, and make simple updates without needing a developer.

Css groupLeslie Steele

Css groupSonia Leng

01 Introduction To CSScrgwbr

Slice and DiceDoncho Minkov

Web programming cssUma mohan

David WeliverPhilip Taylor

Web design-workflowPeter Kaizer

Roadmap 01quangnv17071980

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell

CSS For Codersggfergu

Organize Your Website With Advanced CSS TricksAndolasoft Inc

The Future State of LayoutStephen Hay

Designing CSS Layouts for the Flexible WebZoe Gillenwater

Stepping into the front end: Part 1Tahin Rahman

How to get a serious front end designer jobKarlis Upitis

Http _css-tricksDaniel Downs

Web Building Blocksjoegilbert

Introduction to CSS3Doris Chen

Getting to Grips with Firebug - Anthony Hortin - WordCamp SydneyWordCamp Sydney

Recently uploaded (20)

Database Benchmarking for Performance Masterclass: Session 2 - Data Modeling ...ScyllaDB

Daily Lesson Log MATATAG ICT TEchnology 8LOIDAALMAZAN3

cnc-processing-centers-centateq-p-110-en.pdfAmirStern2

מרכז עיבודים תעשייתי בעל 3/4/5 צירים, עד 22 החלפות כלים עם כל אפשרויות העיבוד הדרושות. בעל שטח עבודה גדול ומחשב נוח וקל להפעלה בשפה העברית/רוסית/אנגלית/ספרדית/ערבית ועוד.. מסוגל לבצע פעולות עיבוד שונות המתאימות לענפים שונים: קידוח אנכי, אופקי, ניסור, וכרסום אנכי.

9-1-1 Addressing: End-to-End Automation Using FMESafe Software

This session will cover a common use case for local and state/provincial governments who create and/or maintain their 9-1-1 addressing data, particularly address points and road centerlines. In this session, you'll learn how FME has helped Shelby County 9-1-1 (TN) automate the 9-1-1 addressing process; including automatically assigning attributes from disparate sources, on-the-fly QAQC of said data, and reporting. The FME logic that this presentation will cover includes: Table joins using attributes and geometry, Looping in custom transformers, Working with lists and Change detection.

"Scaling in space and time with Temporal", Andriy Lupa.pdfFwdays

Design patterns like Event Sourcing and Event Streaming have long become standards for building real-time analytics systems. However, when the system load becomes nonlinear with fast and often unpredictable spikes, it's crucial to respond quickly in order not to lose real-time operating itself. In this talk, I’ll share my experience implementing and using a tool like Temporal.io. We'll explore the evolution of our system for maintaining real-time report generation and discuss how we use Temporal both for short-lived pipelines and long-running background tasks.

Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdfEarley Information Science

As AI reshapes expectations in retail and B2B commerce, organizations are recognizing a critical reality: meaningful AI outcomes depend on well-structured, adaptable infrastructure. In this session, Seth Earley is joined by Phil Ryan - AI strategist, search technologist, and founder of Glass Leopard Technologies - for a candid conversation on what it truly means to engineer systems for scale, agility, and intelligence. Phil draws on more than two decades of experience leading search and AI initiatives for enterprise organizations. Together, he and Seth explore the challenges businesses face when legacy architectures limit personalization, agility, and real-time decisioning - and what needs to change to support agentic technologies and next-best-action capabilities. Key themes from the webinar include: Composability as a prerequisite for AI - Why modular, loosely coupled systems are essential for adapting to rapid innovation and evolving business needs Search and relevance as foundational to AI - How techniques honed-in enterprise search have laid the groundwork for more responsive and intelligent customer experiences From MDM and CDP to agentic systems - How data platforms are evolving to support richer customer context and dynamic orchestration Engineering for business alignment - Why successful AI programs require architectural decisions grounded in measurable outcomes The conversation is practical and forward-looking, connecting deep technical understanding with real-world business needs. Whether you’re modernizing your commerce stack or exploring how AI can enhance product discovery, personalization, or customer journeys, this session provides a clear-eyed view of the capabilities, constraints, and priorities that matter most.

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

Quantum AI: Where Impossible Becomes ProbableSaikat Basu

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

Securing AI - There Is No Try, Only Do!.pdfPriyanka Aash

Hyderabad MuleSoft In-Person Meetup (June 21, 2025) SlidesRavi Tamada

"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...Fwdays

Lessons Learned from Developing Secure AI Workflows.pdfPriyanka Aash

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

Let's talk about our history. How we started the project with a small vector database of less than 2 million records. Later, we received a request for +100 million records, then another +100... And so gradually we reached almost 1 billion. Standard tools were quickly running out of steam - we were running into performance, index size, and very limited resources. After a long series of trials and errors, we built our own low-cost cluster, which today stably processes thousands of queries to more than 1B vectors.

The Future of Product Management in AI ERA.pdfAlyona Owens

Hi, I’m Aly Owens, I have a special pleasure to stand here as over a decade ago I graduated from CityU as an international student with an MBA program. I enjoyed the diversity of the school, ability to work and study, the network that came with being here, and of course the price tag for students here has always been more affordable than most around. Since then I have worked for major corporations like T-Mobile and Microsoft and many more, and I have founded a startup. I've also been teaching product management to ensure my students save time and money to get to the same level as me faster avoiding popular mistakes. Today as I’ve transitioned to teaching and focusing on the startup, I hear everybody being concerned about Ai stealing their jobs… We’ll talk about it shortly. But before that, I want to take you back to 1997. One of my favorite movies is “Fifth Element”. It wowed me with futuristic predictions when I was a kid and I’m impressed by the number of these predictions that have already come true. Self-driving cars, video calls and smart TV, personalized ads and identity scanning. Sci-fi movies and books gave us many ideas and some are being implemented as we speak. But we often get ahead of ourselves: Flying cars,Colonized planets, Human-like AI: not yet, Time travel, Mind-machine neural interfaces for everyone: Only in experimental stages (e.g. Neuralink). Cyberpunk dystopias: Some vibes (neon signs + inequality + surveillance), but not total dystopia (thankfully). On the bright side, we predict that the working hours should drop as Ai becomes our helper and there shouldn’t be a need to work 8 hours/day. Nobody knows for sure but we can require that from legislation. Instead of waiting to see what the government and billionaires come up with, I say we should design our own future. So, we as humans, when we don’t know something - fear takes over. The same thing happened during the industrial revolution. In the Industrial Era, machines didn’t steal jobs—they transformed them but people were scared about their jobs. The AI era is making similar changes except it feels like robots will take the center stage instead of a human. First off, even when it comes to the hottest space in the military - drones, Ai does a fraction of work. AI algorithms enable real-time decision-making, obstacle avoidance, and mission optimization making drones far more autonomous and capable than traditional remote-controlled aircraft. Key technologies include computer vision for object detection, GPS-enhanced navigation, and neural networks for learning and adaptation. But guess what? There are only 2 companies right now that utilize Ai in drones to make autonomous decisions - Skydio and DJI.

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

👉𝗡𝗼𝘁𝗲:𝗖𝗼𝗽𝘆 𝗹𝗶𝗻𝗸 & 𝗽𝗮𝘀𝘁𝗲 𝗶𝗻𝘁𝗼 𝗚𝗼𝗼𝗴𝗹𝗲 𝗻𝗲𝘄 𝘁𝗮𝗯> https://pcprocore.com/ 👈◀ CapCut Pro Crack is a powerful tool that has taken the digital world by storm, offering users a fully unlocked experience that unleashes their creativity. With its user-friendly interface and advanced features, it’s no wonder why aspiring videographers are turning to this software for their projects.

Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdfPriyanka Aash

Database Benchmarking for Performance Masterclass: Session 2 - Data Modeling ...ScyllaDB

Daily Lesson Log MATATAG ICT TEchnology 8LOIDAALMAZAN3

cnc-processing-centers-centateq-p-110-en.pdfAmirStern2

9-1-1 Addressing: End-to-End Automation Using FMESafe Software

"Scaling in space and time with Temporal", Andriy Lupa.pdfFwdays

Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdfEarley Information Science

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...revolcs10

Quantum AI: Where Impossible Becomes ProbableSaikat Basu

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

Securing AI - There Is No Try, Only Do!.pdfPriyanka Aash

Hyderabad MuleSoft In-Person Meetup (June 21, 2025) SlidesRavi Tamada

"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...Fwdays

Lessons Learned from Developing Secure AI Workflows.pdfPriyanka Aash

" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...Fwdays

The Future of Product Management in AI ERA.pdfAlyona Owens

CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore

Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdfPriyanka Aash

Making Your Own CSS Framework

1. Making your own CSS Framework

2. Why Make One?

3. It’s easier for.. Designers Coders Quick deployment Future upgradability Accessibility Your users Managing far more sites

4. Who am I? I don’t do much coding anymore… I don’t need to.

5. Under Pressure In one of the largest colleges at the U of M Managing around 200 web sites Size of web team going from 5, down to 2 Uncertain of future capacity

6. What were our priorities? Flexible Horizontal and vertical navs Individuality: Different colors and pictures Accessible Use H tags correctly, and consistently Jump to content and nav is consistent Interchangeable Can pull one piece out of a site, and drop it into another… easily

7. Weighing our needs Where is the balance between flexibility, and time constraint? Is there anything you are sure will be on every page? What do you suspect will be on every page?

8. What’s the same on every page? Logos Banners Page width Search Footer Nav (kind of) content

9. Getting Started

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21. Wow, what an ugly site!

22.

23.

24.

25.

26.

27. Building in the frame Building those main boxes you use all the time Header Footer nav

28. 1 st Step -CSS Reset- h1, p, div, ul, li { margin: 0; padding: 0; border: 0; }

29. The Container div#container { width: 960px; margin: 0 auto; text-align: left; }

30. Department Header div#header { width: 960px; }

31. U of M Header div#UMNheader { width: 960px; }

32. Navigation and Content div#nav { width: 210px; float: left; } div#content { width: 750px; float: left; }

33. Footer div#footer { width: 960px; }

34. Margins

35. Building the flexible parts Columns div.half { width: 360px; float: left; } div.third { width: 240px; float: left; } Content Styling div#content p { margin:10px 25px; padding:0; } div#content ul { margin:10px 25px 10px 25px; padding:0; list-style-type:disc; }

36.

37. Wow… that’s really ugly.

38.

39.

40. The base of your framework: CSS Reset Structural elements (the box model) To future proof, make them match HTML5 Major accessibility pieces Tex styles Image Styles Columns for layout (furthering the box model) A basic print style sheet

41. Keep out of the framework Colors Images Header images Background images Stylization of the nav

42.

43. Make some widgets (don’t sweat the small stuff)

44.

45.

46.

47. Design freedom

48.

49.

50.

51. How to do it wrong … or “My first version”

52. Version 1 Too Constricting, No Individuality

53. Version 1 Too Constricting, No Individuality

54. Version 1 Too Constricting, No Individuality

55. To reiterate, it’s easier for.. Designers Coders Quick deployment Future upgradability Accessibility Your users Managing far more sites

56. Once you’ve got the basics… add some flare…

57. Interchangeable flare Emphasis Boxes Pop up video boxes Slide shows Like office space “Flare”

58. Questions? @dansag [email_address]

59. Contact me… Twitter: @dansag Email: [email protected] Resources… The CSS Framework http://intranet.cehd.umn.edu/demos/dan/MWC2011/core2011.css Example page http://intranet.cehd.umn.edu/demos/dan/MWC2011/default.html CSS Reset http://meyerweb.com/eric/tools/css/reset/

Editor's Notes

#3: You separate out all the deeper understanding of CSS from the design. Even if you your self are doing the design, you don’t have to Make a new design every time Figure out how to modify an existing design Get stuck with a new design You can effectively start form scratch, with a big head start
#5: I’m an Information Architect and Project Manager I don’t code as much anymore, because I don’t really need to.. The designer does the designs… and puts in codes for colors and making it look pretty the designer doesn't need to have in depth coding ability… that got done years ago
#8: A really cool design, vs having the time to take care of everyone Example: like a header, footer, search, or nav Example: breadcrumbs, columned text, videos, expanding nav
#28: Hey look, they’re the same as HTML5 !
#37: This is about what you’re left with… it’s the CSS box model….
#38: So that’s ugly right? But from there you build it into beautiful sites by putting design and individuality on top of the boxes.
#39: Like this exmaple…
#40: That template with just the colors is a little too blank for some, so you can expand on it as well… This is a more detailed template, you can still modify it just as much, you’ll just have to do a lot of deleting and changing first, to turn it into your own design.
#41: Make it match html 5, or better yet, just do it in HTML5… this version has css reset for html 5 Keeping H tags in order, as well as consistent “jump to” Text styles: do them right here, don’t worry about them later Image styles, if you’re going to use em, have a good basis to start…. Most of the time you won’t need to chage them later, but if you do, you’ll have a good start to it
#42: Here is the list of what should be in the core One I didn’t mention before is image styles Print style sheet is good so you can knock out the navigation… if you want to do that, and make the content areas wider But that leads to what to leave out… the design
#58: The flare Emph boxes http://www.cehd.umn.edu/ssw/Current/financial-aid/default.asp Pop up video box http://www.cehd.umn.edu/ci/ Slide show http://www.cehd.umn.edu/alumni/events/default.html

Making Your Own CSS Framework

Recommended

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Making Your Own CSS Framework (20)

Recently uploaded (20)

Making Your Own CSS Framework

Editor's Notes