Introduction to Baidu map Web app front-end style guide

•

1 j'aime•1,385 vues

houhr

Technologie

Introduction to
Baidu Map Web App
Front-end Style Guide
by Hongru Hou
2014.2.20

Contents
What is Front-end style guide?
How did our SG born?
What dose it include?
How to use it?
How to maintain it?
Further thinking
2

£2.00
“Front-end style guides […] to make maintaining a site
easier […] built speciﬁcally for the web […] uses real
code and works in the browser […] living
documentation and grows organically with a site
throughout its lifetime.”
–Anna Debenham
5

Set up scaffolds
kss-node-template

Style Guide Boilerplate
Pattern Lab
Kalei Style Guide

fontcustom
gulp

Grunt

7

Grunt vs. gulp

http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/

Battle with PM and UE
Remove, remove, remove
Reduce, reduce, reduce
Check, check, check

9

Results of the battle
Before

After

%

bg-color

11

7

-36.7%

opacity

5

2

-60%

font-family

2

1

-50%

font-size

8

4

-50%

color

29

7

-75.9%

Background

Font

Style tile
背景颜色
#FFFFFF

#F9F9F9

字体颜色
#F2F2F2

#EAEAEA

背景颜色透明度

#000000

#6BB1F7

#FFFFFF

#CFCFCF

#848484

#555555

#3b3b3b

字体大小

字体样式

24pt

Mac:
PC:

28pt
0.8

30pt

32pt
0.8

边框
#D4D4D4

1px

#F6F6F6

1px

#6BB1F7

Design principle
Separate structure and skin
Separate container and content

}

OOCSS

Meaningful class

12

Hand in hand with Sass
Variables
Nesting
Partials (@import)
Mixins (@include)
Inheritance (@extend)
Control Directives (e.g. @for)
13

Folder structure
stylesheets
scss
css
styleguide
iconfonts
public
15

SCSS
_reset.scss + _mixin.scss + _utilities.scss
_basic.scss + _grid.scss
_components.scss
_icon-font.scss
main.scss + sg.scss
16

Naming Conventions
Block—Element__Modiﬁer sucks
SM (Sassier Modiﬁer)
SM+

18

“In CSS, identiﬁers (including element names,
classes, and IDs in selectors) can contain only
the characters [a-zA-Z0-9] and ISO 10646
characters U+00A0 and higher, plus the
hyphen (-) and the underscore (_); they cannot
start with a digit, two hyphens, or a hyphen
followed by a digit.”
–Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Speciﬁcation

Icons
Mwa.woff
Mwa.ttf
Mwa.eot
7 icons
3kb

27 icons
5-7kb

Update SG
svn checkout https://svn.bce.bae.baidu.com/appid89ac2cam6b/0
sudo npm install
gulp

28

Further thinking
Design accordance
New workﬂow
CSS has became a programatic language

Contenu connexe

Similaire à Introduction to Baidu map Web app front-end style guide

ExampleSiteEvaluationJustification

Desarae Veit

Université Laval - Analyste d'affaires - agence affaires électroniques - Alai...

Alain Fortier

JavaScript MVC Frameworks are all the rage these days. They’ve taken the web development world by storm. This session explores the various features of the three hottest JavaScript MVC frameworks: AngularJS, Ember.js and React.js. It also compares client-side templating vs. server-side templating and how well each framework supports Isomorphic JavaScript (code that can run both client-side and server-side). Finally, it ranks each framework on 10 different criteria using Yevgeniy Brikman’s framework scorecard. Video on InfoQ: https://www.infoq.com/presentations/comparing-angular-ember-react

Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...

Matt Raible

Michael Kowalski

Carsonified Team

Web Design - Innovation Hackathon

Frances Coronel

The ConclusionFinally, the most popular design approach is responsive web design. RWD is a web development method that enables dynamic changes to the look and feel of a website. If Responsive Web Designs the screen and orientation of the device used to view it are different. When it comes to developing for a wide range of devices, responsive web design is one option to consider. Because of this, the designers at SEO Expate Bangladesh Ltd. construct 100% mobile-friendly and flexible websites. A site’s layout can be specified using RWD breakpoints. Creating a comprehensive guide on responsive web design in 5000 words is a challenging task, but I can provide you with an in-depth overview and outline to get you started. Responsive web design is a crucial aspect of modern web development, ensuring that websites look and function well on various devices and screen sizes.

Responsive Web Designs.pdf

Jiniya Bipasha

Building resuable and customizable Vue components

Filip Rakowski

Confess_2011 - Rapid Rich Client Development with Spring Roo and GWT

Kai Wähner

Web Design - Professional Development

Angelina White

Web Design

Virtu Institute

