SamC

Members
  • Content count

    203
  • Joined

  • Last visited

Community Reputation

113 Excellent

About SamC

  • Rank
    Sr. Member

Profile Information

  • Gender
  • Location
    Surrey, UK

Recent Profile Visitors

387 profile views
  1. Looks great, thanks for sharing the screenshots
  2. At first I didn't understand foundation, then my lightbulb moment happened this morning. Then I built a demo page responsive flexbox layout in about 30mins using both the provided classes, then with the mixins provided instead to cut the HTML classes bloat. Then I was like this looking at my old small boilerplate css: Gotta love making stuff for the web
  3. I'll try uikit instead see if their docs make more sense than the foundation ones.
  4. Ok, so I bit the bullet and got foundation 6 up and running, well I think so. Not sure about the bower part. I used three methods to try and get my head around this: npm install foundation-sites I could then integrate the sass into my current workflow (with my own gulpfile) quite easily, made a quick demo page and the sass seemed to work ok. So I thought I'd try a starter project because it's all bundled together, which may be even easier (because of the pre-made gulpfile which handles the js as well): foundation new --framework sites --template basic ...which downloads a bunch of stuff. You can run 'foundation watch' in powershell (using scoop for win10 on the pc) and edit the scss, outputs css etc.. What I don't get is that I haven't installed bower anywhere along the way. @Sérgio mentioned using foundation yesterday so may have a good idea what's going on here. Foundation seemed to have multiple different instructions on different pages, one says use npm (which I did initially), then another is for starter templates, yet another one suggested installing node, then npm, gulp, bower and even RUBY as well (!!). What I've ended up with is a basic template, like this: This lot could easily go into /site/templates/site-assets/ in a PW install so the workflow is relatively similar to what I do anyway. However, how does the 'bower_components' folder come into play here? I never installed bower anywhere along the way and I'm not sure the automated cli tool did either. Did I miss a step or something? The page I followed was here http://foundation.zurb.com/sites/docs/installation.html#command-line-tool.html I also downloaded the zurb template but not looked too deeply into that one yet, seems to include handlebars and all sorts off stuff I'll never use. Thanks in advance for any advice.
  5. Interesting points @Sérgio. That website is very impressive too, thanks for sharing. I haven't gotten into anything as large scale as that yet so I'm guessing I don't see the need for a framework. With that said, I don't think this quest is fully over Don't! I just can't cope with it. Although it is slightly addicting in a weird way.
  6. After todays events, I tend to agree with this. Last time I let the internet convince me about stuff I already know about
  7. Thanks for the suggestions, still looking through them. Achieved approx. ZERO today so far. Not even got one up and running. I currently just import http://include-media.com/ and normalize.scss then the rest of the sass is just stuff I've made up over the years. I used to use neat grid for a number of sites and it was pretty simple but they are sticking with floats so I'm moving on, My own personal site has no grid at all, I just used flexbox wherever items needed to be arranged in a certain way. I do this: // gulpfile.js 'use-strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var paths = { sass: 'sass/', css: 'css/' }; gulp.task('sass', function() { return gulp.src(paths.sass + 'styles.scss') .pipe(sass()) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) //.pipe(sass({outputStyle: 'compressed'})) .pipe(gulp.dest(paths.css)); }); gulp.task('sass:watch', function() { gulp.watch(paths.sass + '**.scss', ['sass']); }); ...and styles.scss /* Imports */ @import "variables"; @import "tools"; @import "mixins"; @import "layout"; @import "effects"; @import "buttons"; @import "lists"; @import "tables"; @import "forms"; @import "typography"; @import "media"; @import "modal"; @import "menus"; // any custom code .images-grid { .image { img { transition: all 0.3s ease-in-out; &:hover { @include transition("shrink"); } } } } It's dead simple, I start with the same boilerplate each time and edit it rather than override anything. I'm free to uses classes I want, then just style them out. I mean, something like this: https://css-tricks.com/designing-a-product-page-layout-with-flexbox/ ...it's simple to do with custom sass. How would you even do stuff like this in a framework with pre-defined classes? It just seems so restricting.
  8. Been looking over some frameworks, wanted to try a few today but what an utter nightmare. I mean how hard does this need to be? A site only looks one way, the only CSS needed is the stuff that's used, to make it look that one way. Having 10 options for a simple card is great, but I'll only use one, and I guess the code for the other 9 is still there, slowing down my site for no reason. This article springs to mind when looking over these things: http://www.lifehack.org/articles/communication/are-you-suffering-from-the-curse-knowledge.html I reckon when a developer goes into a cafe and orders a cup of tea, they don't get a cup of tea. They get a cup of hot water, 4 types of teabag, 3 spoons, 2 types of sugar and 3 types of milk. Then they make a framework in order to put these things together. Maybe I need to look into a more minimal framework this one looks interesting: https://chalarangelo.github.io/mini.css/
  9. Lol, maybe not, my styles.scss contains stuff like: /* Services page */ .services-flex { text-align: center; @include media("<tablet") { .services-item-image { img { margin-bottom: $base-spacing * 1.5; } } } @include media(">=tablet") { display: flex; flex-wrap: row nowrap; justify-content: space-between; text-align: left; } @include media(">=tablet") { .services-item-image { flex: 1 30%; img { height: auto; max-width: 100%; } } .services-item-summary { flex: 1 60%; } } .even & { flex-direction: row-reverse; .services-item-image { @include media(">=tablet") { text-align: right; } } } } ...which becomes a pita if I want to change a layout and when I go back to it after a few months, it takes awhile to work out what does what. Starting to think 'uk-myclass-does-some-alignment' is the lesser of two evils here. Looking at ui-kit now, and trying to work out how it would fit into my node/gulp/gulp-sass way of working.
  10. Site I'm (possibly) about to work on: $8,700 – $10,440 Whaaaaa? That's around £7000. I don't think the "That's a bit beyond our budget" answer would even come, they'd be lying stone cold dead on the floor from the shock.
  11. I'm in the opposite camp recently. I've been writing my own CSS for about a decade (I don't like using 'grid-4-is-4-columns' and all that in my HTML, I prefer class names that describe the contained content, then style them out in the CSS). However, this is becoming too time consuming for exactly the reasons you mention above, want some parallax, I have to go find a jquery library, then some custom css, the bootstrap guys are already having a tea break Maybe the grass isn't always greener, but I have to try at least one proper framework to make a fair decision! Currently looking at uikit and bootstrap 4 (yes, I know this means adding a bunch of dumb sounding classes all over my HTML).
  12. Love this! Thanks @SiNNuT been waiting for css grid forever, ditched floats for flexbox on a recent site but it's really no substitute for a proper grid system (previously using bourbon/neat).
  13. No problem, glad to (accidentally) help
  14. Will do that from now on, thanks for the tip.
  15. Thanks for the info. Yes to the second point, got a 404 in the console, can't find: /site/modules/TracyDebugger/ace-editor/ace.js Maybe because when I installed the module, after unzipping, my path is actually: /site/modules/TracyDebugger-master/ace-editor/ace.js Guess you have to rename the folder and remove the '-master' bit after unzipping.