CSS架構如何加速功能開發

•

21 likes•1,527 views

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.

Oliver
CSS
Front End Developer

bootstrap
keybridge

stylesheets/!
|!
|-- keybridge/!
| |-- fonts.css.sass!
| |-- form.css.sass!
| |-- _tag.css.sass!
| …!
|!
|-- bootstrap_core.css.sass # import bootstrap stylesheet!
— keybridge.css.sass # require all !
Bootstrap-Keybridge
CSS structure

Bootstrap-Keybridge
CSS structure

Bootstrap-Keybridge
CSS structure

Bootstrap-Keybridge
dribbble.com/shots/1501436
Master UI Kit - Derek Designer

Bootstrap-Keybridge
Github wiki pages

stylesheets/!
|-- application.css.sass!
|!
x-- modules/!
x |-- _all.scss!
x -- _utility.scss!
|!
|-- entries/ # Main syle entry at each page!
| |-- dashboard.css.sass!
| |-- contacts.css.sass!
|!
|-- partials/ # Partials!
| |-- shared/!
| | |-- _aside_siblings.css.sass!
| | |-- _aside_parents.css.sass!
| |!
| -- contacts/!
| |-- students/!
| | |-- _student_form.css.sass!
| | |-- _academic_progress.css.sass!
| |!
| `-- families/!
| |-- _family_form.css.sass!
|!
|-- shared/!
| |-- _mod_form.css.sass!
| |-- _mod_slider.css.sass!
| -- _icon_activity.css.sass!
|!
-- vendor/ # Style from other projects!
|-- _nprogress.css!
-- _tipsy.css
Y
Y
InterSIS
CSS structure
Primary Sass File
Deﬁned in bootstrap-keybridge

InterSIS
CSS entry example

InterSIS
CSS entry example - Namespace deﬁned by resources

Entry
InterSIS
CSS entry example

stylesheets/!
|-- application.css.sass # primary Sass file!
|!
x-- modules/ # defined in bootstrap-keybridge!
x |-- _all.scss!
x `-- _utility.scss!
|!
|-- entries/ # Main syle entry at each page!
| |-- dashboard.css.sass!
| |-- contacts.css.sass!
|!
|-- partials/ # Partials!
| |-- shared/!
| | |-- _aside_siblings.css.sass!
| | |-- _aside_parents.css.sass!
| |!
| `-- contacts/!
| |-- students/!
| | |-- _student_form.css.sass!
| | |-- _academic_progress.css.sass!
| |!
| `-- families/!
| |-- _family_form.css.sass!
|!
|-- shared/!
| |-- _mod_form.css.sass!
| |-- _mod_slider.css.sass!
| `-- _icon_activity.css.sass!
|!
`-- vendor/ # Style from other projects!
|-- _nprogress.css!
`-- _tipsy.css
Y
InterSIS
CSS structure

InterSIS
Sample screenshot

InterSIS
Sample screenshot

InterSIS
_student_proﬁle.html.erb

InterSIS
_student_proﬁle.css.sass

InterSIS
Grid System
.grid-compact .grid-full .grid-nav
min-width: 960px

InterSIS
Ruby on Rails Helper

How does this help us?

InterSIS
Example

InterSIS
Example

Bad~~~ Practice

OpenApply
Applicant details v2

OpenApply
Bad practice example

OpenApply
Bad practice example

不要急，但是要快！“ “

OpenApply
Bad practice example

OpenApply
Bad practice example

OpenApply
Bad practice example

CSS !

Aaron
FE Lead
19
Sr. FE Dev
Joseph
FE Lead
Thanks to all ex-front end team menbers!

Oliver Front End Developer
Thank you !
Q&A

Recommended

Theming Wordpress with Adobe

Theming Wordpress with Adobe

Theming Wordpress with Adobe

How to develop a CSS Framework

How to develop a CSS Framework

How to develop a CSS FrameworkOlivier Besson

Roll Your Own CSS Framework

Roll Your Own CSS Framework

Roll Your Own CSS Framework

Responsive Design in Drupal with Zen and Zen Grids

Responsive Design in Drupal with Zen and Zen Grids

Responsive Design in Drupal with Zen and Zen Grids

Suzanne Dergacheva

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Suzanne Dergacheva

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

Why You Need a Front End Developer

Why You Need a Front End Developer

Why You Need a Front End Developer

Especially in small companies, you're often expected to be the end-to-end developer and handle everything from the database to the user interface. This was easy enough in the old days when the UI was little more than a table-based-layout with some sliced graphics. But now with the latest technologies, the front end is becoming just as complex as the back end. In order to get the job done you need to rely more and more upon an ever growing, endless mountain of JavaScript libraries, plugins and boilerplates. Or maybe... you just need a front end developer.

Website Review with Screen Reader vs. SiteImprove

Website Review with Screen Reader vs. SiteImprove

Website Review with Screen Reader vs. SiteImprove

Comparison of Accessibility test results with automation versus a walkthrough of the site with Apple Voice Over screen reader. The presentation was made to my team members at Mississippi State University Libraries to demonstrate the effectiveness of SiteImprove, our automated website accessibility checker compared with the actual experience of using the site with assistive technology. As a novice with assistive technology, this does not serve as a legitimate study or review of the site, but simply a demonstration.

Introduction to the Drupal - Web Experience Toolkit

Introduction to the Drupal - Web Experience Toolkit

Introduction to the Drupal - Web Experience Toolkit

Suzanne Dergacheva

Recommended

Theming Wordpress with Adobe

Theming Wordpress with Adobe

Theming Wordpress with Adobe

How to develop a CSS Framework

How to develop a CSS Framework

How to develop a CSS FrameworkOlivier Besson

Roll Your Own CSS Framework

Roll Your Own CSS Framework

Roll Your Own CSS Framework

Responsive Design in Drupal with Zen and Zen Grids

Responsive Design in Drupal with Zen and Zen Grids

Responsive Design in Drupal with Zen and Zen Grids

Suzanne Dergacheva

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012

Suzanne Dergacheva

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

Why You Need a Front End Developer

Why You Need a Front End Developer

Why You Need a Front End Developer

Especially in small companies, you're often expected to be the end-to-end developer and handle everything from the database to the user interface. This was easy enough in the old days when the UI was little more than a table-based-layout with some sliced graphics. But now with the latest technologies, the front end is becoming just as complex as the back end. In order to get the job done you need to rely more and more upon an ever growing, endless mountain of JavaScript libraries, plugins and boilerplates. Or maybe... you just need a front end developer.

Website Review with Screen Reader vs. SiteImprove

Website Review with Screen Reader vs. SiteImprove

Website Review with Screen Reader vs. SiteImprove

Comparison of Accessibility test results with automation versus a walkthrough of the site with Apple Voice Over screen reader. The presentation was made to my team members at Mississippi State University Libraries to demonstrate the effectiveness of SiteImprove, our automated website accessibility checker compared with the actual experience of using the site with assistive technology. As a novice with assistive technology, this does not serve as a legitimate study or review of the site, but simply a demonstration.

Introduction to the Drupal - Web Experience Toolkit

Introduction to the Drupal - Web Experience Toolkit

Introduction to the Drupal - Web Experience Toolkit

Suzanne Dergacheva

Intro to jQuery for Drupal

Intro to jQuery for Drupal

Intro to jQuery for Drupaljhamiltoorion

Be nice to your designers

Be nice to your designers

Be nice to your designersPai-Cheng Tao

Front End Development - Beyond Javascript (Robin Cannon)

Front End Development - Beyond Javascript (Robin Cannon)

Front End Development - Beyond Javascript (Robin Cannon)

Future Insights

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.

DrupalCamp NYC Panels Presentation - April 2014

DrupalCamp NYC Panels Presentation - April 2014

DrupalCamp NYC Panels Presentation - April 2014

Suzanne Dergacheva

Zurb foundation

Zurb foundation

Zurb foundation

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Too many responsive websites fall into the "move the sidebars around" trap and end up looking the same as any other responsive site. By combining the CSS of Zen Grids and the smart markup of the Zen 5 theme, you can create a stellar, unique responsive design for your website with ease. Zen has always been a popular starting point for building Drupal themes, but the new Zen 5 has been re-written from the ground-up with updated best practices including HTML5, Modernizr integration, Normalize, IE conditional classes, responsive layouts, and, best of all, Sass and Compass integration. Zen Grids is an all new project, independent from the Zen theme. The Zen Grids system reinvents the flexible, but complicated CSS layout method in old versions of the Zen theme, transforming it into a radically simplified process using the power of Sass. Where traditional grid systems (like 960.gs) often don't scale to match a responsive design's requirements, Zen Grids makes it incredibly easy to create amazing responsive layouts in just a couple lines of code.

SC5 Style Guide Generator

SC5 Style Guide Generator

SC5 Style Guide GeneratorVarya Stepanova

Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3

Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3

Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3

BDUG Responsive Web Theming - 7/23/12

BDUG Responsive Web Theming - 7/23/12

BDUG Responsive Web Theming - 7/23/12

Drupal Camp Manila 2014 - Theming with Zen

Drupal Camp Manila 2014 - Theming with Zen

Drupal Camp Manila 2014 - Theming with Zen

WordPress: A Designer's CMS

WordPress: A Designer's CMS

WordPress: A Designer's CMS

Drupal Site Building Checklist from DrupalCamp New Jersey

Drupal Site Building Checklist from DrupalCamp New Jersey

Drupal Site Building Checklist from DrupalCamp New Jersey

Suzanne Dergacheva

So you want to build a simple Drupal website? Maybe it's a corporate website for a small organization or a small university department. Once you get started, you might realize that your website is not so simple after all. While Drupal provides lots of functionality out-of-the box, even the simplest website requires a lot of configuration, installing common contributed modules, and checking of checkboxes. How do you make sure that you haven't missed anything? In this presentation, I'll walk you through my checklist of essential core configuration and contributed modules that pretty much every Drupal website will need. I'll use a McGill University research group website as an example. Whether you're a project manager, site builder or administrator, this presentation should give you food for thought and help you build your own checklist for your next Drupal project.

Sass - Getting Started with Sass!

Sass - Getting Started with Sass!

Sass - Getting Started with Sass!

Making Your Own CSS Framework

Making Your Own CSS Framework

Making Your Own CSS Framework

Intro to Drupal

Intro to Drupal

Intro to Drupalmtlgirlgeeks

Drupal distributions - how to build them

Drupal distributions - how to build them

Drupal distributions - how to build them

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

CSS for Mobile

Getting started with CSS frameworks using Zurb foundation

Getting started with CSS frameworks using Zurb foundation

Getting started with CSS frameworks using Zurb foundation

Create SASSY Web Parts - SPSMilan

Create SASSY Web Parts - SPSMilan

Create SASSY Web Parts - SPSMilan

走在前面,看見世界的設計

GSS FED 別亂來交給我們來 Bear

GSS FED 別亂來交給我們來 Bear

GSS FED 別亂來交給我們來 Bear DesBear Li

More Related Content

What's hot

Intro to jQuery for Drupal

Intro to jQuery for Drupal

Intro to jQuery for Drupaljhamiltoorion

Be nice to your designers

Be nice to your designers

Be nice to your designersPai-Cheng Tao

Front End Development - Beyond Javascript (Robin Cannon)

Front End Development - Beyond Javascript (Robin Cannon)

Front End Development - Beyond Javascript (Robin Cannon)

Future Insights

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.

DrupalCamp NYC Panels Presentation - April 2014

DrupalCamp NYC Panels Presentation - April 2014

DrupalCamp NYC Panels Presentation - April 2014

Suzanne Dergacheva

Zurb foundation

Zurb foundation

Zurb foundation

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Too many responsive websites fall into the "move the sidebars around" trap and end up looking the same as any other responsive site. By combining the CSS of Zen Grids and the smart markup of the Zen 5 theme, you can create a stellar, unique responsive design for your website with ease. Zen has always been a popular starting point for building Drupal themes, but the new Zen 5 has been re-written from the ground-up with updated best practices including HTML5, Modernizr integration, Normalize, IE conditional classes, responsive layouts, and, best of all, Sass and Compass integration. Zen Grids is an all new project, independent from the Zen theme. The Zen Grids system reinvents the flexible, but complicated CSS layout method in old versions of the Zen theme, transforming it into a radically simplified process using the power of Sass. Where traditional grid systems (like 960.gs) often don't scale to match a responsive design's requirements, Zen Grids makes it incredibly easy to create amazing responsive layouts in just a couple lines of code.

SC5 Style Guide Generator

SC5 Style Guide Generator

SC5 Style Guide GeneratorVarya Stepanova

Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3

Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3

Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3

BDUG Responsive Web Theming - 7/23/12

BDUG Responsive Web Theming - 7/23/12

BDUG Responsive Web Theming - 7/23/12

Drupal Camp Manila 2014 - Theming with Zen

Drupal Camp Manila 2014 - Theming with Zen

Drupal Camp Manila 2014 - Theming with Zen

WordPress: A Designer's CMS

WordPress: A Designer's CMS

WordPress: A Designer's CMS

Drupal Site Building Checklist from DrupalCamp New Jersey

Drupal Site Building Checklist from DrupalCamp New Jersey

Drupal Site Building Checklist from DrupalCamp New Jersey

Suzanne Dergacheva

So you want to build a simple Drupal website? Maybe it's a corporate website for a small organization or a small university department. Once you get started, you might realize that your website is not so simple after all. While Drupal provides lots of functionality out-of-the box, even the simplest website requires a lot of configuration, installing common contributed modules, and checking of checkboxes. How do you make sure that you haven't missed anything? In this presentation, I'll walk you through my checklist of essential core configuration and contributed modules that pretty much every Drupal website will need. I'll use a McGill University research group website as an example. Whether you're a project manager, site builder or administrator, this presentation should give you food for thought and help you build your own checklist for your next Drupal project.

Sass - Getting Started with Sass!

Sass - Getting Started with Sass!

Sass - Getting Started with Sass!

Making Your Own CSS Framework

Making Your Own CSS Framework

Making Your Own CSS Framework

Intro to Drupal

Intro to Drupal

Intro to Drupalmtlgirlgeeks

Drupal distributions - how to build them

Drupal distributions - how to build them

Drupal distributions - how to build them

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

CSS for Mobile

Getting started with CSS frameworks using Zurb foundation

Getting started with CSS frameworks using Zurb foundation

Getting started with CSS frameworks using Zurb foundation

Create SASSY Web Parts - SPSMilan

Create SASSY Web Parts - SPSMilan

Create SASSY Web Parts - SPSMilan

What's hot (20)

Intro to jQuery for Drupal

Intro to jQuery for Drupal

Intro to jQuery for Drupal

Be nice to your designers

Be nice to your designers

Be nice to your designers

Front End Development - Beyond Javascript (Robin Cannon)

Front End Development - Beyond Javascript (Robin Cannon)

Front End Development - Beyond Javascript (Robin Cannon)

DrupalCamp NYC Panels Presentation - April 2014

DrupalCamp NYC Panels Presentation - April 2014

DrupalCamp NYC Panels Presentation - April 2014

Zurb foundation

Zurb foundation

Zurb foundation

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

SC5 Style Guide Generator

SC5 Style Guide Generator

SC5 Style Guide Generator

Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3

Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3

Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3

BDUG Responsive Web Theming - 7/23/12

BDUG Responsive Web Theming - 7/23/12

BDUG Responsive Web Theming - 7/23/12

Drupal Camp Manila 2014 - Theming with Zen

Drupal Camp Manila 2014 - Theming with Zen

Drupal Camp Manila 2014 - Theming with Zen

WordPress: A Designer's CMS

WordPress: A Designer's CMS

WordPress: A Designer's CMS

Drupal Site Building Checklist from DrupalCamp New Jersey

Drupal Site Building Checklist from DrupalCamp New Jersey

Drupal Site Building Checklist from DrupalCamp New Jersey

Sass - Getting Started with Sass!

Sass - Getting Started with Sass!

Sass - Getting Started with Sass!

Making Your Own CSS Framework

Making Your Own CSS Framework

Making Your Own CSS Framework

Intro to Drupal

Intro to Drupal

Intro to Drupal

Drupal distributions - how to build them

Drupal distributions - how to build them

Drupal distributions - how to build them

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

CSS for Mobile

Getting started with CSS frameworks using Zurb foundation

Getting started with CSS frameworks using Zurb foundation

Getting started with CSS frameworks using Zurb foundation

Create SASSY Web Parts - SPSMilan

Create SASSY Web Parts - SPSMilan

Create SASSY Web Parts - SPSMilan

Viewers also liked

走在前面,看見世界的設計

GSS FED 別亂來交給我們來 Bear

GSS FED 別亂來交給我們來 Bear

GSS FED 別亂來交給我們來 Bear DesBear Li

OAuth簡介

SiteTag 系統窮人調校法經驗談

SiteTag 系統窮人調校法經驗談

SiteTag 系統窮人調校法經驗談

符合時代的介面設計潮流

Caching and tuning fun for high scalability

Caching and tuning fun for high scalability

Caching and tuning fun for high scalability

Caching has been a 'hot' topic for a few years. But caching takes more than merely taking data and putting it in a cache : the right caching techniques can improve performance and reduce load significantly. But we'll also look at some major pitfalls, showing that caching the wrong way can bring down your site. If you're looking for a clear explanation about various caching techniques and tools like Memcached, Nginx and Varnish, as well as ways to deploy them in an efficient way, this talk is for you.

Vital UI kit

Pinkoi 與 RWD @RGBA 構思

Pinkoi 與 RWD @RGBA 構思

Pinkoi 與 RWD @RGBA 構思

淺談 Startup 公司的軟體開發流程 v2

淺談 Startup 公司的軟體開發流程 v2

淺談 Startup 公司的軟體開發流程 v2

Viewers also liked (9)

走在前面,看見世界的設計

GSS FED 別亂來交給我們來 Bear

GSS FED 別亂來交給我們來 Bear

GSS FED 別亂來交給我們來 Bear

OAuth簡介

SiteTag 系統窮人調校法經驗談

SiteTag 系統窮人調校法經驗談

SiteTag 系統窮人調校法經驗談

符合時代的介面設計潮流

Caching and tuning fun for high scalability

Caching and tuning fun for high scalability

Caching and tuning fun for high scalability

Vital UI kit

Pinkoi 與 RWD @RGBA 構思

Pinkoi 與 RWD @RGBA 構思

Pinkoi 與 RWD @RGBA 構思

淺談 Startup 公司的軟體開發流程 v2

淺談 Startup 公司的軟體開發流程 v2

淺談 Startup 公司的軟體開發流程 v2

Similar to CSS架構如何加速功能開發

CSS Workflow. Pre & Post

CSS Workflow. Pre & Post

CSS Workflow. Pre & Post

7 web design

WordPress Theme Structure

WordPress Theme Structure

WordPress Theme Structure

Modern Front-End Development

Modern Front-End Development

Modern Front-End Development

Css frameworkOlivier Besson

Css frameworkOlivier Besson

Death of a Themer

Death of a Themer

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

Team styles

Jina bolton - Refactoring Web Interfaces

Jina bolton - Refactoring Web Interfaces

Jina bolton - Refactoring Web Interfaces

Often designers and developers see Refactoring front end user interfaces as a dreaded, monolithic task. Organization, architecture, clean up, optimization, and documentation all seem tedious and overwhelming. However, if you're armed with the right tools and a solid foundation, you may find refactoring to be actually quite fun. Learn some Sass, organization, and documentation tricks from a product designer's perspective. Start making refactoring a regular part of your design process and development workflows.

SASS is more than LESS

SASS is more than LESS

SASS is more than LESSItai Koren

Managing responsive websites with css preprocessors.

Managing responsive websites with css preprocessors.

Managing responsive websites with css preprocessors.

The University of Akron

CSS3

Chathuranga Jayanath

DrupalCamp Chattanooga - September 2014 - Sass 101

DrupalCamp Chattanooga - September 2014 - Sass 101

DrupalCamp Chattanooga - September 2014 - Sass 101

Web Frontend development: tools and good practices to (re)organize the chaos

Web Frontend development: tools and good practices to (re)organize the chaos

Web Frontend development: tools and good practices to (re)organize the chaos

Matteo Papadopoulos

After my first attempt to "organize the chaos" (2012) in the structure of a front-end project, Stefano Verna (@steffoz) and I, have tried to bring together a number of tools and conventions to deal with front-end development in a way that could be understandable and maintainable, over the time, by a whole team. This presentation has been performed, for the first time, during the Ruby-Day-2014 in Venice, Italy. Here the video of the speech (italian): https://www.youtube.com/watch?v=fUJOJY_yVXg&index=6&list=PL5ImBN21eKvbQ6kH6WCAqj1QqgusGsiO0

Create SASSy web parts in SPFx

Create SASSy web parts in SPFx

Create SASSy web parts in SPFx

[Bauer] SASSy web parts with SPFX

[Bauer] SASSy web parts with SPFX

[Bauer] SASSy web parts with SPFX

European Collaboration Summit

[Stefan Bauer] For more than one decade no other SASS revolutionised the way we write CSS nowadays. In modern SharePoint development, this is the core ingredient to deliver optimised and well architecture. SASS is also one of the core ingredients to develop new customisations for SharePoint through SPFX. This session will give you an overview of the most useful concepts in SASS. Besides you will get to know some limitations in SPFX and how to handle those properly. After this session you will be able to: • Sketch and develop web parts faster • Create your reusable CSS • Apply themes to your web parts • Handle external CSS properly in SPFX

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

CSS can get overly complex and unwieldy very quickly - especially on SharePoint Projects. To achieve the SharePoint branding you desire, often results in thousands of lines of CSS across many files. This approach is error prone and also a maintenance nightmare! However, there is a better way… SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach to develop your CSS! SASS is an extension to CSS which arms you with programming features such as variables, functions, loops and many more. Join my session and I will take you from a complete SASS novice to someone that knows where SASS fits and how to use it with SharePoint. Key Takeaways : - I will explain what SASS is and where you would use it. - How to use SASS to brand SharePoint without requiring lengthy deployments. - How to create simple Rich Text Editor Styles using mixins and includes. - How to apply a Grid layout and make it Responsive. - How to structure your branding correctly to make it more maintainable. - How CSS 4 fits into the picture and does it make SASS obsolete?

CSS pattern libraries

CSS pattern libraries

CSS pattern libraries

Rapid Prototyping

Rapid Prototyping

Rapid PrototypingEven Wu

Old Dog, New Tricks

Old Dog, New Tricks

Old Dog, New Tricks

In 2006 Simon wrote a successful book about learning CSS. Building the web wasn’t easy back then, but CSS was pretty basic. Simon also used to talk about systems a lot, but didn’t have many answers. Fast-forward to 2014 and everything has changed; that CSS book is both useless and wrong, and systems inform much of what we build. This talk will look at how the landscape changed for front-end designers, and how we must think more holistically about the scope of our projects. With practical examples he’ll explore the tools, methodologies and systems that reenergised him and helped make sense of the whole darned mess.

Similar to CSS架構如何加速功能開發 (20)

CSS Workflow. Pre & Post

CSS Workflow. Pre & Post

CSS Workflow. Pre & Post

7 web design

WordPress Theme Structure

WordPress Theme Structure

WordPress Theme Structure

Modern Front-End Development

Modern Front-End Development

Modern Front-End Development

Css framework

Css framework

Death of a Themer

Death of a Themer

Death of a Themer

Team styles

Jina bolton - Refactoring Web Interfaces

Jina bolton - Refactoring Web Interfaces

Jina bolton - Refactoring Web Interfaces

SASS is more than LESS

SASS is more than LESS

SASS is more than LESS

Managing responsive websites with css preprocessors.

Managing responsive websites with css preprocessors.

Managing responsive websites with css preprocessors.

CSS3

DrupalCamp Chattanooga - September 2014 - Sass 101

DrupalCamp Chattanooga - September 2014 - Sass 101

DrupalCamp Chattanooga - September 2014 - Sass 101

Web Frontend development: tools and good practices to (re)organize the chaos

Web Frontend development: tools and good practices to (re)organize the chaos

Web Frontend development: tools and good practices to (re)organize the chaos

Create SASSy web parts in SPFx

Create SASSy web parts in SPFx

Create SASSy web parts in SPFx

[Bauer] SASSy web parts with SPFX

[Bauer] SASSy web parts with SPFX

[Bauer] SASSy web parts with SPFX

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!

CSS pattern libraries

CSS pattern libraries

CSS pattern libraries

Rapid Prototyping

Rapid Prototyping

Rapid Prototyping

Old Dog, New Tricks

Old Dog, New Tricks

Old Dog, New Tricks

Recently uploaded

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

Do you want to learn how to model and simulate an electrical network from scratch in under an hour? Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)! During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook. PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides: - A fully editable and extendable library for grid component modelling; - Visualization tools to display your network; - Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses; The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well. What you will learn during the webinar: - For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills; - For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Essentials of Automations: Optimizing FME Workflows with Parameters

Essentials of Automations: Optimizing FME Workflows with Parameters

Essentials of Automations: Optimizing FME Workflows with Parameters

Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place. Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects. Here’s what you’ll gain: - Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows. - Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy. - Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency. - Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity. We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic. Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.

Bits & Pixels using AI for Good.........

Bits & Pixels using AI for Good.........

Bits & Pixels using AI for Good.........

Alison B. Lowndes

The Art of the Pitch: WordPress Relationships and Sales

The Art of the Pitch: WordPress Relationships and Sales

The Art of the Pitch: WordPress Relationships and Sales

Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes? All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.

Leading Change strategies and insights for effective change management pdf 1.pdf

Leading Change strategies and insights for effective change management pdf 1.pdf

Leading Change strategies and insights for effective change management pdf 1.pdf

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Epistemic Interaction - tuning interfaces to provide information for AI support

Epistemic Interaction - tuning interfaces to provide information for AI support

Epistemic Interaction - tuning interfaces to provide information for AI support

Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024 https://alandix.com/academic/papers/synergy2024-epistemic/ As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more. Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/ Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...

Accelerate your Kubernetes clusters with Varnish Caching

Accelerate your Kubernetes clusters with Varnish Caching

Accelerate your Kubernetes clusters with Varnish Caching

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

How world-class product teams are winning in the AI era by CEO and Founder, P...

How world-class product teams are winning in the AI era by CEO and Founder, P...

How world-class product teams are winning in the AI era by CEO and Founder, P...

UiPath Test Automation using UiPath Test Suite series, part 4

UiPath Test Automation using UiPath Test Suite series, part 4

UiPath Test Automation using UiPath Test Suite series, part 4

Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap. The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies. Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques What will you get from this session? 1. Insights into SAP testing best practices 2. Heatmap utilization for testing 3. Optimization of testing processes 4. Demo Topics covered: Execution from the test manager Orchestrator execution result Defect reporting SAP heatmap example with demo Speaker: Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP

JMeter webinar - integration with InfluxDB and Grafana

JMeter webinar - integration with InfluxDB and Grafana

JMeter webinar - integration with InfluxDB and Grafana

Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application. In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics. Length: 30 minutes Session Overview ------------------------------------------- During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana: - What out-of-the-box solutions are available for real-time monitoring JMeter tests? - What are the benefits of integrating InfluxDB and Grafana into the load testing stack? - Which features are provided by Grafana? - Demonstration of InfluxDB and Grafana using a practice web application To view the webinar recording, go to: https://www.rttsweb.com/jmeter-integration-webinar

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management. The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM). Speakers: Bob Boule Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle. Gopinath Rebala Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.

The Future of Platform Engineering

The Future of Platform Engineering

The Future of Platform Engineering

Jemma Hussein Allen

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development. The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers: State of global ICS asset and network exposure Sectoral targets and attacks as well as the cost of ransom Global APT activity, AI usage, actor and tactic profiles, and implications Rise in volumes of AI-powered cyberattacks Major cyber events in 2024 Malware and malicious payload trends Cyberattack types and targets Vulnerability exploit attempts on CVEs Attacks on counties – USA Expansion of bot farms – how, where, and why In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East Why are attacks on smart factories rising? Cyber risk predictions Axis of attacks – Europe Systemic attacks in the Middle East Download the full report from here: https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/

DevOps and Testing slides at DASA Connect

DevOps and Testing slides at DASA Connect

DevOps and Testing slides at DASA Connect

Recently uploaded (20)

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Essentials of Automations: Optimizing FME Workflows with Parameters

Essentials of Automations: Optimizing FME Workflows with Parameters

Essentials of Automations: Optimizing FME Workflows with Parameters

Bits & Pixels using AI for Good.........

Bits & Pixels using AI for Good.........

Bits & Pixels using AI for Good.........

The Art of the Pitch: WordPress Relationships and Sales

The Art of the Pitch: WordPress Relationships and Sales

The Art of the Pitch: WordPress Relationships and Sales

Leading Change strategies and insights for effective change management pdf 1.pdf

Leading Change strategies and insights for effective change management pdf 1.pdf

Leading Change strategies and insights for effective change management pdf 1.pdf

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Epistemic Interaction - tuning interfaces to provide information for AI support

Epistemic Interaction - tuning interfaces to provide information for AI support

Epistemic Interaction - tuning interfaces to provide information for AI support

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...

Accelerate your Kubernetes clusters with Varnish Caching

Accelerate your Kubernetes clusters with Varnish Caching

Accelerate your Kubernetes clusters with Varnish Caching

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

How world-class product teams are winning in the AI era by CEO and Founder, P...

How world-class product teams are winning in the AI era by CEO and Founder, P...

How world-class product teams are winning in the AI era by CEO and Founder, P...

UiPath Test Automation using UiPath Test Suite series, part 4

UiPath Test Automation using UiPath Test Suite series, part 4

UiPath Test Automation using UiPath Test Suite series, part 4

JMeter webinar - integration with InfluxDB and Grafana

JMeter webinar - integration with InfluxDB and Grafana

JMeter webinar - integration with InfluxDB and Grafana

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

The Future of Platform Engineering

The Future of Platform Engineering

The Future of Platform Engineering

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

State of ICS and IoT Cyber Threat Landscape Report 2024 preview

DevOps and Testing slides at DASA Connect

DevOps and Testing slides at DASA Connect

DevOps and Testing slides at DASA Connect

CSS架構如何加速功能開發

1. Oliver CSS Front End Developer

2.

3.

4.

5. bootstrap keybridge

6. stylesheets/! |! |-- keybridge/! | |-- fonts.css.sass! | |-- form.css.sass! | |-- _tag.css.sass! | …! |! |-- bootstrap_core.css.sass # import bootstrap stylesheet! — keybridge.css.sass # require all ! Bootstrap-Keybridge CSS structure

7. Bootstrap-Keybridge CSS structure

8. Bootstrap-Keybridge CSS structure

9. Bootstrap-Keybridge dribbble.com/shots/1501436 Master UI Kit - Derek Designer

10. Bootstrap-Keybridge Github wiki pages

11. stylesheets/! |-- application.css.sass! |! x-- modules/! x |-- _all.scss! x -- _utility.scss! |! |-- entries/ # Main syle entry at each page! | |-- dashboard.css.sass! | |-- contacts.css.sass! |! |-- partials/ # Partials! | |-- shared/! | | |-- _aside_siblings.css.sass! | | |-- _aside_parents.css.sass! | |! | -- contacts/! | |-- students/! | | |-- _student_form.css.sass! | | |-- _academic_progress.css.sass! | |! | `-- families/! | |-- _family_form.css.sass! |! |-- shared/! | |-- _mod_form.css.sass! | |-- _mod_slider.css.sass! | -- _icon_activity.css.sass! |! -- vendor/ # Style from other projects! |-- _nprogress.css! -- _tipsy.css Y Y InterSIS CSS structure Primary Sass File Deﬁned in bootstrap-keybridge