Nobody works alone in a vacuum, and successful work hinges on how well a team communicates and collaborates with each other. This talk will explore many methods, tools, and techniques teams use to produce great web experiences. How do front-end development teams make sure they write clean and consistent code together? How do designers ensure colors, typography, and other design elements are used correctly? What deliverables should be created in an effective web design process? How are decisions communicated with the team, stakeholders, and the broader organization? There are no “right” answers to these questions, but this talk will cover some important principles and helpful tactics to help your team make great work together.

Let's Work Together!

Brad Frost

Lets look at an example of what a performant website can look like. This discuss what concepts should we be considering when looking at website performance. Next we will go over two areas pertaining to website performance: 1) website performance tweaks that you as a web developer can directly make 2) website performance tweaks that you may have to work with your hosting provider or IT department to achieve

20 tips for website performance

Andrew Siemer

Brad Frost Web designer Style Guide Best Practices We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need solid ground to stand on. Style guides are quickly proving to be foundational tools for tackling this increasingly-diverse web landscape while still maintaining your sanity. Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation. This session will detail best practices and considerations for creating and maintaining style guides, so you can set up your organization for success.

Style Guide Best Practices

Brad Frost

There was a time, when we used to spend hours and hours, trying to fix the browser compatibility issues in our UI. If problems persisted, we ended up cursing the Internet Explorer at least once in a day. We were unable to learn anything new, because nothing “new” could give a better browser support. Today, a few years after the arrival of CSS3 & HTML5 things have changed for good. All the major browsers are stable and have started supporting all the essential properties of CSS3 & HTML5. A new era has started and with each passing day, the front-end developers are getting more and more enlightened. Yes, the developers are portrayed as the 'superheroes'. The whitepaper explains about various tools, plugins and automations in HTML5. 1. CSS Preprocessors 2. Emmet 3. Grunt 4. Bower 6. LiveReload 7. Yeoman generators We are no longer completely dependent on the legacy browsers. We are taking initiatives to stretch further and develop everything that is possible with regards to the browser. By doing a lot of automation, you can avoid repeated mistakes, write in a clean and concise manner, and it becomes pretty easy to architect, maintain and extend the modular code. The life of an HTML5 developer is made pretty easy.

The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions

RapidValue

Mongo Seattle - The Business of MongoDB

Justin Smestad

Cv aman gupta-uiux

amanprakash120103

Processes + Patterns

Peter Boersma

Firebase is a platform developed by Google for creating mobile and web applications. Firebase provides detailed documentation and cross-platform SDKs to help you build and ship apps on Android, iOS, the web, C++, and Unity We will be using the Firebase Mobile plugin to push notifications from our OutSystems Mobile application to our mobile. In this session, we shall be demonstrating you on how to register your project to Firebase, how to configure your application to use Firebase and how to send notifications from the server to your phone.

Push notifications using Firebase

CatarinaPereira64715

Push notifications using Firebase

CatarinaPereira64715

Mobile First Responsive Web Design — BD Conf Oct 2013

Jason Grigsby

Similaire à Introduction to Baidu map Web app front-end style guide (20)

ExampleSiteEvaluationJustification

Université Laval - Analyste d'affaires - agence affaires électroniques - Alai...

Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...

Michael Kowalski

Web Design - Innovation Hackathon

Responsive Web Designs.pdf

Building resuable and customizable Vue components

Confess_2011 - Rapid Rich Client Development with Spring Roo and GWT

Web Design - Professional Development

Web Design

Let's Work Together!

20 tips for website performance

Style Guide Best Practices

The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions

Mongo Seattle - The Business of MongoDB

Cv aman gupta-uiux

Processes + Patterns

Push notifications using Firebase

Mobile First Responsive Web Design — BD Conf Oct 2013

Dernier

A Domino Admins Adventures (Engage 2024)

Gabriella Davis

🐬 The future of MySQL is Postgres 🐘

RTylerCroy

Increase engagement and revenue with Muvi Live Paywall! In this presentation, we will explore the five key benefits of using Muvi Live Paywall to monetize your live streams. You'll learn how Muvi Live Paywall can help you: Monetize your live content easily: Set up pay-per-view access to your live streams and start generating revenue from your content. Increase audience engagement: Provide exclusive, premium content behind the paywall to keep your viewers engaged. Gain valuable viewer insights: Track viewer data and analytics to better understand your audience and tailor your content accordingly. Reduce content piracy: Muvi Live Paywall's security features help protect your content from unauthorized distribution. Streamline your workflow: The all-in-one platform simplifies the process of managing and monetizing your live streams. With Muvi Live Paywall, you can take control of your live stream monetization and create a sustainable business model for your content. Learn more about Muvi Live Paywall and start generating revenue from your live streams today!

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams

Roshan Dwivedi

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Drew Madelung

Manulife - Insurer Innovation Award 2024

