Roll Your Own CSS Framework
•
0 likes•2,843 views
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.
Report
Share
Report
Share
Download to read offline
Recommended
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.
Making Your Own CSS Framework
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.
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.
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.
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors.
This session will discuss how you can apply responsive design techniques to your Drupal website and how to make design choices that work within a responsive framework. Topics will include:
Steps to building a responsive Drupal 7 theme
Challenges when designing a responsive layout
Drupal elements that are particularly challenging to adapt
CSS techniques for responsive design
Responsive Drupal base themes
Responsive web design
This document discusses responsive web design and the tools needed to implement it. It recommends using a grid-based design, flexible images and media, media queries, and percentage-based widths to create a responsive site. It also recommends specific tools like SASS, Compass, Breakpoint and Jeet to help with responsive design and provides code examples for how to use media queries and breakpoints.
Responsive Design and Drupal Theming
Rather than designing a site that works for one screen size, or designing separate themes that work for different devices, the goal of responsive design is to build a website that adapts to the width of the user's screen and works for both large and small screens.
In this presentation, I cover the basics of making a responsive Drupal 7 theme. I also discuss the challenges of designing a theme that adapts to screen width and some approaches to take during both the design and theming process.
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.
Recommended
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.
Making Your Own CSS Framework
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.
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.
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.
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors.
This session will discuss how you can apply responsive design techniques to your Drupal website and how to make design choices that work within a responsive framework. Topics will include:
Steps to building a responsive Drupal 7 theme
Challenges when designing a responsive layout
Drupal elements that are particularly challenging to adapt
CSS techniques for responsive design
Responsive Drupal base themes
Responsive web design
This document discusses responsive web design and the tools needed to implement it. It recommends using a grid-based design, flexible images and media, media queries, and percentage-based widths to create a responsive site. It also recommends specific tools like SASS, Compass, Breakpoint and Jeet to help with responsive design and provides code examples for how to use media queries and breakpoints.
Responsive Design and Drupal Theming
Rather than designing a site that works for one screen size, or designing separate themes that work for different devices, the goal of responsive design is to build a website that adapts to the width of the user's screen and works for both large and small screens.
In this presentation, I cover the basics of making a responsive Drupal 7 theme. I also discuss the challenges of designing a theme that adapts to screen width and some approaches to take during both the design and theming process.
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.
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.
Building Responsive Websites with Drupal
Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors.
This webinar will discuss how you can apply responsive design techniques to a Drupal website and will include the following topics:
* Steps to building a responsive Drupal 7 theme
* Challenges when designing a responsive layout
* Drupal elements that are particularly challenging to adapt
* CSS techniques for responsive design
* Responsive Drupal base themes
CSS架構如何加速功能開發
The document describes the CSS structure for an education application called InterSIS. It shows the folder structure for stylesheets, with main files like application.css and modules/_all.scss. Entries are the main style files for each page. Partials contain shared and page-specific styles. The entry for the student profile page is _student_profile.css. It also discusses using Ruby on Rails helpers and a grid system for layout. Examples demonstrate integrating styles into views. The document warns against bad practices like duplicating styles.
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance is a case study on what I used to make missedin-hkg.com load in less than 1000ms and optimise front end performance in various ways.
This talk has been held at the Codeaholics Meetup in Hong Kong on 08. April 2015.
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!
What is Object Oriented CSS?
This document discusses object-oriented CSS (OOCSS) as an evolution of CSS that makes it more powerful. OOCSS involves creating reusable CSS objects rather than page-specific rules, setting good global defaults, abstracting reusable elements, separating container and content, and using multiple classes to simulate inheritance. This allows for more scalable, maintainable and performant CSS code. Some best practices of OOCSS include creating semantic object classes like .heading rather than styling specific elements directly. The document provides examples of OOCSS principles and their benefits.
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.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
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.
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
Wireframing basics may 2012
Wireframing is a visual guide that represents the skeletal framework of a website using interface elements and navigational systems. It connects conceptual structure to visual design and varies in fidelity resembling the final product. Wireframing is used to make rapid prototypes and measure design concepts, providing a 10,000 foot view of the product flow, parts, and visual design. It is an iterative process that incorporates early user feedback. Common page types include landing, dashboard, gallery, list, and forms pages. Usability standards and templates help streamline the process, with the goal of rapidly iterating so development can begin.
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
CSS Workflow. Pre & Post
This document discusses CSS workflows and tools for preprocessing and postprocessing CSS, including:
- CSS preprocessors like SASS that add features like variables, nesting, inheritance and mixins to CSS
- PostCSS tools that analyze, lint, and transform CSS to improve and optimize it
- Setting up workflows that involve writing CSS/SASS code, preprocessing it with tools like SASS, then further processing it with PostCSS plugins before it reaches the browser
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Mickley Gillenwater gave a talk at Generate Conference in London where she shared several mistakes she made while learning CSS flexbox and other techniques. These included misunderstanding how flex-basis works, incorrectly using CSS transforms like rotateX, and making assumptions about screen reader support that caused accessibility issues. She emphasized that vulnerability and sharing mistakes openly can help both oneself and others learn. Making mistakes is a natural part of the learning process, and perfection should not be expected or feared.
Web design v roku 2013
This document summarizes trends and best practices in web design in 2013. It discusses concepts like mobile-first design, responsive layouts, simplicity, and user experience-centered design. It also covers specific design elements like fixed header bars, infinite scrolling, CSS3 animations, and social media integration. The document provides examples of standard and the author's preferred workflows for wireframing, visual design, development, and integration with content management systems. It also discusses technologies like Bootstrap, LESS, jQuery, and techniques for responsive design, typography, common design patterns, and touch interfaces.
Improving the Responsive Web Design Process in 2016
It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory.
The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability.
In this session reviewed tools, techniques and concepts to improve our projects:
- Performance and best practices
- CSS structuring and optization (BEM, SMACSS, etc.)
- Fixed-Pixel vs rem, em and %
- Responsive images. Drupal non-Drupal solutions and SVGs
- Asynchronous Javascript loading
- Typography in a responsive environment and FOUT, FOIT effects
- How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help.
- Beyond the Mouse: Touch and keyboard events
- Using RWD patterns
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.
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
WordPress has built-in support for storing location information on posts, but no real way to make use of it. The <a>Geo Mashup plugin</a> enables deep, powerful geolocation in WordPress, letting you easily add geolocations (coordinates) to almost any content type. It also displays locations on maps you can embed in your theme, posts or widgets, with a dizzying array of options for what to show and how to display it.
This talk will start with the default geolocation system in WordPress and how Geo Mashup integrates with it. We'll then cover the basics of setup and adding locations on posts, then the different map types and situations where you'd use them. We'll finish with some dev considerations for displaying maps as elegantly as possible.
Responsive Design in Drupal with Zen and Zen Grids
Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.
Front End Development - Beyond Javascript (Robin Cannon)
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
Front-End Development is more than just a Javascript layer. Just because everything is single page apps and you’ve got Bootstrap to back up your Backbone, Ember or Angular, doesn’t mean you’re truly developing a presentation layer. Something that’s a truly great interface between the user and the back end requires the three pillars of front end web; javascript sure, but HTML and CSS are vital too. In this talk Robin redefines what it means to be a front-end developer, and explores frameworks that will help us to build things that users love. He'll cover the de-emphasis of HTML and CSS versus Javascript skills in front end web development, and the benefits of a broader approach that's only going to increase in importance as the Javascript MVC model matures.
Why You Need a Front End Developer
This document discusses why front end developers are needed. It begins by defining what a front end developer is and outlines some of their typical duties, which include working on the user interface, accessibility, testing, multimedia, design, and optimization of the front end. It notes that while back end developers focus more on the server side, front end developers ensure the client-side code and experience are effective. The document also discusses some of the challenges of front end development like different browsers, mobile environments, and JavaScript frameworks. It emphasizes that user interface and design are important aspects that should not be an afterthought.
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
Seven Steps to Creating a Framework
A simple guide to building an interactive framework when wireframes and design guidelines just aren't enough.
More Related Content
What's hot
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.
Building Responsive Websites with Drupal
Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors.
This webinar will discuss how you can apply responsive design techniques to a Drupal website and will include the following topics:
* Steps to building a responsive Drupal 7 theme
* Challenges when designing a responsive layout
* Drupal elements that are particularly challenging to adapt
* CSS techniques for responsive design
* Responsive Drupal base themes
CSS架構如何加速功能開發
The document describes the CSS structure for an education application called InterSIS. It shows the folder structure for stylesheets, with main files like application.css and modules/_all.scss. Entries are the main style files for each page. Partials contain shared and page-specific styles. The entry for the student profile page is _student_profile.css. It also discusses using Ruby on Rails helpers and a grid system for layout. Examples demonstrate integrating styles into views. The document warns against bad practices like duplicating styles.
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance is a case study on what I used to make missedin-hkg.com load in less than 1000ms and optimise front end performance in various ways.
This talk has been held at the Codeaholics Meetup in Hong Kong on 08. April 2015.
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!
What is Object Oriented CSS?
This document discusses object-oriented CSS (OOCSS) as an evolution of CSS that makes it more powerful. OOCSS involves creating reusable CSS objects rather than page-specific rules, setting good global defaults, abstracting reusable elements, separating container and content, and using multiple classes to simulate inheritance. This allows for more scalable, maintainable and performant CSS code. Some best practices of OOCSS include creating semantic object classes like .heading rather than styling specific elements directly. The document provides examples of OOCSS principles and their benefits.
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.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
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.
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
Wireframing basics may 2012
Wireframing is a visual guide that represents the skeletal framework of a website using interface elements and navigational systems. It connects conceptual structure to visual design and varies in fidelity resembling the final product. Wireframing is used to make rapid prototypes and measure design concepts, providing a 10,000 foot view of the product flow, parts, and visual design. It is an iterative process that incorporates early user feedback. Common page types include landing, dashboard, gallery, list, and forms pages. Usability standards and templates help streamline the process, with the goal of rapidly iterating so development can begin.
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
CSS Workflow. Pre & Post
This document discusses CSS workflows and tools for preprocessing and postprocessing CSS, including:
- CSS preprocessors like SASS that add features like variables, nesting, inheritance and mixins to CSS
- PostCSS tools that analyze, lint, and transform CSS to improve and optimize it
- Setting up workflows that involve writing CSS/SASS code, preprocessing it with tools like SASS, then further processing it with PostCSS plugins before it reaches the browser
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Mickley Gillenwater gave a talk at Generate Conference in London where she shared several mistakes she made while learning CSS flexbox and other techniques. These included misunderstanding how flex-basis works, incorrectly using CSS transforms like rotateX, and making assumptions about screen reader support that caused accessibility issues. She emphasized that vulnerability and sharing mistakes openly can help both oneself and others learn. Making mistakes is a natural part of the learning process, and perfection should not be expected or feared.
Web design v roku 2013
This document summarizes trends and best practices in web design in 2013. It discusses concepts like mobile-first design, responsive layouts, simplicity, and user experience-centered design. It also covers specific design elements like fixed header bars, infinite scrolling, CSS3 animations, and social media integration. The document provides examples of standard and the author's preferred workflows for wireframing, visual design, development, and integration with content management systems. It also discusses technologies like Bootstrap, LESS, jQuery, and techniques for responsive design, typography, common design patterns, and touch interfaces.
Improving the Responsive Web Design Process in 2016
It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory.
The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability.
In this session reviewed tools, techniques and concepts to improve our projects:
- Performance and best practices
- CSS structuring and optization (BEM, SMACSS, etc.)
- Fixed-Pixel vs rem, em and %
- Responsive images. Drupal non-Drupal solutions and SVGs
- Asynchronous Javascript loading
- Typography in a responsive environment and FOUT, FOIT effects
- How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help.
- Beyond the Mouse: Touch and keyboard events
- Using RWD patterns
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.
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
WordPress has built-in support for storing location information on posts, but no real way to make use of it. The <a>Geo Mashup plugin</a> enables deep, powerful geolocation in WordPress, letting you easily add geolocations (coordinates) to almost any content type. It also displays locations on maps you can embed in your theme, posts or widgets, with a dizzying array of options for what to show and how to display it.
This talk will start with the default geolocation system in WordPress and how Geo Mashup integrates with it. We'll then cover the basics of setup and adding locations on posts, then the different map types and situations where you'd use them. We'll finish with some dev considerations for displaying maps as elegantly as possible.
Responsive Design in Drupal with Zen and Zen Grids
Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.
Front End Development - Beyond Javascript (Robin Cannon)
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
Front-End Development is more than just a Javascript layer. Just because everything is single page apps and you’ve got Bootstrap to back up your Backbone, Ember or Angular, doesn’t mean you’re truly developing a presentation layer. Something that’s a truly great interface between the user and the back end requires the three pillars of front end web; javascript sure, but HTML and CSS are vital too. In this talk Robin redefines what it means to be a front-end developer, and explores frameworks that will help us to build things that users love. He'll cover the de-emphasis of HTML and CSS versus Javascript skills in front end web development, and the benefits of a broader approach that's only going to increase in importance as the Javascript MVC model matures.
Why You Need a Front End Developer
This document discusses why front end developers are needed. It begins by defining what a front end developer is and outlines some of their typical duties, which include working on the user interface, accessibility, testing, multimedia, design, and optimization of the front end. It notes that while back end developers focus more on the server side, front end developers ensure the client-side code and experience are effective. The document also discusses some of the challenges of front end development like different browsers, mobile environments, and JavaScript frameworks. It emphasizes that user interface and design are important aspects that should not be an afterthought.
What's hot (20)
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids
Front End Development - Beyond Javascript (Robin Cannon)
Front End Development - Beyond Javascript (Robin Cannon)
Viewers also liked
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
Seven Steps to Creating a Framework
A simple guide to building an interactive framework when wireframes and design guidelines just aren't enough.
Visual Regression Testing
The document discusses visual regression testing, which is a type of software testing used to detect unexpected changes to the UI. It works by taking screenshots of an application's user interface at different states and comparing them to reference screenshots to identify visual differences. Tools mentioned that can be used for visual regression testing include PhantomCSS, Wraith, Grunt-photobox, and Needle. The document emphasizes that visual regression testing is important because even small UI changes can have unintended consequences, and it helps ensure the user experience remains consistent.
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.
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.
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.
Think Vitamin CSS
These are slides from my talk at the Think Vitamin HTML & CSS online conference...
http://thinkvitamin.com/online-conferences/html-css/
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.
Viewers also liked (8)
Lessons Learned From Building Your Own CSS Framework
Lessons Learned From Building Your Own CSS Framework
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
Similar to Roll Your Own CSS Framework
Cole Geissinger Development Talk
The document discusses the skills expected of modern web developers, including HTML5, CSS3, JavaScript, basic programming, HTML5 Boilerplate, HTML5 Shiv, Modernizr, HTML5 semantics, CSS3 animations, transitions, rounded corners, gradients, multiple backgrounds, jQuery and other JavaScript frameworks, content management systems like WordPress and Drupal, and more. It provides examples of companies using these skills and additional resources for learning more.
HTML5 for Web Designers
These are the slides I used for a workshop/presentation about HTML5 and related techniques to build web and mobile applications. The session was about half theoretical and half practical. The audience consisted of students wanting to get up to speed with new HTML5/CSS3 related techniques in web development.
Power Tools For Browser-Based Design
The document discusses various tools that can be used for browser-based web design, including markdown, Pandoc, Emmet, Typecast, Morguefile, Placehold.it, Icomoon, Grumpicon, Imagemagick, Kuler, Gridset, Ish, Dreamweaver, frameworks like Bootstrap and Foundation, static site generators like Jekyll and Dexy, templating with Jinja2, browser dev tools, Jsbin, Asciidoc, and Dexy for documentation. It encourages learning from online references and experimenting with different tools to solve problems.
CCSP 2012F 早點下班的工具
This document discusses tools and techniques for making CSS and website development faster. It introduces CSS preprocessors like LESS and SCSS that compile into regular CSS. It also covers responsive front-end frameworks like Bootstrap and Foundation that provide pre-built components for faster site building. Additional tips covered include icon sets, grid systems, responsive design, and techniques for building beautiful sites.
Introduction to Twitter's Bootstrap 2
Presentation I made @eBay Shanghai.
1. Bootstrap Features
2. Why using Bootstrap
3. Built with Bootstrap
About Best friends - HTML, CSS and JS
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.
Rapid Templating with Serve
This document summarizes a presentation about using Sass, Compass, and Serve for rapid templating and designing in the browser. It discusses how responsive design has changed workflows, and tools like Sass, Compass, and Serve allow collaborative work between designers and developers. Serve is presented as a tool that allows building prototypes that resemble the final product through templating with Sass and Compass in a Rails-like MVC structure, without the overhead of a full Rails app.
High-Fidelity Prototyping
This document provides resources for high-fidelity prototyping including graphical UI prototypes, HTML/CSS mockups, clickthrough prototypes, design patterns and guidelines from Apple and other sources, UI frameworks like Bootstrap, prototyping software like Sketch and Axure, color schemes, icons, placeholders, photos, and licensing information. It aims to be a comprehensive list of inspiration and tools for interaction design and high-fidelity prototyping.
High-Fidelity Prototyping
This document provides resources for high-fidelity prototyping including graphical UI prototypes, HTML/CSS mockups, and clickthrough prototypes. It lists inspiration websites, design patterns and guidelines, UI frameworks, prototyping software such as Adobe XD, Sketch, Axure, and Figma. Recommendations are made for collaborative design using Figma, prototyping using proto.io, and single designer work using Adobe XD. Additional resources are provided for color schemes, icons, placeholders, photos, and licensing.
Mobile First - WCJ 2012
This document discusses developing mobile-first applications and websites. It notes that mobile traffic now accounts for over 50% of web usage, with 200% year-over-year growth. It reviews options for responsive web design using CSS and frameworks like Bootstrap versus building native mobile apps. It also covers considerations for monetizing mobile content given restrictions on ad sizes and formats. The document advocates designing first for mobile and using tools like WordPress themes, PhoneGap and Sencha to build cross-platform mobile experiences.
Modern Front-End Development
A talk on front-end developer tools including Yeoman, Grunt.js, Require.js, Bower, and SASS given at Drupal Camp LA 2013.
This talk doesn't address Drupal specifically, but it was aimed to give the audience of drupal developers a look into the state of the art.
Front-end Tools: Sifting Through the Madness
with Louis Lazaris
Presented at FITC Toronto 2015
More info at http://www.fitc.ca/toronto
The front-end tools landscape is growing at an exponential pace. Every week there are new plugins, new coding methodologies, new native apps, new JavaScript utilities, new jQuery plugins, new build tools, Grunt plugins, JavaScript libraries and so on. Many help us to solve problems and be more productive.
This talk will give you a quick overview of the kinds of things that get released every week, showing the variety of what’s available. But we shouldn’t be discouraged or overwhelmed by the amount we need to keep up with.Louis will cover some suggestions for dealing with the madness, and how developers today can benefit greatly from this influx of new stuff, even if they can’t keep up with it all.
OBJECTIVE
Demonstrate how to keep up with at least some of the pace, while benefiting from stuff we might not even use.
TARGET AUDIENCE
Front-end developers.
ASSUMED AUDIENCE KNOWLEDGE
Decent understanding of HTML, CSS, and JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
The wide variety of JavaScript-based utilities available today.
The kinds of CSS and Sass tools that are at our disposal.
How to keep up with the influx of tools.
How to keep from being overwhelmed.
The possibilities to learn from tools that we don’t even use.
Front-end Tools: Sifting Through the Madness
Front-end Tools: Sifting Through the Madness
with Louis Lazaris
Presented at FOVERVIEW
The front-end tools landscape is growing at an exponential pace. Every week there are new plugins, new coding methodologies, new native apps, new JavaScript utilities, new jQuery plugins, new build tools, Grunt plugins, JavaScript libraries and so on. Many help us to solve problems and be more productive.
This talk will give you a quick overview of the kinds of things that get released every week, showing the variety of what’s available. But we shouldn’t be discouraged or overwhelmed by the amount we need to keep up with.Louis will cover some suggestions for dealing with the madness, and how developers today can benefit greatly from this influx of new stuff, even if they can’t keep up with it all.
OBJECTIVE
Demonstrate how to keep up with at least some of the pace, while benefiting from stuff we might not even use.
TARGET AUDIENCE
Front-end developers.
ASSUMED AUDIENCE KNOWLEDGE
Decent understanding of HTML, CSS, and JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
The wide variety of JavaScript-based utilities available today.
The kinds of CSS and Sass tools that are at our disposal.
How to keep up with the influx of tools.
How to keep from being overwhelmed.
The possibilities to learn from tools that we don’t even use.
Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator
The document discusses the history and evolution of web development technologies from client-server applications in the 1990s to modern rich internet applications (RIAs). It describes how JavaScript libraries helped address issues with early AJAX approaches. The document advocates for an integrated programming model combining web expression language, a unified widget framework, open standards, and open source to build RIAs that can also integrate with back-end services.
Ajax World 2008
The document discusses the history and evolution of web development from early client-server applications to modern rich internet applications (RIAs). It covers major technologies and frameworks over time, including the introduction of the web/HTTP, Java, JavaScript libraries, Ajax, and how development has shifted to a model based around HTML, CSS and JavaScript. Key events and companies that drove innovation in the space are also outlined.
Fronteers Workshop: Rabid Prototyping
This document provides an overview of RABID, a toolkit for rapid web mockups and prototyping. RABID uses HTML, CSS and JavaScript along with templates and JSON objects to allow quick creation of mockups without extensive coding. It provides components, advantages like speed and separation of content from structure, and dependencies on tools like jQuery and Handlebars. The document demonstrates using RABID's structure, JSON objects, templates and CSS flexbox capabilities.
Module 07: Wireframes
This document discusses wireframes and provides guidance on how to create them. It begins by explaining what wireframes are not, such as prototypes, visual designs, or marketing materials. It then describes what wireframes are, including low-fidelity visual representations of a website's layout and structure that are free of design elements. The document provides tips for creating wireframes, such as getting inspired, determining your process, choosing tools, using grids and blocks, and adding typographic hierarchy. It cautions that wireframes should remain flexible and not dictate the final design.
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
This presentation was originally presented at Drupal Camp Toronto, 2012.
To view the video cast of this presentation visit http://fosterinteractive.com/blog/responsive-design-case-study
-----DESCRIPTION-----
responsivedesign.ca was launched in February of 2012, and it was well received. It was our first mobile-first responsive site. We built it quickly and knew it wasn’t perfect, but the game plan was to launch early and incrementally improve the site over time.
It’s not even a year later we use whole new workflows, creative design methods, modules, and development tools in our responsive websites. This talk will highlight how we created the original project and what we’ve since learned regarding workflow and development including:
Responsive Images Modules
Creative Concept Development
Device vs. Natural Breakpoints
SASS / Compass + Mixins we use
Dealing with IE
Benchmarking
----- Originally Presented at Drupal Camp Toronto 2012 -----
http://2012.drupalcamptoronto.org/sessions/a-responsive-design-case-study-what-we-did-wrong-building-responsivedesignca-and-how-we-fix
Death of a Themer
Video at http://www.youtube.com/watch?v=HaJnhYPLvx0
Large Drupal projects will generally have a themer or five working alongside the developers, site builders and designers. Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do.
Smaller projects also usually need someone on the team who can make sense of Drupal's output, knows more CSS and JS than anyone else and can configure Views with their eyes closed.
The thing is — and whisper this, if possible redundancy concerns you — we can bypass the themer entirely.
With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.
A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.
http://2013.drupalcamplondon.co.uk/session/death-themer
Death of a Themer - Frontend United - 14 April 2013
"Death of a themer" was presented by James Panton and myself at Frontend United on 14th April 2013. This was a revised and extended talk of the same name presented by James at DrupalCamp London on 2nd March 2013.
http://www.slideshare.net/therealmcjim/death-of-a-themer-drupal-camplondon2013
Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do. They work alongside developers and site builders and are usually hammering out CSS files, overriding templates, writing theme functions and scratching their heads.
The thing is — and whisper this if possible redundancy concerns you — we can bypass the themer entirely.
With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.
A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.
This is an extended version of a session James did recently but will take a closer look at the tools and workflow we created and the design principles that initially drove us to this approach.
Similar to Roll Your Own CSS Framework (20)
Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator
Ajaxworld March 2008 - Jeff Haynie Keynote - Appcelerator
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
Death of a Themer - Frontend United - 14 April 2013
Death of a Themer - Frontend United - 14 April 2013
Recently uploaded
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications.
Presentation of the OECD Artificial Intelligence Review of Germany
Consult the full report at https://www.oecd.org/digital/oecd-artificial-intelligence-review-of-germany-609808d6-en.htm
Removing Uninteresting Bytes in Software Fuzzing
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
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.
Microsoft - Power Platform_G.Aspiotis.pdf
Revolutionizing Application Development
with AI-powered low-code, presentation by George Aspiotis, Sr. Partner Development Manager, Microsoft
Pushing the limits of ePRTC: 100ns holdover for 100 days
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Discover the seamless integration of RPA (Robotic Process Automation), COMPOSER, and APM with AWS IDP enhanced with Slack notifications. Explore how these technologies converge to streamline workflows, optimize performance, and ensure secure access, all while leveraging the power of AWS IDP and real-time communication via Slack notifications.
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.
How to Get CNIC Information System with Paksim Ga.pptx
Pakdata Cf is a groundbreaking system designed to streamline and facilitate access to CNIC information. This innovative platform leverages advanced technology to provide users with efficient and secure access to their CNIC details.
20240607 QFM018 Elixir Reading List May 2024
Everything I found interesting about the Elixir programming ecosystem in May 2024
Climate Impact of Software Testing at Nordic Testing Days
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
UiPath Test Automation using UiPath Test Suite series, part 5
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
ここ3000字までしか入らないけどタイトルの方がたくさん文字入ると思います。
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.
Artificial Intelligence for XMLDevelopment
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
TrustArc Webinar - 2024 Global Privacy Survey
How does your privacy program stack up against your peers? What challenges are privacy teams tackling and prioritizing in 2024?
In the fifth annual Global Privacy Benchmarks Survey, we asked over 1,800 global privacy professionals and business executives to share their perspectives on the current state of privacy inside and outside of their organizations. This year’s report focused on emerging areas of importance for privacy and compliance professionals, including considerations and implications of Artificial Intelligence (AI) technologies, building brand trust, and different approaches for achieving higher privacy competence scores.
See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe.
This webinar will review:
- The top 10 privacy insights from the fifth annual Global Privacy Benchmarks Survey
- The top challenges for privacy leaders, practitioners, and organizations in 2024
- Key themes to consider in developing and maintaining your privacy program
Recently uploaded (20)
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
みなさんこんにちはこれ何文字まで入るの？40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの？えこ...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Roll Your Own CSS Framework
- 1. Roll Your Own CSS FRAMEWORK Mike Aparicio User Interface Engineer, Groupon maparicio@groupon.com @peruvianidol
- 2. DESIGNERS?
- 3. DEVELOPERS?
- 4. FREE FOOD?
- 5. Has this ever happened to you?
- 8. I’m out!
- 9. CSS FRAMEWORKS Twitter Bootstrap (http://twitter.github.io/bootstrap/) Zurb Foundation (http://foundation.zurb.com/) Gumby Framework (http://gumbyframework.com/) Inuit (http://inuitcss.com/) Yaml (http://www.yaml.de/) Kube (http://imperavi.com/kube/) Groundworks (http://groundwork.sidereel.com/) Skeleton (http://www.getskeleton.com/) Workless (http://workless.ikreativ.com/) ... and many more http://usablica.github.io/front-end-frameworks/compare.html
- 29. CSS PREPROCESSORS •SASS (http://sass-lang.com/) •LESS (http://lesscss.org/) •Stylus (http://learnboost.github.io/stylus/)
- 31. CodeKit Mac - $25 (http://incident57.com/codekit/) Prepros Win - Open Source (http://alphapixels.com/prepros/) Koala Mac/Win/Linux - Open Source (http://koala-app.com/) Scout Mac/Win - Open Source (http://mhs.github.io/scout-app/)
- 59. NOT US
- 60. US