How to change gutter widths on Responsable CSS Grid - css

I am using the ResponsableCSS (.com) grid for LESS.
It all works great, the only problem I have is that I can't amend the gutter widths so that if I have the following: -
Two divs side by side split into 2 columns using: -
header {
div {
.column(6);
}
}
The overall grid is 12 divided by 6 = 2
But I want to show the divs side by side with no gutter on the left on the first element and no gutter on the right on the second element.
This would enable me to have 2 elements side by side with a gutter in the middle, as opposed to what I have now: -
http://s13.postimg.org/xnh8sy40n/Untitled_2.png
Heres my full LESS file, any help would be appreciated, I don't think Responsable allows for this out of the box: -
/**
* Responsable Grid System
*/
/* ========================================================== */
/* = Site Variables = */
/* ========================================================== */
/* Grid options */
#gutter_width: 18px; // Your gutter width
#columns: 12; // The amount of columns you want
#max_width: 960px; // Set a maximum width of the site
// Half the gutter for borders, margin, padding etc
#gutter: #gutter_width*0.5;
/**
* Baseline
*
* Common settings for this:
*
* 100% for 16px font and 24px baseline.
*
* 75% for 12px font and 18px baseline.
*
*/
#baseline: 100%;
/* Font variables */
#body_color: #333;
#heading_color: #111;
#body_family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
#heading_family: "Open Sans Condensed", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
/* Link colors */
#link: #6bac60;
#link_hover: #78aace;
/* Select colors */
#select: #78aace;
#select_color: #fff;
/* Default Colors */
#grey_light: #ddd;
#grey_regular: #ccc;
#grey_dark: #666;
#green: #6bac60;
/* ========================================================== */
/* = Import normalize baseline and grid = */
/* ========================================================== */
#import "normalize.less";
#import "baseline.less";
#import "grid.less";
/* ========================================================== */
/* = Your custom styles go here = */
/* ========================================================== */
.wrapper {
max-width: 960px;
margin: 0 auto;
}
header {
.clearfix();
.column(12, 0);
div {
.column(6);
}
}
#media screen and (max-width: 520px){
}