The Digital Insurer

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

Top 10 Most Downloaded Games on Play Store in 2024

SynarionITSolutions

Abhishek Deb(1), Mr Abdul Kalam(2) M. Des (UX) , School of Design, DIT University , Dehradun. This paper explores the future potential of AI-enabled smartphone processors, aiming to investigate the advancements, capabilities, and implications of integrating artificial intelligence (AI) into smartphone technology. The research study goals consist of evaluating the development of AI in mobile phone processors, analyzing the existing state as well as abilities of AI-enabled cpus determining future patterns as well as chances together with reviewing obstacles as well as factors to consider for more growth.

Exploring the Future Potential of AI-Enabled Smartphone Processors

debabhi2

Scaling API-first – The story of a global engineering organization

Radu Cotescu

Data Cloud, More than a CDP by Matt Robison

Anna Loughnan Colquhoun

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Neo4j

Partners Life - Insurer Innovation Award 2024

The Digital Insurer

The Good, the Bad and the Governed - Why is governance a dirty word? David O'Neill, Chief Operating Officer - APIContext Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

apidays

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

MINDCTI Revenue Release Quarter One 2024

MIND CTI

Following the popularity of "Cloud Revolution: Exploring the New Wave of Serverless Spatial Data," we're thrilled to announce this much-anticipated encore webinar. In this sequel, we'll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you're building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Dernier (20)

A Domino Admins Adventures (Engage 2024)

🐬 The future of MySQL is Postgres 🐘

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Manulife - Insurer Innovation Award 2024

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Top 10 Most Downloaded Games on Play Store in 2024

Exploring the Future Potential of AI-Enabled Smartphone Processors

Scaling API-first – The story of a global engineering organization

Data Cloud, More than a CDP by Matt Robison

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Partners Life - Insurer Innovation Award 2024

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

Strategies for Landing an Oracle DBA Job as a Fresher

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Automating Google Workspace (GWS) & more with Apps Script

Powerful Google developer tools for immediate impact! (2023-24 C)

MINDCTI Revenue Release Quarter One 2024

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Introduction to Baidu map Web app front-end style guide

1. Introduction to Baidu Map Web App Front-end Style Guide by Hongru Hou 2014.2.20

2. Contents What is Front-end style guide? How did our SG born? What dose it include? How to use it? How to maintain it? Further thinking 2

3. What is Front-end style guide? 3

4. 4

5. £2.00 “Front-end style guides […] to make maintaining a site easier […] built speciﬁcally for the web […] uses real code and works in the browser […] living documentation and grows organically with a site throughout its lifetime.” –Anna Debenham 5

6. How did our SG born? 6

7. Set up scaffolds kss-node-template Style Guide Boilerplate Pattern Lab Kalei Style Guide fontcustom gulp Grunt 7

8. Grunt vs. gulp http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/

9. Battle with PM and UE Remove, remove, remove Reduce, reduce, reduce Check, check, check 9

10. Results of the battle Before After % bg-color 11 7 -36.7% opacity 5 2 -60% font-family 2 1 -50% font-size 8 4 -50% color 29 7 -75.9% Background Font

11. Style tile 背景颜色 #FFFFFF #F9F9F9 字体颜色 #F2F2F2 #EAEAEA 背景颜色透明度 #000000 #6BB1F7 #FFFFFF #CFCFCF #848484 #555555 #3b3b3b 字体大小字体样式 24pt Mac: PC: 28pt 0.8 30pt 32pt 0.8 边框 #D4D4D4 1px #F6F6F6 1px #6BB1F7

12. Design principle Separate structure and skin Separate container and content } OOCSS Meaningful class 12

13. Hand in hand with Sass Variables Nesting Partials (@import) Mixins (@include) Inheritance (@extend) Control Directives (e.g. @for) 13

14. What does it include? 14

15. Folder structure stylesheets scss css styleguide iconfonts public 15

16. SCSS _reset.scss + _mixin.scss + _utilities.scss _basic.scss + _grid.scss _components.scss _icon-font.scss main.scss + sg.scss 16

17. How to use it? 17

18. Naming Conventions Block—Element__Modiﬁer sucks SM (Sassier Modiﬁer) SM+ 18

19.

20. “In CSS, identiﬁers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.” –Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Speciﬁcation

21.

22.

23. Examples

24. CSS 11kb

25. HTML 4kb 3kb

26. Icons Mwa.woff Mwa.ttf Mwa.eot 7 icons 3kb 27 icons 5-7kb

27. How to maintain it? 27

28. Update SG svn checkout https://svn.bce.bae.baidu.com/appid89ac2cam6b/0 sudo npm install gulp 28

29. Further thinking Design accordance New workﬂow CSS has became a programatic language

30. QA

31. Acknowledgement

32. Thanks