12. InterSIS CSS entry example

13. InterSIS CSS entry example - Namespace deﬁned by resources

14. Entry InterSIS CSS entry example

15. stylesheets/! |-- application.css.sass # primary Sass file! |! x-- modules/ # defined in bootstrap-keybridge! x |-- _all.scss! x `-- _utility.scss! |! |-- entries/ # Main syle entry at each page! | |-- dashboard.css.sass! | |-- contacts.css.sass! |! |-- partials/ # Partials! | |-- shared/! | | |-- _aside_siblings.css.sass! | | |-- _aside_parents.css.sass! | |! | `-- contacts/! | |-- students/! | | |-- _student_form.css.sass! | | |-- _academic_progress.css.sass! | |! | `-- families/! | |-- _family_form.css.sass! |! |-- shared/! | |-- _mod_form.css.sass! | |-- _mod_slider.css.sass! | `-- _icon_activity.css.sass! |! `-- vendor/ # Style from other projects! |-- _nprogress.css! `-- _tipsy.css Y InterSIS CSS structure

16. InterSIS Sample screenshot

17. InterSIS Sample screenshot

18. InterSIS _student_proﬁle.html.erb

19. InterSIS _student_proﬁle.css.sass

20. InterSIS Grid System .grid-compact .grid-full .grid-nav min-width: 960px

21. InterSIS Ruby on Rails Helper

22. How does this help us?

23. InterSIS Example

24. InterSIS Example

25. Bad~~~ Practice

26. OpenApply Applicant details v2

27. OpenApply Bad practice example

28. OpenApply Bad practice example

29. 不要急，但是要快！“ “

30. OpenApply Bad practice example

31. OpenApply Bad practice example

32. OpenApply Bad practice example

34. Aaron FE Lead 19 Sr. FE Dev Joseph FE Lead Thanks to all ex-front end team menbers!

35. Oliver Front End Developer Thank you ! Q&A