I have only just started using Sass this morning, after reading about it last night. I think I'm understanding it (but feel free to to comment if you disagree). I've ran into one problem though, be it minor but inducing an OCD head ache.
ul#primary-nav {
font: 400 16px $font-stack;
margin: 0 auto;
text-align: center;
li {
display: inline-block;
margin: 0 15px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
a {
color: $grey;
padding: 10px 5px 15px 5px;
&:hover {
border-bottom: $blue solid 6px;
.active {
font-weight: 700;
}
}
}
}
This outputs the following code:
ul#primary-nav {
font: 400 16px "Lato", sans-serif;
margin: 0 auto;
text-align: center; }
ul#primary-nav li {
display: inline-block;
margin: 0 15px; }
ul#primary-nav li:first-child {
margin-left: 0; }
ul#primary-nav li:last-child {
margin-right: 0; }
ul#primary-nav li a {
color: #777777;
padding: 10px 5px 15px 5px; }
ul#primary-nav li a:hover {
border-bottom: #25aae1 solid 6px; }
ul#primary-nav li a.active {
border-bottom: #25aae1 solid 6px;
font-weight: 700; }
So the code itself is fine for what I want but I was wondering why it is adding the closing paragraph tag to the last line. Is there a way to force it on the line below
ul#primary-nav li a:hover {
border-bottom: #25aae1 solid 6px;
}
I know it's only a small thing but it would make me ever so happy.
Yes it is entirely possible to satisfy your OCD needs: basically you need to make sure the compiler is outputting in expanded style.
From the docs:
Nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
Expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
From the command do this with sass style.css --style expanded, but your build system might also expose the option somewhere - check its docs.
Related
Currently there are no options in the theme to align TABS centered. I tried to play with the CSS in the stylesheet (style.css), but with no luck.
how can I make the tabs center aligned?
/* tab */
.tab-set {
margin-bottom: 50px;
}
.tab-set ul.tabs-titles {
padding: 0;
height: 32px;
margin: 0;
clear: right;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
float: left;
list-style-type: none;
cursor: pointer;
}
.tab-set .tabs-titles li:last-child {
border-right: none;
}
.tab-set .tabs-titles li.current {
padding: 15px 35px;
position: relative;
top: 1px;
color: #575a5c;
background: #f6f6f6;
}
.tab-set .tab-content {
padding: 20px 20px 10px;
background-color: #f6f6f6;
clear: both;
}
.tab-content p {
padding: 0;
}
.tab-set.white .tabs-titles li {
border-right: 1px solid #fff;
}
.tab-set.white .tabs-titles li.current {
background: #fff;
}
.tab-set.white .tab-content {
background-color: #fff;
}
It's a bit hard to guess the issue since there's no html to make sure the structure is correct. For sake of cleaner code, I'd do this and update the following:
.tab-set ul.tabs-titles {
padding: 0;
margin: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
display: inline-block;
}
.tab-set .tabs-titles li.current {
color: #575a5c;
background: #f6f6f6;
}
Try not ever set a fixed height unless needed because that's how items can look all messy. Have the padding/line-height dictate the height. I also removed some duplicates. For example, applying the same padding to .current was just doing the same thing. Hope this helps.
EDIT:
Here's my codepen to see it in action: https://codepen.io/thecenteno/pen/LYYgMpv
When I opened my webpage, the CSS was not working so I checked the console to see what was going on and it turns out it wasn't loading because my CSS was in Chinese, even though it is English in my Sublime Text program.
Here is the Chinese:
⨯䜠湥牥污䌠卓映牯攠敶祲瀠条⼪汵渣癡笠瀉獯瑩潩㩮猠楴正㭹††楬瑳猭祴敬琭灹㩥渠
湯㭥††慭杲湩›㬰††慰摤湩㩧〠഻ †漠敶晲潬㩷栠摩敤㭮††慢正牧畯摮挭汯牯›㌣㑆㑄㬲††
潢桳摡睯›瀰⁸瀸⁸㘱硰〠硰爠执⡡ⰰⰰⰰ⸰⤲഻ऊൽഊ氊慮⁶ൻ †映潬瑡›敬瑦഻ऊൽഊ氊ⱡ愠瀮摡
笠††楤灳慬㩹椠汮湩ⵥ汢捯㭫††潣潬㩲⌠㉅㙅㍅഻ †琠硥污杩㩮挠湥整㭲††慰摤湩㩧㈠瀰⁸
㔲硰഻ †琠硥敤潣慲楴湯›潮敮഻ऊ潦瑮猭穩㩥㈠瀰㭸昉湯慦業祬›匧畯捲慓獮倠潲Ⱗ猠湡敳
楲㭦紉楬愠瀮摡笠瀉摡楤杮›〲硰㘠瀰㭸紉楬渮癡愠栺癯牥笠戉捡杫潲湵ⵤ潣潬㩲⌠䐸
㤹〹഻ऊൽഊ氊捡楴敶栺癯牥笠按汯牯›䔣䔲䔶㬳紉ഉ栊浴ⱬ戠摯⁹ൻ †洠牡楧㩮〠഻ †瀠摡
楤杮›㬰戉捡杫潲湵ⵤ潣潬㩲爠执㠨ⰹ㤠ⰸㄠ㘰㬩紉捡楴敶笠戉捡杫潲湵ⵤ潣潬㩲⌠㉅㙅㍅
※按汯牯›㌣㑆㑄㬲紉爣杩瑨慮⁶ൻऊ汦慯㩴爠杩瑨഻ऊൽഊ瀊笠洉牡楧潢瑴浯›瀲㭸
ൽഊ栊笱洉牡楧潢瑴浯›瀳㭸
My CSS is supposed to load as:
ul#nav {
position: sticky;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3F4D42;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
li.nav {
float: left;
}
li a, a.pad {
display: inline-block;
color: #E2E6E3;
text-align: center;
padding: 20px 25px;
text-decoration: none;
font-size: 20px;
font-family: 'Source Sans Pro', sans-serif;
}
li a.pad {
padding: 20px 60px;
}
li.nav a:hover {
background-color: #8D9990;
}
li a.active:hover {
color: #E2E6E3;
}
html, body {
margin: 0;
padding: 0;
background-color: rgb(89, 98, 106);
}
a.active {
background-color: #E2E6E3;
color: #3F4D42;
}
#rightnav {
float: right;
}
p {
margin-bottom: 2px;
}
h1{
margin-bottom: 3px;
}
A developer recently changed the formatting of my style.css file from:
.header {
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
padding: 15px 10px 0 10px;
height: 80px;
}
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem;
}
.header h3 a {
color: #636c72;
}
.header ul.nav {
margin-top: 4px;
}
to this:
.header {
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
padding: 15px 10px 0 10px;
height: 80px; }
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem; }
.header h3 a {
color: #636c72; }
.header ul.nav {
margin-top: 4px; }
My Question
I can see that the new developer has changed the formatting to a nested style which is fine I guess BUT I'm wondering if this will have any implications on my app which currently uses SCSS? More specifically I'm wondering if the new developer has used SCSS to do this or he's introduced something new to my project which I don't know about.
I have zero knowledge of css hence the question.
I'm setting up a Jekyll page and the current theme I'm using uses Sass, but GitHub pages (where I'm hosting it) does not support Sass. So I'm trying to convert my .scss files to .css but I'm getting the an error on this file:
---
---
#import 'syntax';
$site-background-color: #f5f5f5;
$contrast-color: #333;
$azul-accent-color: #0070bb;
$ruby-accent-color: #e0115f;
$amber-accent-color: #ff7e00;
$avocado-accent-color: #568203;
/*============================================================================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: $site-background-color;
border-top: 5px solid $contrast-color;
font-family: 'Source Sans Pro', sans-serif;
color: $contrast-color;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl,
blockquote,
table,
img,
hr,
.fluid-width-video-wrapper,
.highlight {
margin-bottom: 20px;
}
blockquote {
padding: 0 30px;
border-left: 2px solid darken($site-background-color, 15%);
}
ul, ol {
margin-left: 40px;
}
img {
max-width: 100%;
height: auto;
border: none;
outline: none;
}
a {
text-decoration: none;
}
hr {
border : 0;
height: 25px;
background : url(/public/images/eagle.png) center center no-repeat;
}
code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-size: .8rem;
}
p code {
padding: 0px 5px;
border: 1px solid #ddd;
background-color: #f8f8f8;
border-radius: 3px;
white-space: nowrap;
}
table {
border-collapse: collapse;
border: 1px solid $contrast-color;
td, th {
border: 1px solid $contrast-color;
padding: 5px 10px;
}
thead {
background-color: darken($site-background-color, 10%);
}
}
// TODO: make dt smaller
dt {
float: left;
width: 30%;
font-weight: bold;
}
dd {
float: right;
width: 70%;
}
footer {
font-size: .8rem;
text-align: center;
}
/*============================================================================*/
.azul { a { color: $azul-accent-color;
&:hover { color: darken($azul-accent-color, 20%);
}}}
.ruby { a { color: $ruby-accent-color;
&:hover { color: darken($ruby-accent-color, 20%);
}}}
.amber { a { color: $amber-accent-color;
&:hover { color: darken($amber-accent-color, 20%);
}}}
.avocado { a { color: $avocado-accent-color;
&:hover { color: darken($avocado-accent-color, 20%);
}}}
/*----------------------------------------------------------------------------*/
.highlight {
padding: 30px;
border-radius: 6px;
background-color: #272822;
color: #f8f8f2;
line-height: 1;
code {
font-size: .7rem;
}
}
.container {
max-width: 750px;
padding: 0 20px;
}
.center {
text-align: center;
}
.right {
float: right;
margin: 0 0 20px 20px;
}
.left {
float: left;
margin: 0 20px 20px 0;
}
.top-navbar {
margin-bottom: 40px;
height: 110px;
a {
display: inline-block;
color: $contrast-color;
padding: 66px 20px 25px;
margin-right: 10px;
margin-top: -5px;
text-transform: uppercase;
border-radius: 0 0 5px 5px;
border-bottom: 1px solid lighten($contrast-color, 10%);
transition: all ease-in-out .3s;
&:hover,
&.current-page {
color: $site-background-color;
border-bottom: none;
}
&:hover {
background-color: $contrast-color;
transform: translateY(5px);
}
&.current-page {
background-color: $contrast-color;
}
}
}
.archive,
.single {
margin-bottom: 100px;
}
.single {
font-size: 1.125rem;
line-height: 28px;
}
.single time {
color: #999;
font-size: .9rem;
}
.bundle {
border-top: 1px solid lighten($contrast-color, 50%);
padding-top: 10px;
margin-bottom: 10px;
}
.post-date {
text-align: right;
}
.not-found {
margin-top: 150px;
text-align: center;
font-size: 2rem;
}
.not-found h1 {
font-size: 8rem;
}
dl,
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
dl,
.clearfix:after {
clear: both;
}
/*============================================================================*/
#logo {
display: inline-block;
height: 110px;
width: 110px;
background-size: 90px 90px;
background-position: left center;
background-repeat: no-repeat;
}
/*============================================================================*/
#media screen and (max-width: 767px) {
.top-navbar {
height: 35px;
text-align: center;
margin-top: 40px;
a {
padding: 5px 10px;
margin: 5px;
border-radius: 0;
border: 1px solid $contrast-color;
transition: none;
&:hover {
transform: none;
}
}
}
.bundle,
.post-date {
text-align: center;
}
.bundle article {
margin-bottom: 30px;
}
#logo {
background-position: center center;
}
}
The error is:
Line 1: Invalid CSS after "-": expected number or function, was "--"
I imagine there is a quick fix for this that I am missing since I am not familiar with Sass at all. Am I right? Anyone know how I can fix this?
Also, I'm using the following command to convert from scss to css sass --watch main.scss:main.css if anyone knows of a better way please let me know!
Thanks for any help!
You have two lines of --- at the beginning of your file; what is it you think they're doing? Remove them, they're syntactically invalid and they're causing your errors.
Jekyll 2 brings native Sass compilation and the two lines of triple dashes are in fact required in order for Jekyll to compile the Sass file:
http://jekyllrb.com/docs/assets/
If you are not yet using Jekyll 2, then this will not work of course. If you are using Jekyll 2 then you can do this and no longer require a sass --watch command, Jekyll will do that automagically.
you probably had the same problem as me that the _config.yml is not at your root directory. If you don't want to change your file structure, you can set a new repo and add the jekyll files in a new gh-pages branch. I wrote a blog about it: http://shinshinwu.github.io/myblog/jekyll/update/2014/12/21/welcome-to-jekyll.html
I'm using the Foundation 5 framework and trying to use the js tabs plugin they provide.
However I'm getting the following result http://crea8tion.com/PU2/index.html#
Whilst on their site it should be like this
http://foundation.zurb.com/docs/components/tabs.html
Not sure what I'm doing wrong?
Is it that the java script is not being called correctly?
Same thing happened to me. It was as if the accordion css wasn't included when you customized your Foundation build.
I solved it by downloading the standard Foundation and copying the content of foundation.min.css into the folder I am using.
This is usually because of the missing CSS rules, which happen if do you a custom build. For example, here is my page with a custom build where I left out the tabs.
I then copied over the rules from a complete download and tested it in the browser. Which you can also do to see if this is your issue.
.tabs {
*zoom: 1;
margin-bottom: 0 !important; }
.tabs:before, .tabs:after {
content: " ";
display: table; }
.tabs:after {
clear: both; }
.tabs dd {
position: relative;
margin-bottom: 0 !important;
top: 1px;
float: left; }
.tabs dd > a {
display: block;
background: #efefef;
color: #222222;
padding-top: 1rem;
padding-right: 2rem;
padding-bottom: 1.0625rem;
padding-left: 2rem;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 1rem; }
.tabs dd > a:hover {
background: #e2e2e2; }
.tabs dd.active a {
background: #fff; }
.tabs.radius dd:first-child a {
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px; }
.tabs.radius dd:last-child a {
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px; }
.tabs.vertical dd {
position: inherit;
float: none;
display: block;
top: auto; }
.tabs-content {
*zoom: 1;
margin-bottom: 1.5rem; }
.tabs-content:before, .tabs-content:after {
content: " ";
display: table; }
.tabs-content:after {
clear: both; }
.tabs-content > .content {
display: none;
float: left;
padding: 0.9375rem 0; }
.tabs-content > .content.active {
display: block; }
.tabs-content > .content.contained {
padding: 0.9375rem; }
.tabs-content.vertical {
display: block; }
.tabs-content.vertical > .content {
padding: 0 0.9375rem; }
#media only screen and (min-width: 40.063em) {
.tabs.vertical {
width: 20%;
float: left;
margin-bottom: 1.25rem; }
.tabs-content.vertical {
width: 80%;
float: left;
margin-left: -1px; } }
ul.pagination {
display: block;
height: 1.5rem;
margin-left: -0.3125rem; }
ul.pagination li {
height: 1.5rem;
color: #222222;
font-size: 0.875rem;
margin-left: 0.3125rem; }
ul.pagination li a {
display: block;
padding: 0.0625rem 0.625rem 0.0625rem;
color: #999999;
-webkit-border-radius: 3px;
border-radius: 3px; }
ul.pagination li:hover a,
ul.pagination li a:focus {
background: #e6e6e6; }
ul.pagination li.unavailable a {
cursor: default;
color: #999999; }
ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus {
background: transparent; }
ul.pagination li.current a {
background: #008cba;
color: white;
font-weight: bold;
cursor: default; }
ul.pagination li.current a:hover, ul.pagination li.current a:focus {
background: #008cba; }
ul.pagination li {
float: left;
display: block; }
Paste in code to test
Then you can proceed to either add in the code manually or just replace the foundation css files.
What worked for me is upgrade to 5.3.3 (both JS and CSS files):
http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.min.css
http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/js/foundation.min.js
(Currently using 5.4.0, where works fine as well).
Lesson #1. Custom builds form Zurb are not always proper. Been burned a few times there.
Downloading the whole shebang as Artur Barsheghyan suggests solves the problem. At a cost of some 50kb extra or so depending on your customisation.
The link suggested also applies to the non minimised version:
http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.css
if you feel like hunting what's missing and inserting it into your custom download...
I strongly suggest that manual hunt and edit. I had the accordion bits missing and they are but 30 lines at the 3056 mark of the non minimised file.