I'm new to foundation, and using the latest version. I would like to add various kinds of styling to my pages, e.g. make some or all input boxes rounder or thicker, apply specific colors to specific elements (and of course, choose between custom color pallets that come along with Zurb if any, to begin with).
Should I use plain styles of my own? or should I use existing foundation classes? Is there also a collection of built-in color pallet or style themes to choose from?
I should say I'm not sure whether I have to use/download the Sass version for any of that, as it is left rather ambiguous on the download page to me, whether Sass/SCSS is a separate version or download of Foundation.
Of course I can role my own styles, but I'd like to learn whether there's a cleaner or more productive approach.
If you don't know sass, use the regular css files. If you want to change things, create a separate css file and override the css rules. As long as you reference the css file with the overridden rules after the main css file, you should be good to go.
If you do know Sass, just edit the Sass file and when you're done, compile it to CSS using any number of tools available (Google "Sass to Css").
Whenever I've worked with Foundation, I've downloaded the whole job lot, but you can download a custom build from Here.
Related
I would like to do a project with TYPO3 v10 I'm new with this CMS and I need to create different templates for different pages but I don't understand which code I need to change.
I already install a sitepackage from this site https://www.sitepackagebuilder.com/
It work well but I need to create my own templates and I want to edit the content of my templates in the back end administration like in the picture.
I hope I'm clear
thanks for help :)
I am not sure if there is a misconception in the question or if I have interpreted incorrectly. In any case, I hope this helps:
It is important to differentiate between content + template in TYPO3:
content
In the screenshot posted in the question, you see the TYPO3 backend, which is a view for editing content, administration etc. There you see the page module is opened in the left column (1), you see the page tree in the middle column (2) and the page layout for editing content on the selected page in the right column (3). Here, you can insert and edit the content, that will be displayed on a page.
Template
In TYPO3, the template is what makes up the automatically generated parts of the page such as header, footer, menu, breadcrumb etc.
It work well but I need to create my own templates and I want to edit the content of my templates in the back end administration like in the picture.
Editing the template in the backend with a Wysiwyg ("what you see is what you get") editor, similarly to editing the content is not really possible in TYPO3 AFAIK - at least not out of the box. For this, you would need a template builder. The only thing I have seen so far that comes close to this is toujou (I am not affiliated with them, just wanted to mention it). They have something which you could call a website builder. But AFAIK, you can't download it, they provide this as a service.
The sitepackage builder - as far as I know - pretty much just creates a sitepackage based on the bootstrap package extension which you would have to further modify by editing the files.
What you can also do is edit the TypoScript in the backend. Just go to the "Template" module in the left column. But, this made more sense in the past, because a lot more was done with TypoScript. Nowadays, you usually use a combination of Fluid and TypoScript and you can't edit the Fluid files in the backend.
While in the past, a lot more was done in the backend or could be done in the backend, everything is moving towards maintaining changes in files and extensions, where the template is maintained in a sitepackage. For some things both is still possible (backend and extension), e.g. backend layouts, TypoScript etc.
Moving the configuration + templates from the backend (and storing them in the database or as files) to a dedicated extension has several advantages:
Every configuration etc. is bundled into one extension, this makes it easier to install in another site, on a testsystem, exchange it etc.
the sitepackage can be put in a version control system (e.g. git) which has a bunch of other advantages such as easy rollback to a previous version, referencing issues etc.
The downside is that you need more technical expertise and there is a learning curve.
see also:
The Anatomy of Sitepackages
Sitepackage Tutorial
I understand that it might be pretty cool to assemble a template in the backend - just like you can do with the content. Maybe someone else knows how to do that with TYPO3.
You can also check out these resources which seem to go in the direction of what you are looking for:
TYPO3 extension mask (documentation)
T3terminal
in the official documentation you can find the structure of folders where the files for your layout are stored.
More details on fluid templating in this document
Now you want a possibility for editors to select between different page layouts. An often used way is to use the possibility to select different backend layouts and select a frontend layout accordingly.
This is shown in the video on this page or in the documents you can find if you uses the searches on that page.
Is there any fully customized theme, not just for syntax but "look and feel" kind of a theme? Or we stuck with only a choice between Default and Darcula?
for (ver 7-8)
Do you mean suctom l&f? It's technically possible to install any third-party L&F into JVM (http://docs.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html) and use it in WebStorm, but it will most likely look ugly and break the UI in many places. If you decide to go this route, start with the Substance.
Note that implementing a custom L&F with custom colors would be a tough task, it took a lot of resources for us to make the Darcula theme.
After many projects writing my own responsive design i got a bit tired of it, after researching popular responsive frameworks decided to go with Zurb Foundation.
First i went for the css ready to go download. Then i tried to use the GEM, where i got a bit of resistance in trying to figure out things on my own. It seems the docs are not explaining enough scenarios, they are just raw docs.
First what i miss is a search for all the classes to find explanations fast, something like jquery's website has.
Many googling and reading to figure out i need to install ruby on windows. Then i ended thinking that my webserver also needs ruby installed, but figured out that SASS is just a preprocesor so it is only helping me write and maintain better code on my side :)
Here are some other problems i just can't figure out easy, without searching google for each thing:
1) I have configured dreamweaver to open .scss files also. Then each day i'm developing, i need to open ruby-console, navigate to project dir and put: compass watch. Now each time i save every modifications (so i can test i the browser), dreamweaver pops out message box: "file has been modified outside of dreamweaver,..do you want to save..blabla" - very very enoying
2) app.scss only holds a lot #import statements. _settings.scss holds the code i can change the default looks (this was my primary reason to use the gem since not a SASS guru yet). Should i uncomment some statement and change themn to my needs inside _settings.scss and will i lose all these changes after one day i succesfully update zurb with: gem update zurb-foundation? If so, is it better practice to create a new scss which holds all my overrides?
3) how to create new .scss file which should override some defaults that _settings.scss listens.
4) should i override the app.css or the _settings.scss
5) when changing top-bar links hover colors, why aren't these applied??? example: $topbar-link-color-hover: #fff; (_settings.scss)
6) i did not have an /img or /images folder in my project after creating it. Hence, i created one myself "/images"
7) any books to buy on foundation 4 with a lot of best practices and tutorials???
I'm sorry but for me honestly it seems way to much time to spend learning the very basics for zurb. I have a lot of experience in c++ projects as in mobile and desktop web projects, so i realy don't feel like a newby but it's almost like i'm pushed to buy support
First I will start off by saying, if you are new to frameworks try something that has a ton more documentation like Twitter-Bootstrap. However since you decided to use Foundation here are the answers to your questions.
1) Setup compass to write the files to another directory that Dreamweaver does not watch. Use a proxy like Charles Proxy to proxy in the files when you are developing locally. This will get rid of the annoying do you want to save this file message. Make the compilation of the SCSS files part of your build process before you deploy your application somewhere other than local.
2) Yes, app.scss has all the import statements. Some of which you might want to comment out if you are looking for raw speed, just fyi. In terms of overrides one thing that you can do is use the Mixins that are provided to you in the other files. Button.scss for example has some fantastic button mixins that allow you to not only create your own flair but inherit most of the Foundation Awesomeness. Another thing, if you notice how all of the variables have a !default. That means that if they are declared somewhere else(read import your variable first), the Default value will be overridden.
3) just make the file and add it as an import before the _settings.scss
4) app.scss has a ton of imports for all the parts of foundation, some you are most likely using and some maybe not.
5) Would need to see the compiled CSS for this one, my guess though without seeing anything is that you missed a variable.
6) Created it because Compass was looking for it? Unless you are planning on using images or creating a sprite (compass can create sprites, which is AWESOME) you can just comment or remove that from the config.rb.
7) Have not seen any. Foundation has much less of a community at this time when compared to Bootstrap. However you can get a leg up by studying up on SASS and SCSS, there is a lot more available on that part.
I'm trying to optimize my company's application.
Tha architecture at this time is composed of different folders (inside common folder) for different sections of the app (for example Managing Bills, Managing Canteen, Managing Events etc etc).
Every js and css are included in the first page of the application (login.html) because I'm using the simple page template of jQuery Mobile.
Now I'm considering to add some other components to make the app easier to mantain and maybe speed it a bit.
What do you think about:
RequireJS to divide each section in a module so i can load only the javascript of a particular module at run-time instead of loading within login.html
Inline #imports for CSS files to produce single composite CSS
uglify.js to Minimize file sizes
Handlebars.js to realize fragments of html reusable
Do you think is a good way of work for an application that will become greater by adding new sections?
Do you think of other tools?
Thank you
This is a very broad question. I think you're on the right track... I'll list some libraries that could be worth trying:
Require.js - Will give you the ability to have 'modules' and dynamically determine and load dependancies. Alternatively some people prefer patterns such as the Revealing Module Pattern, jQuery Plugin Style or Common JS style modules. For what it's worth I recommend Require.js.
Bower is a package manager, you can use it to bower install [package]. They have a lot of packages here and you can also link it to your own repo. This could be helpful for managing dependancies.
Uglify.js and Google Closure Compiler are both good for minifying your code. Remember that some minification configurations such as advance mode could break your code. Run tests against the minified version of your source code.
QUnit is good for doing JavaScript unit tests. There are many other alternatives like Jasmine, which is what the Cordova guys use.
Lodash is another (faster) implementation of underscore.js that will provide a lot of utility methods for working wit arrays, objects, functions, etc. It also includes templating support. There's a good talk by the author here.
There a MV* JavaScript frameworks that could help more than jQuery (DOM+AJAX+Animations) or jQuery Mobile (Mostly UI) such as: Dojo, AngularJS, Backbone and Ember.js.
For UI you may want to checkout Adobe's topcoat repository and website. There's also Twitter Bootstrap and Foundation which allow you do to responsive design out of the box. If you're set on jQuery Mobile I personally like this Flat theme.
JSDoc and YUIDoc are good alternatives for documenting your JavaScript code.
I have no idea how many of those tools will interact inside Worklight Applications. It should be fine, since Worklight doesn't impose a certain set of JavaScript libraries you have to use. However, I haven't personally tried most of them inside Worklight Applications.
I'm looking for a quick start or template, or something, to get a web site's basic layout done quickly and looking fairly professional, and then let me do the coding. I don't want a CMS, as this is for a highly customised reporting application, but I need something like frame header and two columns and frame footer. I can design the pretty reports for the wide right hand column myself, as the left hand column menu.
Something like YUI Grids CSS?
http://developer.yahoo.com/yui/grids/
or Blueprint CSS?
http://www.blueprintcss.org/
Or CSS boilerplate?
http://code.google.com/p/css-boilerplate/
you could use the BluePrint CSS framework or check out the CSS Templates
You don't mention what language you're using, but if it's Java, Appfuse is a really great tool for creating an entire (skeleton) web application project from a configurable template. This skeleton includes an initial HTML/CSS/Javascript UI that includes common elements such as a login page, an "add user" page, etc.
Depending on your IDE, Eric Meyer wrote a program called CSS Sculptor that you can use to quickly develop standards-based layouts. I've used it, and it's great.