This document provides an overview of using Bootstrap to build a responsive SharePoint site. It discusses what Bootstrap and responsive design are, why Bootstrap is useful, how to implement Bootstrap grids and media queries in SharePoint, Bootstrap UI components, challenges of using Bootstrap in SharePoint, and examples of responsive SharePoint sites built with Bootstrap.
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Visit http://www.kanwalkhipple.com
How to Improve the SharePoint UI Using Bootstrap 3Ryan McIntyre
Bootstrap has become the go-to standard for web developers looking for a simple and powerful framework to use when building websites. It provides many capabilities and features that not only simplify markup, leading to increased productivity and easier maintenance, but can also enhance the website by enabling the developer with a simple way to add complex capabilities that they may not have even known was possible.
Why aren't we using it in SharePoint development? There's no reason we can't! This session will provide seasoned SharePoint developers and designers with an introduction to Bootstrap 3 so we can review the components in the framework and learn how to incorporate Bootstrap into our solutions. Which components should we be leveraging? Which components should we be avoiding? How do we utilize Bootstrap to increase our mobile and responsive experiences?
To answer these questions, you will be introduced to Bootstrap and we will review its' capabilities. We then compare to existing SharePoint features so we can make proper decisions on when and when not to use Bootstrap. Leveraging this foundation, the session will move into demos of building a branding solution using Bootstrap as well as show the creation of a SharePoint app which will be built using Bootstrap. Coming out of this session you will have a clear understanding of what Bootstrap 3 is, when and how to use it properly in your SharePoint solutions and apps, and a new perspective on SharePoint development!
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienChris O'Brien
Covers several approaches for user interface customization in SP2013 - using JSLink to customize a list and/or view, creating custom Display Templates for the Content Search web part, and different approaches for customizing the search hover panel.
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Visit http://www.kanwalkhipple.com
How to Improve the SharePoint UI Using Bootstrap 3Ryan McIntyre
Bootstrap has become the go-to standard for web developers looking for a simple and powerful framework to use when building websites. It provides many capabilities and features that not only simplify markup, leading to increased productivity and easier maintenance, but can also enhance the website by enabling the developer with a simple way to add complex capabilities that they may not have even known was possible.
Why aren't we using it in SharePoint development? There's no reason we can't! This session will provide seasoned SharePoint developers and designers with an introduction to Bootstrap 3 so we can review the components in the framework and learn how to incorporate Bootstrap into our solutions. Which components should we be leveraging? Which components should we be avoiding? How do we utilize Bootstrap to increase our mobile and responsive experiences?
To answer these questions, you will be introduced to Bootstrap and we will review its' capabilities. We then compare to existing SharePoint features so we can make proper decisions on when and when not to use Bootstrap. Leveraging this foundation, the session will move into demos of building a branding solution using Bootstrap as well as show the creation of a SharePoint app which will be built using Bootstrap. Coming out of this session you will have a clear understanding of what Bootstrap 3 is, when and how to use it properly in your SharePoint solutions and apps, and a new perspective on SharePoint development!
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienChris O'Brien
Covers several approaches for user interface customization in SP2013 - using JSLink to customize a list and/or view, creating custom Display Templates for the Content Search web part, and different approaches for customizing the search hover panel.
In these slides we provides information about new technology (CSR) to learn you how to customize the way users interact with list data, and how to develop solutions that change the way data is rendered.
You are about to embark on a journey of becoming a SharePoint Designer Ninja. SharePoint has infiltrated within your company and you want to master the art of css, master pages and page layouts. Within this one hour session, I will teach you the countermeasures required to masterfully brand SharePoint to your will. During this session, we will brand a site from scratch with our bare hands and this will be the initiation into the SharePoint Design. At the end of this session, I’ll teach you legendary abilities of SharePoint Designers including invisibility, walking on water, and control over master page content placeholders. You’ll also be given some secrets from within the walls of the Oniwaban such as practical tips, tricks, and advice so that you too can one day become a SharePoint Design Ninja.
http://www.kanwalkhipple.
Step into the SharePoint branding world, tools and techniquesBenjamin Niaulin
This presentation presents the basics for SharePoint branding tools and techniques. All of it was done during Demonstrations feel free to contact me on twitter @bniaulin for more information or CSS files
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
This presentation begins down the path of how to customize SharePoint 2013 On Premises environments going through the Design, Development and Deployment stages.
SPSSTHLM - Using JSLink and Display Templates for ITProsPaul Hunt
These are the slides from my session at SharePoint Saturday Stockholm, where I look at JavaScript Display Templates and how ITPros doing first and second tier development can use the JSLink functionality to implement them.
This session focussed on List View Web Parts and looked at the way we previously visualised data in old version of SharePoint and how we would approach that now in SharePoint 2013.
Please note: The upload of the pptx is failing for some reason, so I've added the slides as a PDF which doesn't include the notes on some of the slides. if you do have any questions, please reach out to me on twitter (@cimares) with any questions.
Transform SharePoint default list forms with HTML, CSS and JavaScriptJohn Calvert
Turn the out-of-the-box SharePoint list forms into custom styled forms using only HTML, CSS and JavaScript.
Based on Mark Rackley’s original approach, Easy Custom Layouts for Default SharePoint Forms, http://www.markrackley.net/2013/08/29/easy-custom-layouts-for-default-sharepoint-forms/, with significant enhancements: pure CSS solution, locale-agnostic field move, jQueryUI tabs.
Create Engaging Branded SharePoint Portals and Plan for ContentCathy Dew
Making sure your content and branding align is always a challenge, but you can create portals that use content as a means to further push your "brand." In this session we will examine how to make use of SharePoint 2013 web part and content features that can be customized from a branding perspective. We will create a sample training portal that will display customized training information to users as well as visually give clues for direction.
SharePoint Branding Guidance @ SharePoint Saturday San DiegoKanwal Khipple
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
In these slides we provides information about new technology (CSR) to learn you how to customize the way users interact with list data, and how to develop solutions that change the way data is rendered.
You are about to embark on a journey of becoming a SharePoint Designer Ninja. SharePoint has infiltrated within your company and you want to master the art of css, master pages and page layouts. Within this one hour session, I will teach you the countermeasures required to masterfully brand SharePoint to your will. During this session, we will brand a site from scratch with our bare hands and this will be the initiation into the SharePoint Design. At the end of this session, I’ll teach you legendary abilities of SharePoint Designers including invisibility, walking on water, and control over master page content placeholders. You’ll also be given some secrets from within the walls of the Oniwaban such as practical tips, tricks, and advice so that you too can one day become a SharePoint Design Ninja.
http://www.kanwalkhipple.
Step into the SharePoint branding world, tools and techniquesBenjamin Niaulin
This presentation presents the basics for SharePoint branding tools and techniques. All of it was done during Demonstrations feel free to contact me on twitter @bniaulin for more information or CSS files
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
This presentation begins down the path of how to customize SharePoint 2013 On Premises environments going through the Design, Development and Deployment stages.
SPSSTHLM - Using JSLink and Display Templates for ITProsPaul Hunt
These are the slides from my session at SharePoint Saturday Stockholm, where I look at JavaScript Display Templates and how ITPros doing first and second tier development can use the JSLink functionality to implement them.
This session focussed on List View Web Parts and looked at the way we previously visualised data in old version of SharePoint and how we would approach that now in SharePoint 2013.
Please note: The upload of the pptx is failing for some reason, so I've added the slides as a PDF which doesn't include the notes on some of the slides. if you do have any questions, please reach out to me on twitter (@cimares) with any questions.
Transform SharePoint default list forms with HTML, CSS and JavaScriptJohn Calvert
Turn the out-of-the-box SharePoint list forms into custom styled forms using only HTML, CSS and JavaScript.
Based on Mark Rackley’s original approach, Easy Custom Layouts for Default SharePoint Forms, http://www.markrackley.net/2013/08/29/easy-custom-layouts-for-default-sharepoint-forms/, with significant enhancements: pure CSS solution, locale-agnostic field move, jQueryUI tabs.
Create Engaging Branded SharePoint Portals and Plan for ContentCathy Dew
Making sure your content and branding align is always a challenge, but you can create portals that use content as a means to further push your "brand." In this session we will examine how to make use of SharePoint 2013 web part and content features that can be customized from a branding perspective. We will create a sample training portal that will display customized training information to users as well as visually give clues for direction.
SharePoint Branding Guidance @ SharePoint Saturday San DiegoKanwal Khipple
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Etudes d’architecture, mises en œuvre, déploiements, Administration de la plateforme SharePoint serveur 2013 et la sauvegarde des bases de données de contenue de cette plateforme de collaboration.
Etudes d’architecture, mises en œuvre, déploiements, administration de la plateforme SharePoint serveur 2013 et la sauvegarde des bases de données de contenue de cette plateforme de collaboration.
Take this workshop to learn the core skills common to most SharePoint development activities, and find out how to work with back-end data and front-end user interfaces. Get guidelines and best practices to help you optimize your SharePoint applications, explore workflows inside the dramatically enhanced SharePoint Designer, and see cool demos that show you how to create an app, deploy it to a catalog, and install it. SharePoint developer training also prepare you for certification on Microsoft SharePoint.
This presentation was given at SharePoint Saturday Virginia Beach 2012. The topic covers some SharePoint based solutions that directly benefit from HTML5 features.
Chris O'Brien - Intro to Power BI for Office 365 devs (March 2017)Chris O'Brien
A high-level view of Power BI as it relates to Office 365, SharePoint and developers. Potentially useful to help consider Power BI against custom development options.
Trends in Designing Portals for #SharePoint 2013 #SPC14 #SPC2013Kanwal Khipple
During this session, we’ll show you real world examples of SharePoint 2013 portals that utilize search, persona-lization and responsive design to deliver engaging user experiences. We’ll discuss how mobile adaptive and responsive designs can co-exist and how each can be accomplished while utilizing the SharePoint platform. Finally, we’ll discuss best practices in designing your portal for performance and scale-ability.
Explains why telecom companies should consider low-code software to supplement or replace their Business Support Systems (BSS) software.
While there are many reasons, low-code software is quicker to change, deploy and enhance than traditional development. It also has lower TCO and enhances ROI. Plus it enables business users and IT to collaborate easily, so last-minute requirements or changes are no problem.
DZone’s 2016 Guide To Building And Deploying Applications In The CloudSingaram Subramanian
How can you take advantage of the granularity,
elasticity, and pre-baked-ness of modern cloud services?
And, on the flip side, as your applications expand
outside blade-boxes and even beyond individual
data centers, how do you design (and troubleshoot)
applications that treat network links like secondgeneration
buses, that won’t hang if a service a
continent (and an SLA) away just isn’t working, and that
store sensitive data on machines whose geolocation and
hardware configuration you don’t even know?
Work is well underway for adding Bootstrap to Joomla for the series 3.x. This presentation gives an overview of the problems that Joomla is trying to solve by using Bootstrap and a brief introduction to what Bootstrap is and how it works.
Given at the June 2012 monthly meeting of the Joomla User Group New England.
Bootstrap vs React Which is the best front-end framework.pdfLaura Miller
Bootstrap and React are extensively used in web development to assist developers. Read the blog to know the key differences between these two frameworks.
Learn Bootstrap 4 Step by Step for Beginners
This Bootstrap tutorial pdf and training material will teach you how to quickly prototype and build responsive websites using Bootstrap 4. You will become familiar with common components, setting up a grid, and how to customize the look and feel. Get your copy at https://bootstrapcreative.com/shop/bootstrap-quick-start/
What's new in SharePoint 2013 and is it worth migrating to. This webinar was recorded and available on http://en.share-gate.com/blog for you to view.
Whether you want to learn more about SharePoint's new interface, search, WCV, this presentation helps you discover them quickly.
In this session you will learn about how to change SharePoint site style and design?. We will review the topic related to branding as it relates to SharePoint as well as dive into the use of themes, master pages, page layouts and CSS to create a more good look and feel for SharePoint. We will also discuss the entire branding process from the creation of the design to the deployment.
You got Microsoft Teams! Now let's build modern intranet on SharePoint - Team...Chirag Patel
Many organisations are adopting Microsoft Teams rapidly for collaboration and document management part of SharePoint. With your existing investments of SharePoint licenses you can take advantage of building modern intranet to keep your digital workplace connected. This session will walkthrough all the out-of-the-box features and solutions to get your modern intranet up and running
Introduction to SharePoint Patterns and Practices (PnP)Thomas Daly
This is a combination of slides from MS Ignite, a variety of PnP team presentations and some things I pulled together for the purpose of presenting to the NYC Office 365 Developer Bootcamp
The front-end framework for building experiences for Office and Office 365
Office UI Fabric is a responsive, mobile-first, front-end framework that you can use to apply the Office Design Language to your web experiences. Whether you’re creating a new app or add-in or updating an existing one, Fabric makes it easy to get up and running.
Built by Microsoft designers and design developers for Microsoft (and you).
Just like other popular frameworks, but built from the ground up for Office 365 without excessive overriding.
All about styling instead of function, so you can focus function and not look and feel.
Integrates with plain JavaScript and frameworks such as Angular, & React.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
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.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
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.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
The A to Z of Building a Responsive SharePoint Site with Bootstrap
1. The A to Z of Building a
Responsive SharePoint Site
with Bootstrap
BY THOMAS DALY
2. Topics
What is Bootstrap
Responsive Design
Why Bootstrap
Implementation
Grids
Media Queries
UI Components
Expectations
SharePoint Considerations
Tools
Resources
Live Examples / Intranet Site
Real World Examples
3. About Me
Senior SharePoint Consultant Extraordinaire
Branding & Developer
Focused on the UI side of things
Community Involvement
Speaker
NJ SharePoint User Group Organizer
SharePoint Saturday NYC Organizer
SharePoint Saturday NJ Organizer
My SharePoint Blog
MSDN forums (eh not so much)
5. What is Bootstrap?
The most popular HTML, CSS, and JS framework
Used for developing responsive, mobile first projects
on the web.
Mobile First Strategy
Works and looks great on the mobile device.
As the devices scale in the size the content scales
and experience is enhanced.
7. Responsive Web Design
Crafting sites that provide an
optimal viewing and interaction
experience
Easy reading and navigation
Minimal resizing, panning, and
scrolling
Works across a wide range of
devices
9. Why Choose Bootstrap?
Speed of Development
Use of ready made code blocks and pre-defined styles.
Responsiveness
Mobile devices continue to grow in popularity year after year.
Use of Bootstrap's grid system and classes make it easier.
Consistency
Uniformity, same experience across Internet Explorer, Chrome, and Firefox
Customizable
Ability to fine tune your bootstrap package.
Support
Large user community behind it. Constantly being updated. Lots of documentation
Themes
There are a large number of Themes available and either free or very inexpensive
10. Similar Responsive Frameworks
Bootstrap is not alone. There are numerous frameworks that are similar. The key to
picking one is to understand your requirements.
Semantic UI
ZURB Foundation
Skeleton
HTML Boilerplate
Almost infinitely more…
11. Bootstrap Components
Grids – Defining pages in terms of columns and rows
Typography – Headings / body elements
Glyphs – icons that are font based, scalable
Navigation – responsive navigation
Images – responsive images
Helper Classes – clearfix / show / hide / centers
Responsive Utilities – hide / show content via class
Javascript - Carousel, Tooltip, Tab, Modal, Alerts
12. Grid System
Easy to use grid system for creating rows & columns for your content
https://getbootstrap.com/examples/grid/
14. Media Queries
Allows you to craft CSS to scope media features
such as height or width.
Bootstrap has pre-defined breakpoints mobile,
tablet, desktop, & large desktop
Necessary to know in order to achieve
responsive.
16. My Personal Disclaimer
Mobile Design works best on sites where you the developer, designer, or owner
have the most control over the content being displayed and how the users
interacts with that content.
SharePoint Lists, Libraries, Web Parts, Page Layouts, Site Templates are generally
not responsive, and therefore can be difficult (sometimes impossible) to convert.
To obtain 100% perfect mobile experience will take a lot of work. It’s
recommended that your sites have custom master page, css, page layouts, and
web parts.
17. What to Expect with SharePoint &
Bootstrap
SharePoint is semi-responsive, but some aspects cannot be made responsive
without extensive amounts of time and effort.
When creating new items (page layouts, web parts, display templates) you’ll be
able to put your best foot forward for mobile. As the screen real estate increases
your content will grow and gradually be enhanced.
When working with existing SharePoint components, you’ll be forces to write
media queries to gracefully degrade these items to work on smaller screen real
estate.
19. Master Page Modifications
HTML5 doctype
Bootstrap makes use of certain HTML elements
and CSS properties that require the use of the
HTML5 doctype. Include it at the beginning of all
your projects.
Meta Tags
To ensure proper rendering and touch zooming,
add the viewport meta tag to your <head>.
21. SharePoint Considerations
Box Model Issues
Bootstrap uses border-box
SharePoint uses content-box
This causes SharePoint components
to look broken in particular areas
Apply a reset to the broken pieces
The Box Model Explained
22. Box Sizing Explained
border-box
The width and height properties (and
min/max properties) includes content,
padding and border, but not the margin
content-box
The width and height properties (and
min/max properties) includes only the
content. Border, padding, or margin are
not included
https://jsfiddle.net/e9gn3q83/
23. SharePoint Considerations
Navigation
The most challenging task
You’ll need to change the default HTML markup
http://thomasdaly.net/2015/06/28/bootstrap-
responsive-navigation-in-sharepoint/
Navigation will no longer be hover, but touch.
This can disable top tier nodes w/ children
24. SharePoint Considerations
Sites & Pages
Publishing (the way to go)
Publishing Feature is required
Publishing Sites use page layouts
Custom Page Layouts are the best way to
control how the page responds
Wrap your Web Part Zones & Content
Areas in columns and rows using the
Bootstrap grid classes
Team Sites
Team Sites are not good because they use
Text Layouts
Text Layouts are pre-defined, not
customizable, and not responsive
Existing Team Sites pages would need to
be re-created using a custom responsive
page layout.
25. SharePoint Considerations
Web Parts
Try to plan ahead which web parts will be allowed, or define a set of web parts that you will be
primarily using throughout your site.
The best types of web parts are Custom, Data Views or Content By Search
Custom & Data Views – you can create the html markup and styles
Content By Search – you can utilize display templates which allow you to control the html. (styles can
be applied separately)
The worst types of web parts are Out Of The Box (OOTB) & List Views
Out Of The Box (OOTB) web parts you have no control over how they render.
List Views columns can break your design (unless you change to custom display template)
26. SharePoint Considerations
Site Templates
You can make Search, Wiki,
Community Portal, Blog Sites
responsive but not easily
Be prepared to write media queries
to override default styles per each
type of template
Difficult, Yes. Challenging, Yes. But
Possible
27. SharePoint Considerations
Lists & Libraries
Not very responsive and would be very
tough to make responsive
Similar issue are web parts, columns and
<tables> are the enemy.
Lists & Libraries are <table> based html
elements and these components are not
that responsive
Difficult, Extreme. Possible, with code?
Advice = Stay Away
31. Alternative PnP Project
SharePoint 2013/2016 Responsive UI
This solution provides you the capability to enable Responsive UI for a Site Collection in Microsoft SharePoint 2013/2016
on-premises. The solution leverages some JavaScript embedding and CSS overriding, in order to make responsive the out
of the box UI of a classic Team Site (STS#0).
Solution Overview
The solution leverages some JavaScript embedding and CSS overriding to convert the out of the box UI of any SharePoint
2013/2016 Team Site (STS#0) into a Responsive UI. The Responsive UI supports three rendering models:
Desktop: screen width above 768px
Tablet: screen width between 481px and 768px
SmartPhone: screen width lower than or equal to 480px
https://github.com/OfficeDev/PnP-Tools/tree/master/Solutions/SharePoint.UI.Responsive
32. Real World Examples
B&R Business Solutions
O365 Public
http://www.bandrsolutions.com
Center for Retail Compliance
SP2013, On-Prem Public
http://www.retailcompliancecenter.org/
ATIDAN
O365 Public
http://www.atidan.com