When you inspect the .column mixin in the grid.less file of the Responsable-Framework you will find that each column got a padding on each side of half size the gutter-width.
Notice that the grid uses box-sizing: border-box see also Why did Bootstrap 3 switch to box-sizing: border-box?
leveraging the .column mixin you can set the second argument to 0 to remove the padding (gutter):
header {
div {
.column(6,0);
}
}
The above also removes the gutter between you div elements, to remove the gutter only on the borders of the grid you can use the following Less code:
header {
div {
.column(6);
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}

Related

why doesn't CSS file work in readthedocs?

I have a documentation for my app in readthedocs website. And I have a .css file that changes side bar appearance. About three month ago this .css file worked well, but now it doesn't. Here is the link.
That is how it looked like:
That is how it looks now:
The .css file:
/* Fixes the size of the RTD flyout */
/* .rst-versions {
width: 320px !important;
} */
/* Content area color */
.wy-nav-content {
background: #dddddd;
}
/* Scroll Bar*/
.wy-side-scroll {
width: auto;
overflow-y: auto;
margin-top: 0px;
}
/* width of the side panel */
.wy-nav-side {
width: 320px;
}
/* content section full screen */
.wy-nav-content {
max-width: none;
}
/* set color of left side bar */
.wy-nav-side,.wy-side-nav-search,.wy-nav-top {
/*background: #0079c1; /*005eb8 */
background: #006464;
}
/* Change caption color to be more legible */
.wy-menu > .caption > span.caption-text {
color: #ffcccc;
font-size: 20px;
}
/* Change the version color to match caption color */
.wy-side-nav-search>div.version {
color: #ffcccc;
}
/* Get rid of that ugly yellow highlight color and replace with something more appealing to the eye */
.highlight .hll {
background-color: #fcfcfc;
}
/*
#media screen and (max-width: 768px) {
.wy-nav-content-wrap {
margin-left: 0px;
}
.wy-nav-side {
width: 500px;
}
} */
What could be the reason of this? Thanks!
I partially confirm what #Steve Piercy says in the comment. The rule .wy-menu > .caption > span.caption-text { doesn't work anymore, since the <p> that surrounds the <span class="caption-text"> no longer has a caption class. You can check that by comparing latest with 1.3.4-branch.
However, as you can see from the build logs (old, new), the problem is not with sphinx-rtd-theme (you are using 0.5.0 in both), but the docutils version (0.16 in the old build, 0.17 in the new build). You will need to either upgrade your Sphinx version, or downgrade docutils.

Vertical Rhythm not working when Headings go onto multiple lines

Is there a way to setup a CSS baseline grid (vertical rhythm) that doesn't fall apart if a heading ends up going on multiple lines?
Yes, I have a method. It takes some CSS + Markup + Utility font.
Here is a codepen of a working solution with multiple blocks, font-sizes and fonts:
https://codepen.io/shalanah/pen/RyEOEO
You can add as many characters as you'd like to the example posted and below and it will work.
Example Markup
<h1><span>Heading One</span></h1>
<p><span>Paragraph</span></p>
Example CSS
:root {
--grid: 20; /* Vertical rhythm */
}
/* 1. Include a baselined font - This font is exactly 1em tall with no metrics below the baseline */
#font-face {
font-family: "Baseline Em";
src: url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff2") format("woff2"),
url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff") format("woff"),
url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* 2. Setting block elements up */
h1, p {
font-family: "Baseline Em"; /* Baselined font only needed at block level */
line-height: 1em;
}
/* 3. Ignore inline line-heights */
h1 *, p * {
line-height: 0;
}
/* 4. Leadings and margins */
h1 {
font-size: calc(var(--grid) * 4px); /* mult of grid - our leading */
margin-bottom: calc(var(--grid) * 3px);
margin-top: calc(var(--grid) * 3px);
}
p {
font-size: calc(var(--grid) * 2px); /* mult of grid - our leading */
margin-bottom: calc(var(--grid) * 1px);
}
/* 5. Inline styles, lots of freedom, don't need to be multiples of grid */
h1 > span {
font-size: 100px;
font-family: Arial; /* Any font you want */
}
p > span {
font-size: 22px;
font-family: Arial; /* Any font you want */
}
Most of the time leading isn't worth the time it takes to implement. I came up with this solution because I absolutely needed it. I wish that we had a leading property in CSS that we could use instead of line-height since line-height is a web-only invention.

Responsive CSS whilst maintaining set widths

Amateur with both CSS and vaadin here, trying to implement a responsive UI in Vaadin, but having issues with setting widths of UI objects; everything seems to break responsive CSS. Heres an example of what I'm describing:
CssLayout filterTypeLOptimiseBLayout = new CssLayout();
filterTypeLOptimiseBLayout.setResponsive(true);
filterTypeLOptimiseBLayout.addStyleName("flexwrap");
filterTypeLOptimiseBLayout.setSizeFull();
Label filtTypeLabel = new Label("Filter Type Filler");
filtTypeLabel.addStyleName("filtTypeLabel");
filtTypeLabel.setSizeFull();
filtTypeLabel.setResponsive(true);
filterTypeLOptimiseBLayout.addComponent(filtTypeLabel);
And the corresponding responsive CSS block applied to filtTypeLabel:
/* ---- Filter Type Filler Label ------*/
//Basic inherited CSS
.filtTypeLabel {
padding: 5px;
}
//Mobile
.filtTypeLabel[width-range~="0-300px"] {
font-size: 12pt;
margin: 5px;
}
//Small Browser
.filtTypeLabel[width-range~="301px-600px"] {
font-size: 14pt;
margin: 10px;
}
//Big Browser
.filtTypeLabel[width-range~="601px-"] {
font-size: 16pt;
margin: 20px;
}
With the previous code, I achieve scaling of the button font and margin as expected, but I'd like control over the width of the label as well. Using filtTypeLabel.setSizeFull(); causes anything on the same line as the label to wrap around to the next line as the label occupies all space horizontally. Calling filtTypeLabel.setWidthUndefined(); instead breaks the responsive scaling, and filtTypeLabel.setWidth("5%"); breaks it too. Setting max-width and min-width in the CSS also breaks it.
Is there any way to apply a set width to a Responsive CSS enabled object?
Width-range check works for specific component, not for your window size. So if your component always has the same size, this check will show the same result all the time. You need to create such component, responsive and with width-range styles, which will change its size depending on window size. And all your responsive children must have child styles.
CssLayout filterTypeLOptimiseBLayout = new CssLayout();
filterTypeLOptimiseBLayout.setResponsive(true);
filterTypeLOptimiseBLayout.addStyleName("flexwrap");
filterTypeLOptimiseBLayout.setSizeFull();
filterTypeLOptimiseBLayout.setResponsive(true);
.flexwrap {
.filtTypeLabel {
padding: 5px;
}
}
//Mobile
.flexwrap[width-range~="0-300px"] {
.filtTypeLabel {
font-size: 12pt;
margin: 5px;
}
}
//Small Browser
.flexwrap[width-range~="301px-600px"] {
.filtTypeLabel {
font-size: 14pt;
margin: 10px;
}
}
//Big Browser
.flexwrap[width-range~="601px-"] {
.filtTypeLabel {
font-size: 16pt;
margin: 20px;
}
}

#import with Sass not combining files [duplicate]

This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 6 years ago.
I'm new to sass and I'm trying to import a parent theme's css in a Magento application.
I have it working to an extent but not with the result I was expecting.
In my styles.scss folder I have:
#import "../../../rwd/default/css/styles.css";
I have run the sass --watch styles.scss:styles.css in the terminal and the resulting styles.css file has:
#import url(../../../rwd/default/css/styles.css);
In the sass guide it says:
CSS has an import option that lets you split your CSS into smaller,
more maintainable portions. The only drawback is that each time you
use #import in CSS it creates another HTTP request. Sass builds on top
of the current CSS #import but instead of requiring an HTTP request,
Sass will take the file that you want to import and combine it with
the file you're importing into so you can serve a single CSS file to
the web browser.
So I was expecting SASS to import the css as plain old css rules rather than using the #import rule, so my styles.css would look something like:
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Sets default font family to sans-serif.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
}
/*
* Removes default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
/*
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Corrects font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Sets consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
That way I would have a styles.css on production which didn't use the #import rule.
I got it to work by following this article:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
#import by default looks for a Sass file to import directly, but if the is a .css file or if the filename is a url it will compile to a CSS #import rule. Both of which were the case for me.
So my solution was to copy the css file I wanted to import & rename it rwd_styles.scss & changed my scss import rule to #import "rwd_styles.scss"; and it worked as I had hoped.

How to increase cell height of GWT celltable : Issue with IE?

How to increase cell height of GWT celltable ?
In mozilla firefox cell height proper(as per content) but In case of Internet explorer some part of content not displaying properly
see image
My Celltable.css is as follows:
#def selectionBorderWidth 0px;
.cellTableWidget {
border: 1px solid red;
}
.cellTableFirstColumn {
}
.cellTableLastColumn {
}
.cellTableFooter {
text-align: left;
color: #4b4a4a;
overflow: hidden;
}
.cellTableHeader { /** COLUMN HEADR TEXT */
text-align: left;
color: #4b4a4a;
overflow: hidden;
background-color: #E1E1E1;
font-family: arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
padding-left: 10px;
height: 20px;
border-bottom: #e6e6e6 1px solid;
border-left: #a6a6af 0.5px solid;
border-right: #e6e6e6 1px solid;
border-top: #a6a6af 0.5px solid;
}
.cellTableCell {
overflow: hidden;
padding-left: 10px;
height: 20px;
font-family: Arial;
font-size: 11px;
font-weight: normal;
border-bottom: #e6e6e6 1px solid;
border-left: #a6a6af 0.5px solid;
border-right: #e6e6e6 1px solid;
border-top: #a6a6af 0.5px solid;
}
.cellTableFirstColumnFooter {
}
.cellTableFirstColumnHeader {
}
.cellTableLastColumnFooter {
}
.cellTableLastColumnHeader {
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableSortableHeader:hover {
color: #6c6b6b;
}
.cellTableSortedHeaderAscending {
}
.cellTableSortedHeaderDescending {
}
.cellTableEvenRow {
background: #ffffff;
}
.cellTableEvenRowCell {
}
.cellTableOddRow {
background: #f8f8f8;
}
.cellTableOddRowCell {
}
.cellTableHoveredRow { /** background: #eee;*/
}
.cellTableHoveredRowCell {
/** border: selectionBorderWidth solid #eee; */
}
.cellTableKeyboardSelectedRow {
background: #ffc;
}
.cellTableKeyboardSelectedRowCell {
}
.cellTableSelectedRow {
background-image: url("images/row_Highlight.jpg");
color : black;
height: auto;
overflow: auto;
}
.cellTableSelectedRowCell {
}
/**
* The keyboard selected cell is visible over selection.
*/
.cellTableKeyboardSelectedCell {
}
#sprite .cellTableLoading {
gwt-image: 'cellTableLoading';
/*margin: 20px;
*/}
What changes I need to do in css to make consistency (cell height) in all browser?
I think the problem may be that your CSS style for the cell has "overflow: hidden;".
.cellTableCell {
overflow: hidden;
...
}
Take that away and see what happens. I think the cell and row will expand to fit the content.
There is another possible correction for cellTableRow's CSS. Row styles should be overwritten by cell styles, but GWT may be doing something under the hood to compensate for browser differences in IE. To ensure it always applies to the TDs contained in the TR, write it like this:
.cellTableRow,
.cellTableRow td {
overflow: auto;
...
}
First of all, do you make a CSS Reset? Following post refers to the same problem i guess.
Why is box sizing set to border-box for tables in Firefox?
The problem could be caused from the difference between browsers in the way the handle the box-model.
Read this post for more information.
I would set box-sizing property.
IE uses the border-box, every other browser the content-box-modell.
You can define, which one should be used with the following css rule:
table {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
or
table {
-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: content-box; /* Firefox, other Gecko */
box-sizing: content-box; /* Opera/IE 8+ */
}
We sometimes have problems with IE breaking the layout, because the page is rendered before everything is ready. Try if assigning a dummy CSS class to some element in the DOM changes anything.
If it does, the following code might help you. It just sets some random class at the body element and resets it to force a rerendering of the page:
/**
* Force Internet Explorer 8 to render the page again without a page refresh. after the given delay of milliseconds. This
* method only works for Internet Explorer 8.
*
* #param delayInMillis delay in milliseconds
*/
public void forceIe8ToReRender(final int delayInMillis) {
// call timer to force ie8 to re-render page without page refresh
final Timer t = new Timer() {
#Override
public void run() {
doForceBrowserToReRender();
// timer should only run once
this.cancel();
}
};
t.schedule(delayInMillis);
}
/**
* Force Browser to render the page again without a page refresh
*/
private native void doForceBrowserToReRender()/*-{
var doc = $doc;
var originalClassName = doc.body.className;
doc.body.className = "foobar";
doc.body.className = originalClassName;
}-*/;
use this
.cellTableCell { min-height : 20px ; ..... }
You can use
.cellTableKeyboardSelectedRow {
background: #ffc;
height:30px !important
}
It Works for me :)
/** Cell height */
.mainCellTable tbody tr td{
height: auto;
}
Extend AbstractCellTableBuilder and then mention height attribute of TableRow
height is not the best solution to assign where the content text either be increased or decreased. So there are two cases to make your above example as follows.
A) Using pure CSS.
B) Using Javascript
Explanation A:
In CSS, we depend on 2 more things whether we are using DIV structure or we are using TABLE method.
A.1 Using DIV:
If we are using div structure building my page and i use line-height to vertical align the text and text-align to horizontally align the text.
A.2 Using Table:
If I am using method table, then I would like to center the text in the middle of cell. This miracle will hold true if and only if I use text vertical-align:middle and horizontal-align:center.
Note: the text should be written in tag .
CSS in body as:
I love Allah
I Love Islam
B: Using Javascript
Use min-height in the td and use vertical align and texl-align properties to center and middle the texts by x-axis and y-axis respectively.
But there is only one problem it will create a bug report in IE6, 7. because IE7, IE8 do not understand min-height. So we have IE9.js file which you download it using google. and put the script in the head of html document. Also put the latest jquery file first and then put the IE9.js script after it.
and in css enjoy min-height property and how far as your text grows, the text will automatically be in the middle of the table cells.
If you are using DIV then it is same process.
I hope this will make you something extra. And you will not need to use Google once again.

Resources