Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
If you’re working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain.
The document discusses a scalable and modular architecture for CSS that involves categorizing styles into base, layout, module, and state categories. This approach helps make CSS more flexible, maintainable, and avoids overly specific selectors. Key aspects include naming conventions, limiting the depth of styles, and using child selectors. An example of a "media object" pattern is provided to demonstrate how abstracting styles into reusable modules can significantly reduce code. While this approach goes against some conventional wisdom, it separates structure and skin while promoting reusability.
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...thejibe
1. Explains what Modular CSS is and how it can be helpful
2. Details how set file structures and naming conventions make this philosophy work best
3. Runs through how preprocessors like SAAS and adding on tools like SAAS-globbing and Compass can improve your workflow.
4. How this can all be applied to Drupal
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Basics of Front End Web Dev PowerPointSahil Gandhi
Here are some tips for hands-on part 2:
- Add a class like .paragraph to the <p> tags containing your sentences
- Add an ID like #image to the <img> tag
- In an internal or external CSS file:
.paragraph {
color: blue;
font-size: 20px;
}
#image {
padding: 10px;
display: block;
margin: 0 auto;
}
- For background:
body {
background-color: lightgray;
}
- Play around with other CSS properties like text-align, font-family etc.
Using different kind of tools to build big styles for websites. Problem with big CSS is that it gets heavy, hard to manage, convoluted. But fortunately there are ways to keep structured and manageable. In this presentation we introduce combination of Makefile, SASS, ImageMagick, and other tools.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
If you’re working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain.
The document discusses a scalable and modular architecture for CSS that involves categorizing styles into base, layout, module, and state categories. This approach helps make CSS more flexible, maintainable, and avoids overly specific selectors. Key aspects include naming conventions, limiting the depth of styles, and using child selectors. An example of a "media object" pattern is provided to demonstrate how abstracting styles into reusable modules can significantly reduce code. While this approach goes against some conventional wisdom, it separates structure and skin while promoting reusability.
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...thejibe
1. Explains what Modular CSS is and how it can be helpful
2. Details how set file structures and naming conventions make this philosophy work best
3. Runs through how preprocessors like SAAS and adding on tools like SAAS-globbing and Compass can improve your workflow.
4. How this can all be applied to Drupal
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Basics of Front End Web Dev PowerPointSahil Gandhi
Here are some tips for hands-on part 2:
- Add a class like .paragraph to the <p> tags containing your sentences
- Add an ID like #image to the <img> tag
- In an internal or external CSS file:
.paragraph {
color: blue;
font-size: 20px;
}
#image {
padding: 10px;
display: block;
margin: 0 auto;
}
- For background:
body {
background-color: lightgray;
}
- Play around with other CSS properties like text-align, font-family etc.
Using different kind of tools to build big styles for websites. Problem with big CSS is that it gets heavy, hard to manage, convoluted. But fortunately there are ways to keep structured and manageable. In this presentation we introduce combination of Makefile, SASS, ImageMagick, and other tools.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
The document provides an overview of how to use CSS3 in WordPress. It introduces the presenter and their goal to teach the audience at least one new thing. It then covers CSS/CSS3 basics, terminology, syntax, properties, specificity, inspecting CSS, new CSS3 modules like colors, gradients, border radius, and how to add CSS in WordPress through themes, plugins or inline styles. Resources for further learning CSS are also provided, followed by time for questions.
The document is an introduction to HTML and CSS that provides a tutorial on the basic syntax and structure of each language. It begins by explaining how to create simple HTML files and add basic HTML tags like headings, paragraphs, and lists. It then introduces linking an external CSS stylesheet and using CSS selectors to style HTML elements by changing properties like colors, backgrounds, padding and more. The document provides examples of additional CSS concepts like classes, inheritance, the box model, specificity and more. It concludes by recommending additional resources for references, validators, code editors and tutorials.
1) The document provides resources for a front-end development session including working files, slides, and an agenda.
2) It reviews HTML tags, CSS selectors, the box model, positioning, and Flexbox.
3) Instructions are given to install Atom plugins and review JavaScript and JQuery before adding an Express server to a webpage.
In this one hour tutorial Simon Collison will demonstrate why convention, order and understanding are vital to web design and development teams. He'll give insights into how Erskine approach projects and will help attendees explore ways of creating and evolving their own "Ultimate Package".
Why conventions are essential for successful web projects. How Erskine approach HTML, CSS & JavaScript in their own projects. What to consider when developing your own "Ultimate Package".
The document discusses the Yahoo User Interface (YUI) Cascading Style Sheets (CSS) framework. It provides an overview of the key YUI CSS files, including reset.css for normalizing HTML elements, fonts.css for font styling, and grids.css for page layouts. It also covers common CSS concepts like the cascade, floats, positioning, and table-less design implemented through CSS. The document encourages semantic class names, proper formatting and comments for maintainability, and recommends tools for CSS development.
Web front end development introduction to html css and javascriptMarc Huang
This document provides an introduction to HTML, CSS, and JavaScript for building websites. It discusses how websites work by connecting clients and servers, and compares making a website to writing a book by organizing content into pages. The document then covers the basic purposes and syntax of HTML for creating page content, CSS for styling, and JavaScript for interactivity. It provides many code examples and explains common elements, properties, and methods in each language to demonstrate basic front-end web development concepts and tools.
The document provides tips for Rails developers when working with designers, suggesting they use consistent naming for models and views, integrate CSS stylesheets and images properly, and use techniques like conditional comments and body classes to target styles for different browsers like Internet Explorer.
This document summarizes a knowledge sharing session on HTML and CSS basics. It covers topics like HTML tags and structures, CSS rules and selectors, the CSS box model, positioning, sprites, and hacks for dealing with browser inconsistencies. The session introduced fundamental concepts for using HTML to structure content and CSS for styling and layout, providing examples for common tags, selectors, properties and techniques. It aimed to give attendees an overview of the core building blocks of HTML and CSS.
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
This document provides an introduction and overview of Cascading Style Sheets (CSS). It defines CSS as used to format and style web pages, describes the advantages of using CSS including simplifying design changes and creating style sheets for different audiences. It then explains the basic syntax of CSS using examples and describes the three types of CSS styles: internal, inline, and external styles. Finally, it outlines different CSS selectors including element, id, and class selectors and provides an example of how to use CSS to style an HTML table.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
Slides for a talk at the ConFoo 2012 conference in Montreal. I explain a simple yet powerful CSS architecture that avoids duplication and increases design consistency by grouping shared properties together rather than redefining them over and over. In the process I explain preprocessors like LESS and SASS, as well as the OOCSS fad, pointing out how they are insufficiently standards-compliant.
WCBuf: CSS Display Properties versus HTML SemanticsAdrian Roselli
Many (most?) developers make the effort to choose HTML elements that best describe the structure and semantics of the content. They then use CSS to set the layout for the visual design. What they don’t know is how browsers use that CSS to break the HTML semantics. I will demonstrate issues and offer unfortunate workarounds.
This document provides an overview of CSS (Cascading Style Sheets) including its history, basic syntax and structure, common properties that can be styled, and different methods for applying styles. Key points covered include using CSS to style fonts, colors, links, and page layout with properties like padding, margin, and floats. The document also demonstrates how to select elements with IDs, classes, and other selectors to style them.
This document provides tips for best practices when writing CSS code. It recommends avoiding inline styles, header styles, multiple CSS files, and !important. It also recommends using shorthand properties, avoiding universal selectors and IDs when possible, optimizing images, and using CSS3 properties instead of images. In summary, the document outlines techniques for writing efficient, well-structured CSS code to improve performance and maintainability.
Are you new to Joomla! template designing and keen to learn how to go about creating one? This is beginner-level training for Joomla! template developers conducted on 2 Oct 2010 for free.
Slashes and Dots provide Joomla training on demand basis and free Joomla! related training from time to time
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
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.
The document contains a presentation on CSS (Cascading Style Sheets) given by Herman. The presentation covers the basics of CSS including how it separates design from HTML, writing CSS selectors for tags, classes and IDs, basic styling properties, the box model, positioning, CSS frameworks, and standards used at Bina Nusantara University.
When it comes to building responsive web layouts we’ve used tables, floats and Flexbox. Now there’s CSS Grid. In this talk, we’ll go over what differentiates it from other techniques and why it’s completely changing the game. Through code examples and demos, you’ll walk out of this talk able to start using Grid right away.
The document provides an overview of how to use CSS3 in WordPress. It introduces the presenter and their goal to teach the audience at least one new thing. It then covers CSS/CSS3 basics, terminology, syntax, properties, specificity, inspecting CSS, new CSS3 modules like colors, gradients, border radius, and how to add CSS in WordPress through themes, plugins or inline styles. Resources for further learning CSS are also provided, followed by time for questions.
The document is an introduction to HTML and CSS that provides a tutorial on the basic syntax and structure of each language. It begins by explaining how to create simple HTML files and add basic HTML tags like headings, paragraphs, and lists. It then introduces linking an external CSS stylesheet and using CSS selectors to style HTML elements by changing properties like colors, backgrounds, padding and more. The document provides examples of additional CSS concepts like classes, inheritance, the box model, specificity and more. It concludes by recommending additional resources for references, validators, code editors and tutorials.
1) The document provides resources for a front-end development session including working files, slides, and an agenda.
2) It reviews HTML tags, CSS selectors, the box model, positioning, and Flexbox.
3) Instructions are given to install Atom plugins and review JavaScript and JQuery before adding an Express server to a webpage.
In this one hour tutorial Simon Collison will demonstrate why convention, order and understanding are vital to web design and development teams. He'll give insights into how Erskine approach projects and will help attendees explore ways of creating and evolving their own "Ultimate Package".
Why conventions are essential for successful web projects. How Erskine approach HTML, CSS & JavaScript in their own projects. What to consider when developing your own "Ultimate Package".
The document discusses the Yahoo User Interface (YUI) Cascading Style Sheets (CSS) framework. It provides an overview of the key YUI CSS files, including reset.css for normalizing HTML elements, fonts.css for font styling, and grids.css for page layouts. It also covers common CSS concepts like the cascade, floats, positioning, and table-less design implemented through CSS. The document encourages semantic class names, proper formatting and comments for maintainability, and recommends tools for CSS development.
Web front end development introduction to html css and javascriptMarc Huang
This document provides an introduction to HTML, CSS, and JavaScript for building websites. It discusses how websites work by connecting clients and servers, and compares making a website to writing a book by organizing content into pages. The document then covers the basic purposes and syntax of HTML for creating page content, CSS for styling, and JavaScript for interactivity. It provides many code examples and explains common elements, properties, and methods in each language to demonstrate basic front-end web development concepts and tools.
The document provides tips for Rails developers when working with designers, suggesting they use consistent naming for models and views, integrate CSS stylesheets and images properly, and use techniques like conditional comments and body classes to target styles for different browsers like Internet Explorer.
This document summarizes a knowledge sharing session on HTML and CSS basics. It covers topics like HTML tags and structures, CSS rules and selectors, the CSS box model, positioning, sprites, and hacks for dealing with browser inconsistencies. The session introduced fundamental concepts for using HTML to structure content and CSS for styling and layout, providing examples for common tags, selectors, properties and techniques. It aimed to give attendees an overview of the core building blocks of HTML and CSS.
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
This document provides an introduction and overview of Cascading Style Sheets (CSS). It defines CSS as used to format and style web pages, describes the advantages of using CSS including simplifying design changes and creating style sheets for different audiences. It then explains the basic syntax of CSS using examples and describes the three types of CSS styles: internal, inline, and external styles. Finally, it outlines different CSS selectors including element, id, and class selectors and provides an example of how to use CSS to style an HTML table.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
Slides for a talk at the ConFoo 2012 conference in Montreal. I explain a simple yet powerful CSS architecture that avoids duplication and increases design consistency by grouping shared properties together rather than redefining them over and over. In the process I explain preprocessors like LESS and SASS, as well as the OOCSS fad, pointing out how they are insufficiently standards-compliant.
WCBuf: CSS Display Properties versus HTML SemanticsAdrian Roselli
Many (most?) developers make the effort to choose HTML elements that best describe the structure and semantics of the content. They then use CSS to set the layout for the visual design. What they don’t know is how browsers use that CSS to break the HTML semantics. I will demonstrate issues and offer unfortunate workarounds.
This document provides an overview of CSS (Cascading Style Sheets) including its history, basic syntax and structure, common properties that can be styled, and different methods for applying styles. Key points covered include using CSS to style fonts, colors, links, and page layout with properties like padding, margin, and floats. The document also demonstrates how to select elements with IDs, classes, and other selectors to style them.
This document provides tips for best practices when writing CSS code. It recommends avoiding inline styles, header styles, multiple CSS files, and !important. It also recommends using shorthand properties, avoiding universal selectors and IDs when possible, optimizing images, and using CSS3 properties instead of images. In summary, the document outlines techniques for writing efficient, well-structured CSS code to improve performance and maintainability.
Are you new to Joomla! template designing and keen to learn how to go about creating one? This is beginner-level training for Joomla! template developers conducted on 2 Oct 2010 for free.
Slashes and Dots provide Joomla training on demand basis and free Joomla! related training from time to time
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
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.
The document contains a presentation on CSS (Cascading Style Sheets) given by Herman. The presentation covers the basics of CSS including how it separates design from HTML, writing CSS selectors for tags, classes and IDs, basic styling properties, the box model, positioning, CSS frameworks, and standards used at Bina Nusantara University.
When it comes to building responsive web layouts we’ve used tables, floats and Flexbox. Now there’s CSS Grid. In this talk, we’ll go over what differentiates it from other techniques and why it’s completely changing the game. Through code examples and demos, you’ll walk out of this talk able to start using Grid right away.
This document discusses moving toward more modular and reusable HTML and CSS structures. It outlines problems with current practices like code becoming brittle and files swelling in size. It recommends abstracting structure from presentation using techniques like transparentizing elements, avoiding parent dependency, and favoring semantics. The document provides examples of bad and good practices and emphasizes keeping specificity low and code maintainable. The goal is building flexible and extensible components rather than pages to improve standards and reusability.
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform. Supported Browser Chrome,Firefox, IE9+(icons IE10+).
We've all been there: lookin' a thousands line spaghetti code of CSS, scrolling up and down, trying to find all the declarations, which override each other here and there, and almost cry when we find out that changing one thing affects a lot more page elements than we expected. (In the meantime we mumble some angry words about the previous developer of the file and sometimes we realize that we are talking about ourselves…)
Slides form my workshop @ drupalaton:
http://2014.drupalaton.hu/schedule#speaker-22
Presentation to the Triangle Drupal Users Group (TriDUG) July meeting. This is a brief overview of what CSS selectors are and how they can be used to target CSS at specific parts of Drupal pages.
Note: This was done using the Fusion Starter theme in Drupal 7 but is applicable to D6 and other "major" themes.
Sorry, the slide animations did not come thru... but only the before and after slide really got effected.
1.CSS term. 2. Style attribute / Style element. 3. Inline styles / Multiple styles. 4. CSS syntax (Selector - Rules). 5. Selectors (Type - Class and ID). 6. External CCS file. 7. Boxes (Content – Padding – Border - Margin). 8. Style sheet or style element — not both! 9. CSS colors.
Skills: 1. Change the color of text on a web page. 2. Change the layout of a web page. 3. Access Developer Tools in your browser. 4. Apply style to HTML elements. 5. Styling HTML separately. 6. Linking stylesheets. 7. CSS property for setting an element. 8. Apply Fonts on web page. 9. Include the CCS files.
CSS Part 1 Styles' locations
https://youtu.be/gw4tOnu4S8w
CSS Part 2 Types of selectors by engineer & educator Osama Ghandour
https://youtu.be/9Emyuiey-98
CSS Part 3 CSS Syntax
https://youtu.be/-vQwT7uFTUY
CSS Part 4 CSS Selectors Tag, ID, Class, Attribute by engineer & educator Osama Ghandour
https://youtu.be/ZuCCLeVvyW8
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/8c0Z5cej03o
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/H4VnXlW9Ik8
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017Morten Rand-Hendriksen
Slides from the WordCamp Europe presentation by the same name. From the conference website:
CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.
The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.
In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.
CSS Grid is here, and you can start using it today. This talk shows you how to do it right.
This document provides a summary of CSS history and concepts. It begins with a brief history of CSS from its inception in 1990 when style sheets were separated from documents. It discusses the proposal and adoption of cascading style sheets in 1994-1996. It then covers CSS levels 1-3 and selectors such as elements, classes, IDs, and pseudo-classes. It also discusses specificity, the box model, attribute matching, and advanced CSS3 concepts like fonts, shadows, gradients and transforms. Finally, it covers media types, best practices like reset CSS and prefixes, and common layout techniques.
BEM Methodology — @Frontenders Ticino —17/09/2014vzaccaria
This document summarizes the Block Element Modifier (BEM) methodology for organizing CSS code. BEM defines concepts like "blocks" (reusable components), "modifiers" (classes that modify a block's appearance), and "elements" (nested parts of a block). It provides guidelines for naming classes and structuring CSS and HTML to make code more maintainable, reusable and predictable. The document also discusses tools for working with BEM and the future of front-end design with technologies like web components.
This document provides an overview of Object Oriented CSS (OOCSS), HTML5, and web performance. It discusses what OOCSS is, how to implement it, and why it is useful. It also briefly covers some HTML5 forms and communication features. Finally, it examines how to improve website speed. The goal is to look at these topics and discuss elegant and lean CSS as opposed to "fat sack of crap" code.
The document provides an overview of how to use CSS3 in WordPress. It begins with introductions and then covers CSS/CSS3 basics, terminology, syntax, properties, comments, specificity, and inspecting CSS. It discusses using CSS in WordPress by adding it via themes, plugins, or inline styles. Finally, it highlights new CSS3 modules like colors, gradients, border radius, shadows, and transformations, and provides CSS resources.
This document outlines the remaining classes for a web design course, including grid layout, navigation, jQuery, forms, and more. It then provides details on creating layouts using the grid framework over two classes. The first layout will be relatively simple for inside pages, while the second for the front page will be more complex. Examples of grid layout are provided. Finally, instructions are given for an assignment due November 7th involving adding content to a two-column layout and creating a header image for the front page under 940px wide.
This document discusses basic CSS layout and properties. It explains how to use class and ID selectors to style specific elements on a page. It also describes the differences between internal, external, and inline CSS styles. Finally, it covers the main CSS background properties including background-color, background-image, background-repeat, and background-position that control the aesthetics of a website.
This document provides an overview of CSS (Cascading Style Sheets), including what CSS is, how it separates presentation from content, the history of CSS, sources of styles, selectors, properties, values, and positioning. CSS allows control over font, color, spacing, size, and positioning of elements to change how HTML content is displayed. CSS properties include display, visibility, float, clear, position, and box model properties that affect layout and appearance.
The Responsive Grid & You: Extending Your WordPress Site Across Multiple Dev...Jeremy Fuksa
Presented to WordCamp KC 2011.
If you are a web designer of any type, you're interested in making sure your designs are faithful AND useful to the widest audience possible. This has been true for years. But now, your audience has widened to mobile users and also users on HDTVs. How do you accommodate them? Simple: Responsive Web Design.
This talk shows how to use some of the open source responsive CSS frameworks to make sites that are fluid and adaptable to a wide range of devices.
This document introduces HTML and CSS. It discusses using inline, internal, and external CSS stylesheets. CSS syntax is presented, including selectors, declarations, properties, and values. CSS classes allow applying the same styles to multiple elements. Floating elements and cascading style sheets are also covered. Examples are provided for CSS classes, floating, and cascading. Homework involves implementing a design with three floating blocks.
Similar a Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS (20)
Applications of artificial Intelligence in Mechanical Engineering.pdfAtif Razi
Historically, mechanical engineering has relied heavily on human expertise and empirical methods to solve complex problems. With the introduction of computer-aided design (CAD) and finite element analysis (FEA), the field took its first steps towards digitization. These tools allowed engineers to simulate and analyze mechanical systems with greater accuracy and efficiency. However, the sheer volume of data generated by modern engineering systems and the increasing complexity of these systems have necessitated more advanced analytical tools, paving the way for AI.
AI offers the capability to process vast amounts of data, identify patterns, and make predictions with a level of speed and accuracy unattainable by traditional methods. This has profound implications for mechanical engineering, enabling more efficient design processes, predictive maintenance strategies, and optimized manufacturing operations. AI-driven tools can learn from historical data, adapt to new information, and continuously improve their performance, making them invaluable in tackling the multifaceted challenges of modern mechanical engineering.
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024Sinan KOZAK
Sinan from the Delivery Hero mobile infrastructure engineering team shares a deep dive into performance acceleration with Gradle build cache optimizations. Sinan shares their journey into solving complex build-cache problems that affect Gradle builds. By understanding the challenges and solutions found in our journey, we aim to demonstrate the possibilities for faster builds. The case study reveals how overlapping outputs and cache misconfigurations led to significant increases in build times, especially as the project scaled up with numerous modules using Paparazzi tests. The journey from diagnosing to defeating cache issues offers invaluable lessons on maintaining cache integrity without sacrificing functionality.
Advanced control scheme of doubly fed induction generator for wind turbine us...IJECEIAES
This paper describes a speed control device for generating electrical energy on an electricity network based on the doubly fed induction generator (DFIG) used for wind power conversion systems. At first, a double-fed induction generator model was constructed. A control law is formulated to govern the flow of energy between the stator of a DFIG and the energy network using three types of controllers: proportional integral (PI), sliding mode controller (SMC) and second order sliding mode controller (SOSMC). Their different results in terms of power reference tracking, reaction to unexpected speed fluctuations, sensitivity to perturbations, and resilience against machine parameter alterations are compared. MATLAB/Simulink was used to conduct the simulations for the preceding study. Multiple simulations have shown very satisfying results, and the investigations demonstrate the efficacy and power-enhancing capabilities of the suggested control system.
Design and optimization of ion propulsion dronebjmsejournal
Electric propulsion technology is widely used in many kinds of vehicles in recent years, and aircrafts are no exception. Technically, UAVs are electrically propelled but tend to produce a significant amount of noise and vibrations. Ion propulsion technology for drones is a potential solution to this problem. Ion propulsion technology is proven to be feasible in the earth’s atmosphere. The study presented in this article shows the design of EHD thrusters and power supply for ion propulsion drones along with performance optimization of high-voltage power supply for endurance in earth’s atmosphere.
Batteries -Introduction – Types of Batteries – discharging and charging of battery - characteristics of battery –battery rating- various tests on battery- – Primary battery: silver button cell- Secondary battery :Ni-Cd battery-modern battery: lithium ion battery-maintenance of batteries-choices of batteries for electric vehicle applications.
Fuel Cells: Introduction- importance and classification of fuel cells - description, principle, components, applications of fuel cells: H2-O2 fuel cell, alkaline fuel cell, molten carbonate fuel cell and direct methanol fuel cells.
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...IJECEIAES
Climate change's impact on the planet forced the United Nations and governments to promote green energies and electric transportation. The deployments of photovoltaic (PV) and electric vehicle (EV) systems gained stronger momentum due to their numerous advantages over fossil fuel types. The advantages go beyond sustainability to reach financial support and stability. The work in this paper introduces the hybrid system between PV and EV to support industrial and commercial plants. This paper covers the theoretical framework of the proposed hybrid system including the required equation to complete the cost analysis when PV and EV are present. In addition, the proposed design diagram which sets the priorities and requirements of the system is presented. The proposed approach allows setup to advance their power stability, especially during power outages. The presented information supports researchers and plant owners to complete the necessary analysis while promoting the deployment of clean energy. The result of a case study that represents a dairy milk farmer supports the theoretical works and highlights its advanced benefits to existing plants. The short return on investment of the proposed approach supports the paper's novelty approach for the sustainable electrical system. In addition, the proposed system allows for an isolated power setup without the need for a transmission line which enhances the safety of the electrical network
Use PyCharm for remote debugging of WSL on a Windo cf5c162d672e4e58b4dde5d797...shadow0702a
This document serves as a comprehensive step-by-step guide on how to effectively use PyCharm for remote debugging of the Windows Subsystem for Linux (WSL) on a local Windows machine. It meticulously outlines several critical steps in the process, starting with the crucial task of enabling permissions, followed by the installation and configuration of WSL.
The guide then proceeds to explain how to set up the SSH service within the WSL environment, an integral part of the process. Alongside this, it also provides detailed instructions on how to modify the inbound rules of the Windows firewall to facilitate the process, ensuring that there are no connectivity issues that could potentially hinder the debugging process.
The document further emphasizes on the importance of checking the connection between the Windows and WSL environments, providing instructions on how to ensure that the connection is optimal and ready for remote debugging.
It also offers an in-depth guide on how to configure the WSL interpreter and files within the PyCharm environment. This is essential for ensuring that the debugging process is set up correctly and that the program can be run effectively within the WSL terminal.
Additionally, the document provides guidance on how to set up breakpoints for debugging, a fundamental aspect of the debugging process which allows the developer to stop the execution of their code at certain points and inspect their program at those stages.
Finally, the document concludes by providing a link to a reference blog. This blog offers additional information and guidance on configuring the remote Python interpreter in PyCharm, providing the reader with a well-rounded understanding of the process.
Rainfall intensity duration frequency curve statistical analysis and modeling...bijceesjournal
Using data from 41 years in Patna’ India’ the study’s goal is to analyze the trends of how often it rains on a weekly, seasonal, and annual basis (1981−2020). First, utilizing the intensity-duration-frequency (IDF) curve and the relationship by statistically analyzing rainfall’ the historical rainfall data set for Patna’ India’ during a 41 year period (1981−2020), was evaluated for its quality. Changes in the hydrologic cycle as a result of increased greenhouse gas emissions are expected to induce variations in the intensity, length, and frequency of precipitation events. One strategy to lessen vulnerability is to quantify probable changes and adapt to them. Techniques such as log-normal, normal, and Gumbel are used (EV-I). Distributions were created with durations of 1, 2, 3, 6, and 24 h and return times of 2, 5, 10, 25, and 100 years. There were also mathematical correlations discovered between rainfall and recurrence interval.
Findings: Based on findings, the Gumbel approach produced the highest intensity values, whereas the other approaches produced values that were close to each other. The data indicates that 461.9 mm of rain fell during the monsoon season’s 301st week. However, it was found that the 29th week had the greatest average rainfall, 92.6 mm. With 952.6 mm on average, the monsoon season saw the highest rainfall. Calculations revealed that the yearly rainfall averaged 1171.1 mm. Using Weibull’s method, the study was subsequently expanded to examine rainfall distribution at different recurrence intervals of 2, 5, 10, and 25 years. Rainfall and recurrence interval mathematical correlations were also developed. Further regression analysis revealed that short wave irrigation, wind direction, wind speed, pressure, relative humidity, and temperature all had a substantial influence on rainfall.
Originality and value: The results of the rainfall IDF curves can provide useful information to policymakers in making appropriate decisions in managing and minimizing floods in the study area.
Introduction- e - waste – definition - sources of e-waste– hazardous substances in e-waste - effects of e-waste on environment and human health- need for e-waste management– e-waste handling rules - waste minimization techniques for managing e-waste – recycling of e-waste - disposal treatment methods of e- waste – mechanism of extraction of precious metal from leaching solution-global Scenario of E-waste – E-waste in India- case studies.
3. – http://cssguidelin.es/
Harry Roberts
CSS is not a pretty language.
While it is simple to learn and get started with, it soon
becomes problematic at any reasonable scale.
26. Principles
• Separate Container and Content
• break the dependency between the
container module and the content
objects it contains.
27. Some Guidelines
for OOCSS
• Avoid the descendent selector (i.e. don’t
use .sidebar h3)
• Avoid IDs as styling hooks
• Avoid attaching classes to elements in your
stylesheet (i.e. don’t do div.header or h1.title)
• Except in some rare cases, avoid using !
important
50. Why CLASSES?
• 3.2.5.7 The class attribute
• https://html.spec.whatwg.org/multipage/dom.html#classes
• The attribute, if specified, must have a value that is a set of
space-separated tokens representing the various classes that
the element belongs to.
• There are no additional restrictions on the tokens authors
can use in the class attribute, but authors are encouraged to
use values that describe the nature of the content, rather than
values that describe the desired presentation of the content.
51. Why CLASSES?
• Therefore,
• BEM
• .primary-nav__sub-nav—current
• Utilities
• .u-textTruncate
• left
• clearfix
• Javascript hook
• .js-whatevs
GLOBAL NAMESPACE
52. ~=
Attribute is within
Space Separated List
<div class='a b c'>
.a { ... }
.b { ... }
.c { ... }
[class~='a'] { ... }
[class~='b'] { ... }
[class~='c'] { ... }