With a little trick we can add different colors, even to those inline styles.
As promised in my blog post “What is inside your SharePoint CSS” I like to show how it is possible to add a grid system to SharePoint without using Bootstrap or edit the master page.
Grid systems for web sites were popular long before Ethan Mascotte wrote his famous article about “Responsive Web Design” back in 2010. The first grid system I ever used was the 960.gs. It was released in 2008.
Pretty honored to announce that I will speak at Europe’s largest SharePoint and office 365 event in Stockholm Sweden from 9th-12th November 2015.
I will be conducting a session on “Make SharePoint SASSy” aimed at Developers.
CSS can get overly complex and unwieldy very quickly—resulting in thousands of lines of CSS code across many files, yielding errors and becoming a maintenance nightmare! Believe me… there is a better way! SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach in developing CSS! SASS is an extension to CSS that arms you with programming features, such as variables, functions, loops and many more. Join me to learn SASS and move from a complete novice to someone who knows where SASS fits and how to use it with SharePoint.
In this session, you will learn:
What SASS is and how to use it.
- How to use SASS to brand SharePoint without requiring lengthy deployments.
- How to create simple rich text editor styles using mix-ins 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 its effect on SASS.
If you want a comprehensive breakdown of the latest innovations on all workloads of Office 365, and SharePoint is one of them, including the inside scoop on SharePoint 2016 and Office 365 Next Gen Portals as well as practical, actionable advice on how to leverage the cloud, SharePoint, Yammer, the Office Graph, Delve and much more to the best of your ability then European SharePoint Conference 2015 is a must in your calendar!
Prices start as low as €1100! There is also special group discounts for bookings of 3 or more people.
Book Now and I’ll see you in Stockholm in November
What is inside the SharePoint CSS
Ever wondered what is defined in the corev15.css? Let’s take a little look to some statistics of this style sheet. Another thing I like to consider how you change the style sheets when additional frameworks such as bootstrap will be applied to SharePoint. Plus, we will take a look how SharePoint Style Sheets will be changed when an branding will be added based on Bootstrap.
Recently I added the code of my blog post on “How to deploy binary files from SharePoint hosted App” to the Office 365 Pattern and Practices repository. During the monthly community call I was able to present my part of these additions.
I case you missed the monthly call you will find the screen recording on Channel 9.
Recently the user interface to create site collections in SharePoint Online have been updated. The storage quota unit is now gigabytes instead of megabytes. So be careful not to set a storage quota of 1024 gigabytes instead of megabytes. Let’s take a look why this happened.
Changed interface of storage quota
To take a look in the past you can check the official documentation on “How to set storage quota“. Beside this change on the limitation the calculation to evaluate the storage limits has been changed too. This new feature is called pooled storage.
Over the last year I did more branding projects on Office 365 than on on-premise. Since the first call by Microsoft to avoid modifications of the master page I played around with certain scenarios and patterns to reduce or avoid such modifications.
One common issue is that the suite bar is responsive (everything that resize is responsive) but not well optimized for mobile. Without any enhancements this part of SharePoint shows only half of the content. With some small CSS only modifications the suite bar looks great on nearly any device.
The following blog post use SASS pre-processed CSS the compiled CSS can be found too at the end of this post.
If you like to create a responsive user experience it is common practice to add a <meta name=”viewport”> tag to the html. This tag contains instructions to the browser in the matter of viewpoints and zooming and make sure that your web design is scaled properly according to your style definitions. Without this tag SharePoint on an iPhone will look as seen on the screenshot below. Currently SharePoint doesn’t support it by default.
In the first blog post I explained how to set up your Yeoman development environment. You have now a local web server and you can start your web development. Now lets take a closer look how you can integrate the files on this web serve directly into SharePoint on-premises and Office 365.
Open your project and start the web serve with the command ‘grunt serve’.