I have a set of default styles I use with new projects and want to know whether there are any issues or imperfections with them. Can anyone see anything that could be detrimental or bad in any way?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5% /* makes 1rem 10px */
}
body {
font-size: 1.6em; /* default font of 16px */
font-family: 'Verdana', 'Arial', sans-serif;
line-height: 1.3;
color: #373737;
}
/* fonts */
h1 { font-size: 3rem }
h2 { font-size: 2.4rem }
h3 { font-size: 2rem }
h4, li, label, input, textarea, select, p {
font-size: 1.8rem;
}
h5 { font-size: 1.6rem }
h6 { font-size: 1.4rem }
ol, ul { padding-left: 2em }
a {
text-decoration: underline;
color: blue;
}
a:hover { color: pink }
a:focus { color: orange }
a:active { color: red }
a:visited { color: purple }
I'd be curious to know your thoughts or any feedback. Thank you.
It looks preety good to me, although I don't like using h5 and h6 tags to smaller texts. Tags "h" are heads and should always work as highlighted information.
Related
I am trying to enable Bootstrap's RFS feature in v5.1.3 for basis font tags globally.
In my SCSS i have set some basic font-sizes, include the bootstrap scss files and set the font-size include. But in the compiled CSS the font sizes are still in rem only.
The SCSS:
//Fonts
$font-size-root: 20px;
$font-size-base: 1rem;
$enable-responsive-font-sizes: true;
$enable-rfs: true;
$h1-font-size: $font-size-root * 1.8;
$h2-font-size: $font-size-root * 1.5;
$h3-font-size: $font-size-root * 1;
$h4-font-size: $font-size-root * 0.75;
$h5-font-size: $font-size-root * 0.5;
$h6-font-size: $font-size-root * 0.25;
$small-font-size: $font-size-root * 0.75;
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size,
7: $small-font-size,
);
#import "Boostrap/bootstrap.scss";
body {
#include font-size($font-size-base);
//border-style: solid;
h1 {
#include font-size($h1-font-size);
font-weight: bold;
}
h2 {
#include font-size($h2-font-size);
}
h3 {
#include font-size($h3-font-size);
}
h4 {
#include font-size($h4-font-size);
}
h5 {
#include font-size($h5-font-size);
}
h6 {
#include font-size($h6-font-size);
}
p {
#include font-size($font-size-root);
}
.btn {
#include font-size($btn-font-size);
}
}
But the compiled CSS looks like this:
body {
font-size: 1rem;
}
body h1, body .h1 {
font-size: calc(1.35rem + 1.2vw);
font-weight: bold;
}
#media (min-width: 1200px) {
body h1, body .h1 {
font-size: 2.25rem;
}
}
body h2, body .h2 {
font-size: calc(1.3125rem + 0.75vw);
}
#media (min-width: 1200px) {
body h2, body .h2 {
font-size: 1.875rem;
}
}
body h3, body .h3 {
font-size: 1.25rem;
}
body h4, body .h4 {
font-size: 0.9375rem;
}
body h5, body .h5 {
font-size: 0.625rem;
}
body h6, body .h6 {
font-size: 0.3125rem;
}
body p {
font-size: 1.25rem;
}
body .btn {
font-size: 1rem;
}
Am I missing something or did i get the complete idea of this feature wrong?
What bothers me the most is the p-tag. It isn't responsive at all.
I have different sizes for different devices. Maybe there are better solutions.
Tell me. But this solution works.
Example:
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
h1 {
font-size: 3rem;
padding-bottom: 0;
margin-bottom: 0;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
padding: 0 0 10px 0;
}
h4 {
font-style: italic;
font-size: 1.1rem;
}
h5, h6 {
font-size: 1rem;
}
h6 {
font-style: italic;
}
}
and:
#media (min-width:1281px) { /* hi-res laptops and desktops */
h1 {
font-size: 6rem;
padding-bottom: 0;
margin-bottom: 0;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 3rem;
padding: 0 0 10px 0;
}
h4 {
font-style: italic;
font-size: 1.1rem;
}
h5, h6 {
font-size: 1rem;
}
h6 {
font-style: italic;
}
}
I'm trying to set background for my atom text editor from the post
https://discuss.atom.io/t/setting-background-images/9002
I tried the same code and I'm not sure why the editor is not rendering any background image. Can someone please help?
I'm attaching the stylesheet. Styles for setting background is in the last 7 lines of the snippet.
/*
* Code by William Chang and Matt McFarland
* https://medium.com/#docodemore/an-alternative-to-operator-mono-font-6e5d040e1c7e#.ofkdp0aww
* flottflott - http://www.dafont.com/flottflott.font
* Fira Code - https://github.com/tonsky/FiraCode
*/
atom-text-editor {
font-family: 'Fira Code';
font-style: normal;
text-rendering: optimizeLegibility;
}
atom-text-editor.editor {
background: rgba(0,0,0,0);
.syntax--string.syntax--quoted,
.syntax--string.syntax--regexp {
-webkit-font-feature-settings: "liga" off, "calt" off;
}
.syntax--source.syntax--js.syntax--jsx > .syntax--keyword.syntax--control.syntax--flow.syntax--js,
.syntax--storage,
.syntax--type .syntax--function {
vertical-align: baseline;
font-family: 'flottflott';
height: inherit;
font-size: 1.5em;
line-height: 1rem;
}
.syntax--storage.syntax--type.syntax--function.syntax--arrow.syntax--js {
font-size: 1.5em;
line-height: 1rem;
}
.syntax--comment {
font-style: italic;
}
.syntax--source.syntax--js.syntax--jsx > .syntax--keyword.syntax--control.syntax--flow.syntax--js {
font-family: 'Fira Code';
font-style: normal;
}
.syntax--string.syntax--unquoted.syntax--js {
color: #CDD3DE;
}
.syntax--entity.syntax--name {
font-weight: bold;
}
}
.pane {
background: url('http://gzhaixier.com/data/out/62/46169594-dark-background-images.jpg');
background-size: cover;
}
.editor {
background: rgba(0,0,0,0);
}
Thank you!
I have this great for loop in my precss style sheet. I would like to convert it to a mixin where i can pass the start values for $size (font-size) and $spacing(letter-spacing) for different media queries. I cannot get the variables to increment as i progress through the loop when i call it from a mixin. It works fine from the stylesheet
/*--adds .4 rem to each heading fz and character spacing 1-6---*/
$size: 1.8rem;
$spacing: 7px;
#for $i from 6 through 1 {
h$i {
font-size: resolve($size);
letter-spacing: resolve($spacing);
#extend %heading;
}
$size: $size + .4rem;
$spacing: $spacing * 1.2;
}
Your current code is close to working as a mixin when wrapped in a #mixin declaration in SCSS. The only tweak needed is outputting the $i in the selector using the #{$variable}
SCSS input:
%heading{
/* heading properties */
color: #999;
font-family: sans-serif;
}
#mixin headingSize($size: 1.8rem, $spacing: 7px){
#for $i from 6 through 1{
h#{$i}{
#extend %heading;
font-size: $size;
letter-spacing: $spacing;
}
$size: $size + .4rem;
$spacing: $spacing * 1.2;
}
}
#include headingSize($size: 2rem, $spacing: 10px);
This example uses your original $size and $spacing variables as default parameters in the mixin.
Here's an example JSFiddle in action.
CSS output:
h6, h5, h4, h3, h2, h1 {
/* heading properties */
color: #999;
font-family: sans-serif;
}
h6 {
font-size: 2rem;
letter-spacing: 10px;
}
h5 {
font-size: 2.4rem;
letter-spacing: 12px;
}
h4 {
font-size: 2.8rem;
letter-spacing: 14.4px;
}
h3 {
font-size: 3.2rem;
letter-spacing: 17.28px;
}
h2 {
font-size: 3.6rem;
letter-spacing: 20.736px;
}
h1 {
font-size: 4rem;
letter-spacing: 24.8832px;
}
(I think I should mention this, I've only recently started using Sass/SCSS)
http://jsfiddle.net/DriftingSteps/t6kLncfm/
You can see how <strong> is inheriting the properties of the global <a> as well as the properties from nested <a> tag.
a {
color: #09f;
text-decoration: none;
&:hover {
text-decoration: underline;
opacity: 0.6;
}
}
ul {
font-size: 0.85em;
a {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
strong {
#extend a;
}
}
I have been going through http://sass-lang.com/ and I know I'm missing something.
What am I doing wrong? Is there a way to inherit properties from the nested <a> only, without the use of classes on either ul a and ul strong? Or is there a better way to do this?
You could use an extend-only selector (%), and extend both ul a and ul strong from that:
a {
color: #09f;
text-decoration: none;
&:hover {
text-decoration: underline;
opacity: 0.6;
}
}
ul {
font-size: 0.85em;
a {
#extend %a;
}
strong {
#extend %a;
}
}
%a {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
You don't have to use that class and you don't have to apply it to your HTML, you can just define it and refer to it when inheriting:
a, .a {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
strong {
#extend .a;
}
Demonstration
And of course, in this case you don't really need extend:
a, strong {
font-family: Georgia, Times, serif;
font-style: italic;
color: #0a3;
}
strong {
// other stuff
}
It seems to me that the real use case of extend isn't deep localized selectors defined together, but rather the extension of a selector defined elsewhere.
My CSS has the following code for links for the whole website:
#mainpanecontent A:link {
FONT-WEIGHT: bold; COLOR: #6a0a0a; TEXT-DECORATION: none
}
I want to change a header that is also a link to be a different color using the code below but it doesn't enforce it. My code is inside a div that uses the "mainpanecontent" :
Header code
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
.contact a:link, .contact a:visited
{
color: #1F507F;
}
.contact a:hover
{
color: #1F507F;
}
.contact a:active
{
color: #1F507F;
}
#mainpanecontent A:link has a higher specificity than any of your .contact a:somethings. The best way to solve this is probably to give your header an ID and use that. If you can’t, and it’s only in #maincontent, #maincontent will suffice, even if it’s not entirely appropriate. (Depends on the situation.)
#mainpanecontent .contact a:link {
color: #1f507f;
}
Also, just drop the :link, especially if you’re going to specify the same thing for all of them. (The only consideration there, <a name>, isn’t used these days.)
CSS has a system of priority for handling what gets what tags :: Give this a read
Here is a simple rewrite of your code that should work :)
Everything higher on the list should overwrite things lower of the list of the same type
.contact a:active
{
color: #1F507F;
}
.contact a:hover
{
color: #1F507F;
}
.contact a:link, .contact a:visited
{
color: #1F507F;
}
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
CSS Rules are sometimes not enforced due to how explicit the previous rule was, in the rule you list above it references an ID, which is more explicit than a class.
The other issue of course can be that your "overrides" are defined BEFORE the other rule, therefore they are overwritten.
In the first case you can use !important to force the override of the rule.
e.g.
.contact
{
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;
}
.contact a {
color: #1F507F !important;
}
Note I removed the other rules, because you are only setting the link color to the same color in each case, so there's no need to define the pseudo-classes :hover, :active etc. with the same constant.