Making Your Own CSS Framework
•
7 likes•8,021 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.
Report
Share
Report
Share
Recommended
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
It seems that not a week goes by without a shiny new framework of some type — be it CSS or JS. But no matter how awesome they are, each have shortcomings and idiosyncrasies that invariably make you ask, 'Why?' Now imagine someone gave you the ability to start from scratch to create your own framework. No strings. No preconceptions — well, except that it has to be enterprise scale, platform agnostic, and work in a whole host of disparate situations. In this session, Stephanie will talk about some of the challenges, hurdles, tradeoffs, and unique decisions Salesforce UX made on the way to building an enterprise framework.
Roll Your Own CSS Framework
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 Framework
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 Queries
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 sass
- 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 Websites
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
Responsive Web Design with HTML5 and CSS3
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 rwd
An exploration of the techniques required to build responsive web applications that can support the multitude of devices around today, as well as prepared for the devices of the future.
Recommended
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
It seems that not a week goes by without a shiny new framework of some type — be it CSS or JS. But no matter how awesome they are, each have shortcomings and idiosyncrasies that invariably make you ask, 'Why?' Now imagine someone gave you the ability to start from scratch to create your own framework. No strings. No preconceptions — well, except that it has to be enterprise scale, platform agnostic, and work in a whole host of disparate situations. In this session, Stephanie will talk about some of the challenges, hurdles, tradeoffs, and unique decisions Salesforce UX made on the way to building an enterprise framework.
Roll Your Own CSS Framework
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 Framework
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 Queries
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 sass
- 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 Websites
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
Responsive Web Design with HTML5 and CSS3
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 rwd
An exploration of the techniques required to build responsive web applications that can support the multitude of devices around today, as well as prepared for the devices of the future.
Controlling Web Typography
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 design
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 + Fireworks
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 DNN
DNN is an excellent platform for a responsive website, but its important to know the ''Do's'' and ''Don'ts'' when designing responsively. This presentation will cover all things responsive: from wireframes and mockups, to media queries and javascript snippets. Get valuable tips on how to create a responsive site following modern web standards, while harnessing the power of the DNN framework. Learn how to design and plan your site, develop layouts with a fluid grid, and test to ensure your site looks great on tons of devices!
Responsive Web Design
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
Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web.
How to use bootstrap, a framework for web design
CSS Systems
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.
Client responsive design
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 React
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 Tricks
Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.
Responsive design: techniques and tricks to prepare your websites for the mul...
Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.
I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors presented at Penn State Webconference Tuesday June 23, 2015. Sass and Less preprocessors simplify managing css for responsive websites.
CSS in React - The Good, The Bad, and The Ugly
Overview of 5 frameworks to style JavaScript applications written in React including Radium, Aphrodite, CSS Modules, Styletron, and Styled Components with a Cheat Sheet of their features
CSS Reset
A quick presentation on CSS resets and the benefits vs problems. Also includes a lighter CSS reset option.
새로운 웹 스타일링, 안 본 사람 없게 해주세요
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 Design
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, CSS3
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)
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 CSS3
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.
Learn svg
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 introduction
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 mockups
Inkscape is fabulous free and open source software for creating vector graphics. But it's also a powerful too for creating web and user interface mockups. By creating a library of common design elements, and borrowing from elsewhere it's easy to bring ideas to life to share with colleagues and test with users. This session will introduce a series of SVG UI Widgets created to mockup Drupal sites, and demonstrate a basic workflow for pulling it all together.
2012.osdc.com.au/talks/inkscape-web-and-ui-mockups
More Related Content
What's hot
Controlling Web Typography
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 design
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 + Fireworks
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 DNN
DNN is an excellent platform for a responsive website, but its important to know the ''Do's'' and ''Don'ts'' when designing responsively. This presentation will cover all things responsive: from wireframes and mockups, to media queries and javascript snippets. Get valuable tips on how to create a responsive site following modern web standards, while harnessing the power of the DNN framework. Learn how to design and plan your site, develop layouts with a fluid grid, and test to ensure your site looks great on tons of devices!
Responsive Web Design
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
Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web.
How to use bootstrap, a framework for web design
CSS Systems
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.
Client responsive design
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 React
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 Tricks
Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.
Responsive design: techniques and tricks to prepare your websites for the mul...
Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.
I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors presented at Penn State Webconference Tuesday June 23, 2015. Sass and Less preprocessors simplify managing css for responsive websites.
CSS in React - The Good, The Bad, and The Ugly
Overview of 5 frameworks to style JavaScript applications written in React including Radium, Aphrodite, CSS Modules, Styletron, and Styled Components with a Cheat Sheet of their features
CSS Reset
A quick presentation on CSS resets and the benefits vs problems. Also includes a lighter CSS reset option.
새로운 웹 스타일링, 안 본 사람 없게 해주세요
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 Design
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, CSS3
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)
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 CSS3
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.
Learn svg
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
What's hot (20)
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
Viewers also liked
Grid system introduction
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 mockups
Inkscape is fabulous free and open source software for creating vector graphics. But it's also a powerful too for creating web and user interface mockups. By creating a library of common design elements, and borrowing from elsewhere it's easy to bring ideas to life to share with colleagues and test with users. This session will introduce a series of SVG UI Widgets created to mockup Drupal sites, and demonstrate a basic workflow for pulling it all together.
2012.osdc.com.au/talks/inkscape-web-and-ui-mockups
Lessons Learned From Building Your Own CSS Framework
Here's the lessons learned from building Loom, my own CSS framework. https://github.com/sonniesedge/loom
Media queries and frameworks
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 Framework
A simple guide to building an interactive framework when wireframes and design guidelines just aren't enough.
Foundation: Prototype to Production
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 Frameworks
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 design
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
Viewers also liked (8)
Lessons Learned From Building Your Own CSS Framework
Lessons Learned From Building Your Own CSS Framework
Similar to Making Your Own CSS Framework
Css group
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 group
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 group
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.
01 Introduction To CSS
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 Dice
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 css
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 Weliver
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-workflow
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 01
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 4
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 Coders
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 Tricks
Advanced CSS Tricks maximizes the use of CSS as a styling language and provides better user experience for your website and maximize the performance.
The Future State of Layout
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 Web
- 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 1
- What is Font End Engineering?
- What does Font End Engineers do?
- Can I become a Font End Engineer?
- HTML: best practices
- CSS: best practices
How to get a serious front end designer job
3+ steps you should know before going for front end position. Talk I gave in Riga Front end meetup on 1st of November, 2017.
Http _css-tricks
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.
Web Building Blocks
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 CSS3
This presentation is target for developers that are new to CSS3, and would like to know what CSS3 they need to understand for Windows 8 development.
Getting to Grips with Firebug - Anthony Hortin - WordCamp 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.
Similar to Making Your Own CSS Framework (20)
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney
Recently uploaded
“I’m still / I’m still / Chaining from the Block”
“An Outlook of the Ongoing and Future Relationship between Blockchain Technologies and Process-aware Information Systems.” Invited talk at the joint workshop on Blockchain for Information Systems (BC4IS) and Blockchain for Trusted Data Sharing (B4TDS), co-located with with the 36th International Conference on Advanced Information Systems Engineering (CAiSE), 3 June 2024, Limassol, Cyprus.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications.
Communications Mining Series - Zero to Hero - Session 1
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Mind map of terminologies used in context of Generative AI
Mind map of common terms used in context of Generative AI.
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIVladimir Iglovikov, Ph.D.
Presented by Vladimir Iglovikov:
- https://www.linkedin.com/in/iglovikov/
- https://x.com/viglovikov
- https://www.instagram.com/ternaus/
This presentation delves into the journey of Albumentations.ai, a highly successful open-source library for data augmentation.
Created out of a necessity for superior performance in Kaggle competitions, Albumentations has grown to become a widely used tool among data scientists and machine learning practitioners.
This case study covers various aspects, including:
People: The contributors and community that have supported Albumentations.
Metrics: The success indicators such as downloads, daily active users, GitHub stars, and financial contributions.
Challenges: The hurdles in monetizing open-source projects and measuring user engagement.
Development Practices: Best practices for creating, maintaining, and scaling open-source libraries, including code hygiene, CI/CD, and fast iteration.
Community Building: Strategies for making adoption easy, iterating quickly, and fostering a vibrant, engaged community.
Marketing: Both online and offline marketing tactics, focusing on real, impactful interactions and collaborations.
Mental Health: Maintaining balance and not feeling pressured by user demands.
Key insights include the importance of automation, making the adoption process seamless, and leveraging offline interactions for marketing. The presentation also emphasizes the need for continuous small improvements and building a friendly, inclusive community that contributes to the project's growth.
Vladimir Iglovikov brings his extensive experience as a Kaggle Grandmaster, ex-Staff ML Engineer at Lyft, sharing valuable lessons and practical advice for anyone looking to enhance the adoption of their open-source projects.
Explore more about Albumentations and join the community at:
GitHub: https://github.com/albumentations-team/albumentations
Website: https://albumentations.ai/
LinkedIn: https://www.linkedin.com/company/100504475
Twitter: https://x.com/albumentationsEpistemic Interaction - tuning interfaces to provide information for AI support
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
National Security Agency - NSA mobile device best practices
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Securing your Kubernetes cluster_ a step-by-step guide to success !
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
Microsoft - Power Platform_G.Aspiotis.pdf
Revolutionizing Application Development
with AI-powered low-code, presentation by George Aspiotis, Sr. Partner Development Manager, Microsoft
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
UiPath Test Automation using UiPath Test Suite series, part 6
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
Full-RAG: A modern architecture for hyper-personalization
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
Recently uploaded (20)
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Making Your Own CSS Framework
- 1. Making your own CSS Framework
- 4. Who am I? I don’t do much coding anymore… I don’t need to.
- 21. Wow, what an ugly site!
- 28. 1 st Step -CSS Reset- h1, p, div, ul, li { margin: 0; padding: 0; border: 0; }
- 34. Margins
- 37. Wow… that’s really ugly.
- 43. Make some widgets (don’t sweat the small stuff)
- 47. Design freedom
- 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
- 56. Once you’ve got the basics… add some flare…
Editor's Notes
- 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
- 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
- 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
- Hey look, they’re the same as HTML5 !
- This is about what you’re left with… it’s the CSS box model….
- So that’s ugly right? But from there you build it into beautiful sites by putting design and individuality on top of the boxes.
- Like this exmaple…
- 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.
- 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
- 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
- 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