This document provides instructions for using CSS overrides to create customized landing pages in a template-based CMS like Sitecore. It introduces a framework called custom-lp.css that defines classes to structure landing page content without constraints from templates. Styles, HTML and text can be added directly in the editor. The framework is responsive, with styles for desktop, tablet and mobile. Tips are provided for common issues like inline-block gaps, column width bugs, and stubborn style overrides.
An overview of the CSS preprocessor LESS.
Including code samples for creating mixins, variables, math, colors, patterns, guards, scope, and namespaces.
An overview of the CSS preprocessor LESS.
Including code samples for creating mixins, variables, math, colors, patterns, guards, scope, and namespaces.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
CSS in React is a talk I gave at the ReactJS San Francisco Bay Area meetup yesterday. It covers viable options for implementing CSS in JavaScript React components and the good and bad parts of various solutions including Radium, react-css-modules, styled components, combined with Sass, Webpack, Babel, and ES6.
It also includes a github repo https://github.com/joeshub/css-in-react where you can run all the examples locally
Building a theming system with React - Matteo Ronchi - Codemotion Rome 2017Codemotion
In my career, I've created several component libraries and always found it challenging and rewarding at the same time. The engine we developed at WorkWave is the result of such attempts: it offers a great tradeoff between flexibility and ease of use. Styling with inline styles greatly simplifies the developer's work while the use of Aphrodite to output real classes enables the full spectrum of CSS features. I'll show you the choices we made, what problems have arisen while developing the components and how we solved them, hopefully helping you make better choices for your own libraries.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
CSS in React is a talk I gave at the ReactJS San Francisco Bay Area meetup yesterday. It covers viable options for implementing CSS in JavaScript React components and the good and bad parts of various solutions including Radium, react-css-modules, styled components, combined with Sass, Webpack, Babel, and ES6.
It also includes a github repo https://github.com/joeshub/css-in-react where you can run all the examples locally
Building a theming system with React - Matteo Ronchi - Codemotion Rome 2017Codemotion
In my career, I've created several component libraries and always found it challenging and rewarding at the same time. The engine we developed at WorkWave is the result of such attempts: it offers a great tradeoff between flexibility and ease of use. Styling with inline styles greatly simplifies the developer's work while the use of Aphrodite to output real classes enables the full spectrum of CSS features. I'll show you the choices we made, what problems have arisen while developing the components and how we solved them, hopefully helping you make better choices for your own libraries.
CSS Less framework overview, Pros and Cons.
Less (Leaner Style Sheets) is a backward-compatible language extension for CSS.
We will go through a quick overview of features.
- Comments
- Importing
- Variables
- Mixins
- Nesting
- Nested At-Rules and Bubbling
- Operations
- Escaping
- Namespaces and Accessors
- Maps
- Scope and
- Installing, configuring and usages of Less Framework
Não é nenhum segredo que o mundo está cada vez mais móvel. As vendas de PCs caíram em 20% desde 2008, e em 2015 é esperado que o acesso à Internet por dispositivos portáteis supere o acesso por desktops. A Web pode ser acessada de qualquer lugar, a qualquer hora. Mas com tantos modelos de dispositivos—tablets, notebooks, netbooks e smartphones—como fazer com que seu produto funcione em todos?
O Responsive Web Design—um conjunto de técnicas e ideologias—promete solucionar este problema, oferecendo o mesmo conteúdo em todas as plataformas, da melhor maneira. Nesta palestra, serão ensinadas técnicas de design, front e back-end para que seu site seja usável e acessível por todos, sem limitar-se a modelos, tamanhos de tela ou versões específicas.
Web Frontend development: tools and good practices to (re)organize the chaosMatteo 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
Act Academy provides Industrial training in PHP, .Net, graphic designing, web designing and many more. Also provides diploma courses in CAD designing, Financial accounting with 100% job assurances.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
Top 5 Indian Style Modular Kitchen DesignsFinzo Kitchens
Get the perfect modular kitchen in Gurgaon at Finzo! We offer high-quality, custom-designed kitchens at the best prices. Wardrobes and home & office furniture are also available. Free consultation! Best Quality Luxury Modular kitchen in Gurgaon available at best price. All types of Modular Kitchens are available U Shaped Modular kitchens, L Shaped Modular Kitchen, G Shaped Modular Kitchens, Inline Modular Kitchens and Italian Modular Kitchen.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
7. Using the magic of CSS overrididing to do whatever we want
in a template-based CMS:
styles.css (the base styles for the site)
custom-lp.css (base styles for a custom
landing page, by me)
CSS (in <style> tags) & HTML
directly in the content editor (by you)
is overridden by
is overridden by
9. The nuts & bolts: how custom-lp.css works
custom-lp.css is a framework, not a set of (visual) styles. It defines the “bones” of the
landing pages we create.
1) Defines a class, .custom, which sits inside the template’s main containers, and removes
the padding provided by them. Effectively allows you to start your designs at (the content
sections) coordinates 0, 0, instead of 20px in to the right.
2) Defines a second class, .custom-container, with no padding, margins, width or height.
This is where all your HTML will go.
3) Defines a class, .custom-row, which is 100% of the container’s width wide and is
designed to contain column classes
4) Defines a set of column classes which have different, proportional widths.
Columns sit beside each other in .custom-rows.
10. The basic setup:
<div class=”custom”>
<div class=”custom-container”>
<div class=”custom-row”>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
</div>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
</div>
</div>
</div>
</div>
.custom {
width: 999px;
margin-left: -2%;
/*removes padding of parent, .content_section*/
margin-top: -31px;
/*can be in px here bc the header is consistenly 172px high
until the mobile breakpoint)*/
margin-bottom: -2.6%;
/*there really is no rhyme or reason as to why these numbers
work*/
z-index: 999;
}
.custom-container {
} /*yes it really does nothing, but it’s useful for
full-bleed backgrounds*/
.custom-row {
margin: 0% 0% 2% 0%;
/*padding on bottom only to space between rows. spacing be-
tween cols is below*/
clear:both;
}
.custom-col {
margin: 0% -0.32% 0% 0%;
padding: 1%;
display: inline-block;
vertical-align: top;
}
.custom-col-2 {
width: 50%;
}
In the content editor: From custom-lp.css:
11. Classes available to you in custom-lp.css
.custom - always use this
.custom-container - always use this, too. useful for full-bleed backgrounds sometimes.
.custom-row - a horizontal grouping of columns*.
by default as a margin of 2% on the bottom.
provides clearing** for columns.
.custom-col - the basic display style for a column. always use in conjunction with one of the
below column classes***.
.custom-col-1 - gives the .custom-col a width of 25% of the container
.custom-col-2 - gives the .custom-col a width of 50% of the container
.custom-col-3 - gives the .custom-col a width of 75% of the container
.custom-col-4 - gives the .custom-col a width of 100% of the container
.custom-col-1third - gives the .custom-col a width of 33% of the container
.custom-col-2third - gives the .custom-col a width of 66% of the container
.custom-pull-right - floats a single column to the right-hand side of its container.
* - You can have columns that total up to more than 100% of the width of a .custom-row. They’ll just fall below.
** - as in clear: both;
*** - all columns get display: inline-block; from this. inline-block is actually a buggy CSS component and occasionally gives
hairline spacing between elements; however better alternatives (flexbox) are not IE9 compatible.
12. But what about mobile?
custom-lp.css provides overrides for all the classes listed below for 3 breakpoints:
Desktop: @media (min-width:767px)
Tablets: @media only screen and (min-width: 767px)
and (max-width: 1080px)
Mobile devices: @media only screen and (max-width:767px)
Depending on what you’re doing, though, you may need to override the default
behaviour of custom-lp.css for certain column widths on your page.
13. The basic setup, revisited:
<style>
.custom {
background-color: #FF000;
}
.custom h1 {
font-family: museo-sans;
font-size: 48px;
}
/*....etc etc etc*/
</style>
<div class=”custom”>
<div class=”custom-container”>
<div class=”custom-row”>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
</div>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
</div>
</div>
</div>
</div>
.custom {
width: 999px;
margin-left: -2%;
/*removes padding of parent, .content_section*/
margin-top: -31px;
/*can be in px here bc the header is consistenly 172px high
until the mobile breakpoint)*/
margin-bottom: -2.6%;
/*there really is no rhyme or reason as to why these numbers
work*/
z-index: 999;
}
.custom-container {
} /*yes it really does nothing, but it’s useful for
full-bleed backgrounds*/
.custom-row {
margin: 0% 0% 2% 0%;
/*padding on bottom only to space between rows. spacing be-
tween cols is below*/
clear:both;
}
.custom-col {
margin: 0% -0.32% 0% 0%;
padding: 1%;
display: inline-block;
vertical-align: top;
}
.custom-col-2 {
width: 50%;
}
In the content editor: From custom-lp.css:
14. The basic setup, revisited, now with fun for mobile:
<style>
@media (min-width:767px){
.custom {
background-color: #FF000;
}
.custom h1 {
font-family: museo-sans;
font-size: 48px;
}
}
@media only screen and (min-width: 767px)
and (max-width: 1080px) {
.custom-col-2 {
width: 75%;
}
}
/*....etc etc etc*/
</style>
<div class=”custom”>
<div class=”custom-container”>
<div class=”custom-row”>
<div class=”custom-col custom-col-2”>
<p>This is one column</p>
(etc etc etc etc)
(all the same stuff as before but):
@media only screen and (min-width: 767px) and (max-width:
1080px) {
.custom {
width: 100%;
margin-left: -2%; /*removes padding
of parent, .content_section*/
margin-top: -31px; /*can be in px
here bc the header is consistenly 172px high until the mobile
breakpoint)*/
margin-bottom: -2.6%; /*there really
is no rhyme or reason as to why these numbers work*/
}
.custom-col-1 {
width: 50%;
}
.custom-col-2 {
width: 100%;
}
.custom-col-3 {
width: 100%;
}
}
In the content editor: From custom-lp.css:
is overridden by
15. Gremlins
<div class=”custom”><div class=”custom-container”><div class=”custom-row”><div class=”custom-col cus-
tom-col-2”><p>This is one column</p><div class=”custom-col custom-col-2”><p>This is one
column</p></div></div></div></div>
display: inline-block;
is buggy. This is a known issue w/CSS3. It occasionally has hairline widths between two divs which both use
display: inline-block. The easiest solution is to minify your code (or: get rid of all whitespace between tags, including
returns.
For an example of where you’d run into this issue, see http://www.douglascollege.ca/douglas-degrees.
.container width
If you’re using a 3-column layout (i.e. .custom-col-1third or .custom-col-2third) extensively, it can be
helpful to manually set the width of container to 999px. Column widths are defined in percentages, so
999px divides more evenly into thirds. Similarly sometimes defining the width of .custom to 1000px can
help sort out issues with the columns that divide by 4
(.custom-col-1, .custom-col-2, .custom-col-3, .custom-col-4)
overriding <a> styling
The styling from style.css is particularly sticky and difficult to override. Using the selector
#one_column_content .col_content_section a seems to work best.
overriding mobile styling (@media only screen and (max-width:767px))
Another particularly sticky bit of CSS. I find I have to basically start from scratch and override everything I overrode
in the desktop media query to get things to work.